66 Chapter 3—Intelligent Forms
HTML logic would suggest, first fill in the left and then the right column. We can
achieve this with the tabindex attribute, which means that pressing the Tab key
in a field will move the cursor to the field with the next higher tabindex value:<div style="float:left">
<p><label>Your name
<input tabindex=1 type=text required autofocus
placeholder="John Smith" name=name></label>
<p><label>Your e-mail address
<input tabindex=3 type=email name=email required></label>
</div>
<div style="float:left;margin-left:10px;">
<p><label>Telephone number
<input tabindex=2 type=tel name=tel required></label>
<p><label>Fax number
<input tabindex=4 type=tel name=fax></label>
</div>Now the code gets more exciting with the textarea fields. HTML5 does not make
many changes to this type. But as you can see in Figure 3.16, each text field now
has a small graphic display above it, showing how many characters you can still
type into this field. You probably realized it right away: It’s done with the new
meter element, which you already know from section 3.3.1, Displaying Measure-
ments with “meter”:<p><label>Error message
<textarea placeholder="Lens error. Camera restart."
name=errmsg required rows=5 cols=50
title="up to 200 characters">
</textarea></label><meter value=0 max=200
tabindex=-1></meter>The meter element is initialized with a maximum value of 200 , exactly the value
specified as maximum in the title attribute of the textarea. If a user enters
more characters than the maximum allowed, the meter element turns red, indi-
cating that the text entered is too long. The browser will still submit all the text,
because we have not limited the textarea. So this is more a hint rather than a
strict requirement. The JavaScript function for updating the meter elements is
updateTAMeters() and is executed for all textareas:function updateTAMeters() {
var textfs = document.getElementsByTagName(“textarea”);
for(var i=0; i<textfs.length; i++) {
textfs[i].labels[0].nextSibling.value =
textfs[i].textLength;
}
}