326 CHAPTER 7 Working with forms
FIGURE 7-5 he empty required fields with red borders and the required message displayedTOne of the reasons HTML5 has new input types for email, URL, date, and so on, is that vali-
dation can be automatically applied based on the type. In the previous example, the <input
type=”email”> element automatically provides extra validation in an attempt to ensure that
a valid email address is entered. The extra validation is different based on the browser. You’ll
typically find that browsers only look for *@* to be valid, but that might change.
You can also provide a placeholder attribute on most form submission elements, which
provides a prompt in the field until the user enters the first character. In the past, this required
a lot of extra code. The following adds the placeholder to the previous form example.
<form id="myForm">
Favorite Car:
<select name="favoriteCar" required="required">
<option>Ford Fiesta</option>
<option value="Chevy">Chevrolet</option>
<option>BMW</option>
</select><br />
Comment:
<input type="text" name="comment"
required="required" placeholder="enter a comment"/><br />
Email:
<input type="email" name="email"
required="required" placeholder="give me your email"/><br />
<button type="submit" name="submit">Submit</button>
</form>When the form is displayed, the comment and email address display the placeholder text if
they are empty. The result is shown in Figure 7-6.