Tutorial: HTML Forms

HTML Form commands provide a tool to collect information from visitors to your Web site. There are four form commands you will learn <form> <input> <select> and <option> and and four types of input: text, radio buttons, checkboxes, and the submit button.

1. w3schools.com / Deitel Book

Work through the tutorial and all examples at http://www.w3schools.com/html/html_forms.asp.


Work through pages 111-121 in the Deitel book.

Important note about the Name attribute of form objects:
Every form object (textboxes, radio buttons, check boxes, and lists) must have a unique name. The name you choose must uniquely identify the object within the form. Form object names cannot contain spaces or special characters. You can use any combination of alphanumeric characters and an underscore (_). Note that the label you assign to the text field is the variable name that will store the value (the entered data) of the field. This is the value sent to the server for processing.

2. Study a more complex HTML form

Check out the Web form at http://garnet.acns.fsu.edu/~kbaldauf/cgi-bin/guestbook.html - view the source code.

Download the form to your own PC and experiment with the various form commands - don't worry about the form action yet; you will learn how to connect the form to a server side script in the next tutorial.

Useful Notes:

The label tag
The label tag is used to define a text label to a control. If you click the text within the label element, it is supposed to toggle the control. The "for" attribute binds a label to another element. Notice how the label tag is used in the example form. Try clicking on the labels of the example form in your Web browser. Using the label tag also assists users with disabilities.

The tabindex attribute
The tabindex attribute defines the order for selecting objects in a form when using the Tab key. Notice how the tabindex attribute is used in the example form. The tabindex attribute behaves differently in different browsers. Try using the Tab key on the example form in Internet Explorer. Note that the Space bar can be used to toggle radio buttons and checkboxes. Using the tabindex attribute also assists users with disabilities.

3. Work through part 1 of the assignment