HTML5 forms - HTML5 and CSS3 - page 65

HTML5 provides a new event— oninput —which is fired by any form
element when the value changes, as the value changes, and allows all
event-handling attributes to be specified on any element. You've
already seen this feature in action when we discussed the <output> ele-
ment. Let's compare the code that powered the <output> element earlier
(on the left) with a version that relies on attaching to the event handler
of each field (on the right):

<fieldset oninput="value =
one.valueAsNumber +
two.valueAsNumber">
<label for="one">Number: </label>
<input type="number" name="one">

<fieldset>
<label for="one">Number: </label>
<input type="number" name="one"
onchange="out.value =
one.valueAsNumber +
two.valueAsNumber">

<label for="two">Range: </label>
<input type="range" name="two"
min="0" max="10">

<label for="two">Range: </label>
<input type="range" name="two"
onchange="exoutput1.value =
one.valueAsNumber +
two.valueAsNumber">

<label for="out">Output: </label>
<output id="out" for="one two">
0
</output>
</fieldset>

<label for="out">Output: </label>
<output id="out"
for="one two">6</output>
</fieldset>

Having to handle changes on each <input> element individually can lead
to extra code, but there's a more important advantage: the onchange
event only fires after the user leaves the field by tabbing out of it or
clicking elsewhere on the page. The oninput event fires for any change.

Creating combo boxes with <datalist>
One type of form control that's common in desktop applications but
not available in HTML4 is the combo box , so named because it's a combi-
nation of a text box and a select list—the user can select from a list or
free-type a value that isn't on the list. When AJAX was becoming pop-
ular, one of the most common features of the early JavaScript libraries
was support for creating combo-box-like features.