HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 6

HTML Forms

The HTML tags examined up until this point have all been used to display content to the user. This lesson examines HTML forms, which allow the user to submit data back to the web server. Any time you enter data into text fields, or select values from drop-down lists, you are using HTML forms.

This lesson will provide an introduction to HTML forms, but will also look at some of the interesting changes that have occurred to forms in HTML5. These changes were originally called Web Forms 2.0, but have since been integrated into the HTML5 standard. Therefore, even if you are familiar with HTML forms, this lesson is recommended.

What Is a Form?

A form is a set of input fields, grouped together inside a single element, with the purpose of obtaining a set of information from the user. Forms have historically consisted primarily of the following fields:

• Text fields
• Select lists
• Text boxes (multiline text fields)
• Checkboxes
• Radio buttons
• Password fields

As you will see shortly, this list has been greatly enhanced with HTML5.

In addition, fields contain a Submit button that causes their contents to be posted to a ­specified URL on the server. The server can then process this data as required and return a new web page as a result.

In this book, you will make extensive use of forms but will not post their contents to a server. You will instead extract and process their data using JavaScript. In this chapter, I will present a more conventional view of forms but will ...