Working with Forms - HTML5 Foundations - page 102

The POST method has some security benefits. For example, you would not want to use the GET method for a log-in
form, as a user's log-in details would be visible in the URL (including his or her password!). Also, as the data is
passed in the URL there is nothing to stop a user from easily modifying this data by editing the URL in the address
bar. This can sometimes break your applications if they do not have the appropriate measures in place for dealing
with incorrect data. It is important to note, though, that using the POST method will not solve all of these problems
and is not enough to make your forms completely secure (but it helps).
Adding the Form Fields to the Bookings Page with <in-
put> and <label> Elements
The main form control element that you will use in your web forms is the <input> element. This element is a jack
of all trades kind of guy because it can be used for collecting all sorts of data from your users. You can specify what
sort of data you want to collect using the type attribute; in most browsers, this will also alter the way the element is
displayed. By default, all <input> elements have the type text . You will learn about the different input types that
you can use later in this chapter and in Chapter 6.
Form fields are useless unless the user knows what he should be inputting into each box. The <label> element en-
ables you to associate a text label with a form field. The following example shows an <input> element with an as-
sociated <label> element.
<label for=”firstName”>First Name:</label>
<input name=”firstName” type=”text” id=”firstName”>
Figure 5-3 shows how this example would be displayed in a browser.
Figure 5-3 A simple text input and label.
When you create an <input> element you should also create a <label> element and associate it with the input.
To do this you need to give the <input> element an ID and then specify a for attribute on the <label> element
with the value set to the ID of the input, as in the preceding example.
Creating labels for <input> elements is important for a number of reasons. Assistive technologies such as screen
readers will rely on these labels in order to understand your forms and help users to fill them out. Properly associat-
ing labels with inputs will also cause the label itself to become an extended click target for the input field. This
means that when the user clicks on the label, the associated <input> element will gain focus in the browser. This is
especially useful for items like checkboxes or radio buttons (more on these coming up) that are themselves, fairly
small targets for a user to click on.
To start, the bookings form will include seven fields: Name, Phone, Email, Restaurant, Booking Time, Guests, and
Marketing. Here you will be creating <input> and <label> elements for each of these.