Introduction to Forms

File Management:

  1. Create a new folder in your web folder called "forms"
  2. Open this link in a new tab.
  3. View the source of the page.
  4. Copy all of the source code into a blank Notepad.
  5. Save your notepad as "form_examples.html" in your "forms" folder.
  6. Close the original source and tab.
  7. View the HTML file you saved in a Web browser.

Examine the HTML:

  1. Notice the form element. The "action" attribute tells the form where to submit to.
  2. Notice the fieldset and legend elements. The fieldset creates a group and the legend provides a description in the line around the group.
  3. Notice the input elements and label elements. Each input element is one possible choice or entry in the form, and the labels make it clear what content goes with each input.
  4. Notice the "type" attribute on the input elements. This determines what kind of input it is. You will do a whole worksheet on input types next week.
  5. Notice the select and option elements. They create dropdown and multiple selection boxes. Here they are used to make a dropdown box.
  6. Notice the last input: it is of type "submit" and that is how the form knows when you submit it. When you click on this button is sends the form contents to the action page that is specified in the form element.

Submit the Form

  1. View the form in a Web browser.
  2. Test the form by filling it out and submitting it.
  3. Read the results. This action page will simply read back any input names and the values you filled out.
  4. For example, if you changed the three radio button names from "optGroup" to "radioOptGroup" and then saved, refreshed, and filled out the form again, you would see that change reflected in the results.
  5. Do that and test it.