ADDING FORMS - HTML5 - page 292

</ form >
</section>
</article>
</ body >
</ html >

In looking at the script, you may be wondering what the label attribute is doing in the
<option> tag in the <datalist> container. h ere's no label attribute in either the form
or input element (see Table 14.1 and Table 14.2). h at's because the label attribute is not
in the form or input elements, but in the <option> tag. Although that may seem obvious,
when you open the page, you see not only the URLs but also the label in the URL input
window. What's happening is that the <input type=url> tag holds a reference to the data
list's options through the list attribute in the input element's markup.

At the time of testing, the data list shows up in Opera using either Windows 7 or Mac OS X.

In the top-let panel, you can see the selections available in the data list (along with a label for
each). Once the user makes a selection, it appears in the input window as shown in the
top-right panel. Finally, in the bottom panel, you can see that it's passed to the JavaScript
function that displays it in an alert window. (Note that the Opera alert window also displays
the domain.)

h e important point about this process is that users don't have to type in URLs. Everyone who
has ever typed in a URL has made a typo at some point. By using the data list to help out, not
only is the suggested URL more likely to be selected, but it's easier for the user.

296

Datalist elements on mobile devices and URL keyboards
Tests of the application on the Mini Opera browser on an iPhone revealed that the data list
did not appear. Further testing with the mobile version of the Safari browser showed that it
did not work with Safari yet either.

However, during these tests, a unique keyboard for the new url and email type of input
elements was revealed. h e mobile Safari browser recognizes an input form typed as url and
email and when used it displays a keyboard that includes both a dot ( . ) and dot-com
( .com ) key, plus some other keys commonly used with URLs and e-mail addresses. Figure
14-4 shows the Safari mobile (let ) and Mini Opera (right) browsers side-by-side displaying
the data list program on the same iPhone. If you look carefully, you can see the dif erence.

h e importance of a mobile browser recognizing that the input expects a URL or e-mail
address is that it considers the user. With the special keyboard, users don't have to switch
between the numeric/symbol keyboard and the alphabetic one as much.