This homework will give you practice with html forms. A couple general notes:

  1. Test your forms using Mozilla Firefox, because that is what the TA will use.
  2. Please create a separate html file for each of the three homework questions. Use internal CSS style sheets for doing the formatting.
  3. Please use the label element to label all widgets.
  4. Please select appropriate values for the name/value attributes of your widgets. The TAs will check that they are there but will not be grading them unless you choose completely inappropriate values.
  5. The margins in your forms may not look exactly like the margins in my forms because of screen differences in resolution and in the way that Firefox is implemented on different platforms. As long as they are roughly similar, you are fine (and if I tell you to use a specific margin size, make sure that you do so in the style sheet).

  1. Create a menu with the following characteristics:
    1. It has the elements "United States", "Albania", "Britain", "Canada", "China", "France", "Germany", "India", "Italy", and "Mexico"
    2. It displays 6 elements at a time
    3. It allows multiple selections
    4. China is the initial, default selection

  2. Create a html file that builds a radio-button form. Diagram 1 in the below table (i.e., the form labeled with "1"), shows the form in its initial size on my machine, and diagram 2 (i.e., the diagram labeled with "2"), shows a re-sized version of this form.

    1
    2
    3

    Notice that when you re-size the window, the number of radio buttons per line may change to fit the available space, but they never flow under the "Number of Dependents" label. The situation in the third diagram, where the "3" is separated from its radio button, should never occur, unless your browser window gets so narrow that the browser cannot display even a single radio button group on the same line.

    You will need to use a CSS stylesheet to do the visual formatting. The structural characteristics of the form are as follows:

    1. 2 is the default selection
    2. The textbox widget and the other radio button should appear together (i.e., as one inseparable group). If the browser window gets so narrow that the group is forced onto its own line, and then gets even narrower so that the whole group no longer fits on the line, then it is okay if the browser breaks the group.
    3. The submit button uses the get method for posting. You can use "foo.php" as the name of your script, even though it will not work.

    The visual formatting characteristics are as follows:

    1. The "Number of Dependents" label should be given a width of 180 pixels.
    2. There should be a 50 pixel separation between radio button groups (a group is a radio button and its label) and a 20 pixel separation between each radio button and its label.
    3. There should be a 20 pixel separation between the submit and reset buttons and a 10 pixel vertical separation between the radio buttons and the submit/reset group (this vertical separation should be in addition to any vertical separation provided by the browser).
    4. The submit/reset group should always appear below the block of radio buttons.

  3. Create a html file that builds the hotel form shown below:


    You will need to use a CSS stylesheet to do the appropriate visual formatting and layout. Choose appropriate values for the names and value attributes of each of the widgets. The form has the following structural characteristics:

    1. There are three groupings for "Hotel Finder", "Room Information", and "Special Needs". Each of these groupings should be labeled as shown in the figure.
    2. Country menu: It should contain three countries: "United States", "Mexico", and "Canada".
    3. City: Its size should be 10 characters with a maximum length of 15 characters
    4. State: It should contain four states, "Kentucky", "Ohio", "Tennessee", and "Wyoming"
    5. Check-in Date:

      • The default value should be "mm/dd/yyyy".
      • The size and maximum length should both be 10 characters

    6. Check-out Date: Same as Check-in Date
    7. Number of People: "1" should be the default selection
    8. Amenities: Theres should be no default selection
    9. Room Type: "Double" should be the default selection
    10. Special Needs: Use a text area that is 5 rows and 50 characters wide.

    The form has the following visual formatting characteristics:

    1. The form should be 600 pixels wide.
    2. Labels: Use the label element for all labels.
    3. Hotel Finder:
      • The height of the content inside the box should be 120 pixels.
      • The "Country" item should be roughly indented from the left by 20 pixels and from the top by 10 pixels.
      • The "City" item should be roughly indented from the left by 20 pixels and from the bottom by 10 pixels.
      • The "Check-in Date" column should be floated to the right side of the box.
      • "Check-in Date"/"Check-Out Date"/"Number of People" labels should be left-aligned.
      • The text widgets for "Check-In Date" and "Check-Out Date" should be below their labels.
      • Everything else should use default values
      • Hints
        • You should use absolute positioning to get the "City" item to appear 10 pixels above the bottom of the box. You may also want to use absolute positioning for the "Country" item.
        • In order to get absolute positioning to work, you will need to embed the three groups--country, city, and check-in date--inside a relatively positioned div. If you do not, then absolute positioning will be relative to the body tag, not your fieldset tag. You will also find that you need to declare the 120 pixel height in this relatively positioned div or else absolute positioning might not work if you try to use bottom.
    4. Room Information:
      • The "Amenities" column should be left-aligned in the Room Information box and the "Room Type" column should be just to the right of it with a margin of 50 pixels.
      • The "Smoking" checkbox should have 15 pixels of vertical separation from the radio buttons above it.

    5. Special Needs: No special formatting instructions.

    Finally the form has the following tab order:

    1. Country
    2. City
    3. Check-in Date
    4. Check-out Date
    5. Special Needs
    Do not worry about the tab order for the radio button or checkbox groups.