HTML and CSS Reference
In-Depth Information
<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
form
object. 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
userAge
input box, we will need to use
document.forms[0].userAge.value
. This is a mouthful, for sure.
Also, notice that the values
true
and
false
are not enclosed in quotes. This is impor-
tant because
true
and
false
are 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.
Search WWH ::
Custom Search