14.9 Form Handling^559<div>
<label for="userAge">Age:</label>
<input type="text" name="userAge" id="userAge" />
</div>
<div>
<input type="submit" value="Send information" />
</div>
</form>
</body>
</html>
Save the file as formvalidation.html and view it in the browser. Figure 14.18 shows the
form in the browser.Figure 14.18
The
formvalidation.html
file displayed in the
browser
Feel free to click the submit button. You will notice that the inputs will be submitted.
At the moment we have not coded the validateForm()function, so the form simply
submits.
Accessing form inputs is a little tricky. The form is a property of the document object.
Each form element is a property of the formobject. A property of a form element can
be a value. So, accessing the contents of an input box could look something like the
following:
document.forms[0].inputbox_name.value
The form is identified by forms[0]to indicate which form will be used. An XHTML
document can contain multiple forms. Note that there is an “s” in forms[0]. The first
form is forms[0]. A form could have a name attribute, but Strict XHTML does not
allow form names to be used directly as a property. So we’ll err on the side of caution
and use the strict specification, forms[0]to indicate which form we need to use. To
access the value in the userAgeinput box, we will need to use
document.forms[0].userAge.value. This is a mouthful, for sure.
Also, notice that the values trueandfalseare not enclosed in quotes. This is impor-
tant because trueandfalseare not strings, they are JavaScript reserved words, or
keywords and represent special values. If you add quotes to them, they become strings
and this function will not work properly.