HTML5 Guidelines for Web Developers

(coco) #1
3.3 New Elements 51

var cnt = 0;
for(var i=0; i<ip.length; i++) {
if (ip[i].checked == true) {
cnt++;
}
}
pb.value = cnt;
}


The variable ip contains a NodeList with all input elements. Each of these ele-
ments is tested in the for loop for its condition. If it is activated (checked ==
true), the counter variable cnt increases by 1. To finish, the value of the progress
element is set to the value of the counter variable.


3.3.3 Lists of Options with “datalist”


One long-awaited new function for forms is a drop-down menu to which you can
add your own entries. Because the well-known select element is limited to the
values specified as option elements, web developers used to come up with vari-
ous JavaScript tricks to add expandable selection lists to text fields.


The HTML5 specification now has a very elegant solution to this problem. The
new datalist element was defined to function as a container for the already fa-
miliar option element. Now we can assign to each input element a datalist el-
ement that displays the selection options when needed. Browsers that do not
support the datalist element will only display the empty text field.


Listing 3.1 shows the use of the new element. The input element is defined by
the type text, and the attribute list refers to the id of the datalist element (in
this case, homepages). When the page is loaded, the autofocus attribute positions
the cursor automatically inside the text field (see section 3.2.1, Focusing with
“autofocus”) and ensures, at least with the Opera browser, that the selection list
appears (see Figure 3.7).


Figure 3.7 Opera, representing a “datalist” element

Free download pdf