ADDING FORMS - HTML5 - page 297

When you i rst run it, you see that the HTML5 has already been selected. h at's because the
checked attribute is added to the tag. It's a Boolean, but you don't have to assign it a true or
false . At er the page loads, see what happens when you click it.

What you see in the output window is that all the values that were assigned to the selected
radio buttons and check boxes. In more practical implementations, that same data would be
passed to and stored in a database.

DATE PICKER
h e last input attribute we have space to cover in this chapter is simple to implement but has
impressive results. h e new date attribute for the input element is powerful and easy to
include in a form. Several new date and time attributes have been added to the input element,
but only the date attribute itself is shown. h e following program ( Pickers.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ) shows you how to set it up and
use it to send information.

<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
FormMaster=new Object();
FormMaster.resolveForm=function()
{
alert(document.calendar.dateNow.value);
}
</ script >
< meta http-equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Date </ title >
</ head >
< body >
< form name =calendar>
< input name =dateNow type = ”date” onChange = ”FormMaster.resolveForm()” >
</ form >
</ body >
</ html >

301

With just that little markup in the form container, you're able to build a complete calendar.
You can use the onChange event handler to capture the date selected from the calendar.
Figure 14-6 shows the application in an Opera browser (the only one found to work so far
with this new input attribute) in a Windows 7 environment.

In this particular implementation, as soon as the user makes a selection, the alert window
opens and shows the selected date, as shown in Figure 14-7.

h e purpose is to show how easy it is to pass the selected date value. Such data could be stored
in a database to make online reservations.