HTML5 24-Hour Trainer

Chapter 19. Creating a Form

Forms turn the Web into a two-way medium. Without forms, website owners could never hear directly from their site visitors outside of other forms of communication. Forms are essential to surveys, polls, contact requests, and online shopping. In this lesson, you learn the basics of how forms are structured as well as the specifics for implementing the key form elements.

UNDERSTANDING FORMS

A form is basically made of four parts:

• The <form> tag

• Form controls, such as the <input> tag

• Labels, which identify the form elements

• A trigger, typically a button form element, that submits the form

A simple form, in code, would look like this:

<form>
  <label>Name:
    <input type="text" name="fullName"
/>
  </label>
  <input type="button" value="Submit" />
</form>

When displayed in the browser, the label, text form field, and button are presented all in a single line, as shown in Figure 19-1.

Figure 19-1. FIGURE 19-1

Note

As you learn later in this lesson, you can use <p> tags, tables, and other HTML elements along with CSS to create a structure to position the form elements.

In the preceding code example, notice how the <label> tag wraps around the <input> tag, which defines their connection. Many modern web designers use a variation on this technique to connect a given label to a particular form control. This variation uses a for attribute in the <label> tag that points to an id attribute ...