A7 – Forms


Requirement:

You MUST read the Academic Integrity policy before beginning this assignment. If you have any questions regarding what constitutes cheating, please contact your instructor.


Objectives: Gain experience using HTML forms.

Description: In this assignment you will create a web page containing a form with various form controls.


Create an HTML Form and style it with CSS

Use Notepad++ to create an html page containing a form that collects student data.

Name your file assn07.htm.

As always, work on a local copy and then upload it to the server (classweb.cob.isu.edu) using these directions.

Your life will be easier if you download and install the Opera browser for testing your form.

Visual Guidance

Your web page should resemble the demo page as closely as possible.

Form Tag

The form element should look like this:

<form enctype="multipart/form-data" action="http://cobhomepages.cob.isu.edu/parkerkr/formHandler.php" method="post">

Be sure to do the following:

  • Be sure to use fieldsets and legends to arrange your page.
  • Use CSS to format your page, rather than utilizing 4 million <br/> tags.
  • Field 1: Title
    • This should be a group of radio buttons with a label.
    • The name for each radio button should be "titleGroup". Note that in this assignment the name field must match the specification exactly. If you use uppercase and the form handler expects lowercase, the form handler will not recognize the name provided.
    • The field should be required. Because radio buttons can be assigned to a group, making the first radio button required forces the user to make a selection from the group of radio buttons.
    • The field should be autofocus.
  • Field 2: First Name
    • This should be a text field with a label.
    • You should have both an id and a name set to "firstName".
    • The field should be required.
    • The maximum number of allowed characters should be 20.
    • The field should have a placeholder.
  • Field 3: Last Name
    • This should be a text field with a label.
    • You should have both an id and a name set to "lastName".
    • The field should be required.
    • The maximum number of allowed characters should be 20.
    • The field should have a placeholder.
  • Field 4: eMail
    • This should be an email field with a label.
    • You should have both an id and a name set to "email".
    • The field should be required.
    • The field should have a placeholder.
  • Field 4: Phone
    • This should be a telephone field with a label.
    • You should have both an id and a name set to "phone".
    • The field should be required.
    • The field should use this pattern: "^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
    • The field should have a placeholder.
  • Field 6: Date first enrolled
    • This should be a date field with a label.
    • You should have both an id and a name set to "dateEnrolled".
    • The field should be required.
  • Field 7: Major
    • This should be a group of checkboxes with a label.
    • Each of the checkboxes should include the attribute setting name="major[]". Seriously, set each checkbox name field to name="major[]". No variations will work.
    • Note that the 'required' attribute will not work for a group of checkboxes, but only for individual checkboxes, clearly not what is needed here.
    • Options include Business Informatics, Health Informatics, Computer Science, Informatics Post-Baccalaureate Certificate, and Informatics Minor.
  • Field 8: Indicate your GPA
    • This is a range type with a label.
    • You should have both an id and a name set to "gpa".
    • The minimum should be 0.0.
    • The maximum should be 4.0.
    • The step should be 0.10.
    • In order to add the text field next to the range field to display the value of the slider, do the following:
      • Include the following in the range field input tag:

        onchange="printValue('gpa','rangeValue')"

      • Include this line after your range field:

        <output id="rangeValue"></output>

      • Include these lines in your <head> section:

        <script>
        function printValue(sliderID, textbox)
        {
        var sliderValue = +document.getElementById(sliderID).value;
        document.getElementById(textbox).value = sliderValue.toFixed(2);
        }

        window.onload = function() { printValue('gpa', 'rangeValue'); }
        </script>

  • Field 9: INFO Classes Taken
    • This should be a select field with a label.
    • The select field should have an id set to "classes" and a name attribute set to "classes[]".
    • Multiple selections should be allowed.
    • The first option should be selected.
    • Options include INFO 1181, INFO 1182, INFO 2285, INFO 3307, INFO 3380, and INFO 4407.
  • Field 10: Are you employed?
    • This should be a group of radio buttons with a label.
    • Each radio button should have a name set to "employedGroup".
    • The field should be required.
  • Field 11: If so, full time or part time?
    • This should be a group of radio buttons with a label.
    • Each radio button should have a name set to "employmentTypeGroup".
  • Field 12: If you are interested in internships, etc., please upload your resume
    • This should be a file field with a label.
    • You should have both an id and a name set to "resume".
    • Note that this field looks different in different browsers. The demo image was from Chrome.
  • Field 13: If you have ideas of how to improve...
    • This should be a textarea with a label.
    • You should have both an id and a name set to "comments".
    • The field should allow 50 columns.
    • The field should allow 5 rows.
    • There should be no default text in the field.
  • Field 14
    • This should b a hidden field.
    • You should have both an id and a name set to "source".
    • The value should be "INFO1110Form".
  • Field 15: Submit Data
    • This should be a button element of type submit. Note this is a button, not an input field!
    • You should have both an id and a name set to "submit".
    • The text should be "Submit Data".
  • Field 16: Reset Form
    • This should be an input field of type reset.
    • You should have both an id and a name set to "reset".
    • The value should be "Reset Form".
  • When you complete the form, test it with data. It will work if you followed the directions carefully. After you hit the Submit button, if any error messages appear at the top or bottom of the resulting page then you should read them and fix the problem that caused them. If any data is missing in the results reported on the page, then you probably mistyped a name and you should fix it.
  • Name your file assn07.htm.
  • Use CSS as needed.

You should ALWAYS do the following, whether I specify it or not.

  • Include the HTML5 doctype.
  • Include a title using the title tag.
  • Nest your tags correctly.
  • Indent code correctly.
  • Validate your html using the W3C HTML Validator.
  • Validate your css using the W3C CSS Validator.
  • Link your page to your index page. There will be a 25 point deduction if you fail to do so.
  • For each assignment that you set up this semester you need to include adequate commenting. For example, in the first part of this assignment you might include a comment block like the following at the top, per the instructions at the bottom of the Assignments Page:

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
           Ima Student
           April 24, 2020
          Assignment 7
          Purpose: This is an HTML form with...
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->