HTML - Forms

The final structural HTML element we’ll discuss in this section is used to create web forms. As with tables, forms are frequently used to display information to the user that couldn’t otherwise be shown with plain text. The key difference with forms  is they are also used to capture information from the user. Below show outlines the basic form elements.

 
Of the elements listed in above, the input element is the most versatile. In fact, the type attribute has more than 20 possible values. The most common types of input elements are checkboxes, submit buttons, text boxes, radio buttons, password fields, and file uploads.

All form elements should use the name attribute to clearly identify each user input. That way, we can reference the data later by first identifying the form name, then the input name. Notice in above, when multiple input fields are necessary to gain a single input – as occurs with check boxes and radio buttons – each input in the series must carry the same name. In order to differentiate between the two inputs (named gender, for example), we add the value attribute.

Gender:
<input type=”radio” name=”gender” value=”Male” /> Male
<input type=”radio” name=”gender” value=”Female” /> Female

Below shows how the average browser displays the sample code from above. As mentioned previously, at this point we are merely structuring the content. We added line breaks in between each of the input controls shown in below for optimal readability in the screen capture.