ptg16476052328 LESSON 12: Designing Forms
While the datalist tag has reasonable support in most browsers (except Safari and iOS
at the time of writing), there is a way to use a select list inside your data list to get the
best of both worlds:
<label>
Your Move:
<input id="move" list="game">
</label>
<datalist id="game">
<label>or select from a list:
<select name="gameoption">
<option value="">
<option>rock
<option>paper
<option>scissors
<option>unicorn
<option>sledgehammer
</select>
</label>Browsers that support the datalist element will show the drop-down menu in the field.
Browsers that don’t will show the drop-down menu as a separate form control. You will
learn more about creating drop-down menus later in this lesson.Using the New HTML5 Controls
HTML5 adds more than just the datalist element to form controls. There are also sev-
eral new form types you can use to both validate the data you collect and make it easier
for your customers to fill out the forms correctly.
There are two types for which browsers will validate the contents automatically for you:
email and url. This will help keep your data cleaner, but it also makes the forms easier
for your customers to fill out. When a customer on an Android or iOS device (and other
compatible mobile devices) gets to an email or url form control, the keyboard will
change to make it easier to fill in an email address or a web page URL. For instance, with
the email type, the @ sign will be visible on the keyboard without having to go into a
second layer. To set up these controls, change the type to email or url:
<label>Email:
<input type="email" id="address">
</label>
<label>URL:
<input type="url" id="website">
</label>