Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 175

<option value="AL" />
<option value="AK" />
<option value="AZ" />
<option value="AR" />
<option value="CA" />
<option value="CO" />
<option value="DE" />

…

Then back in the personal details fieldset, the text input for state is added. Also added
is the ZIP code input field:
…

<p><label>State: <input type="text" name="states"
list="statelist" placeholder="two-
letter abbreviation" /></label></p>
<p><label>Zip code: <input type="text" name="name"
placeholder="00000 or 00000-0000" /></label></p>

…

Next is the only required field in this set, the e-mail address field. The user is re-
minded by the placeholder text to enter a valid e-mail address, but automatic validation
of the form will pick up any inconsistencies as well:
…

<p><label>Email: <input type="email" name="name"
placeholder="[e-mail]"
required/></label></p>
…

Next the optional telephone and website input fields are added:

…

<p><label>Phone: <input type="tel" placehold-

er="000-000-0000" /></label></p>
<p><label>Website: <input type="url" placehold-

er="http://example.com" /></label></p>
…

Last in this fieldset, the optional age field is added as a number input field. The min
and max attributes are set to a realistic age range, with some padding on the upper end.
The closing fieldset tag ends this group: