Lesson 1: Understanding forms CHAPTER 7 319
Another interesting benefit from using the label is that you can assign style rules to the
<label> element. The following is a typical style rule for the <label> element.
label {
clear: both;
display: block;
float: left;
width: 125px;
}This style displays the <label> element as a block instead of inline and clears previous
blocks. The style is set to float left and be 125 pixels wide. If you have several inputs, you can
line up the inputs vertically by using the <label> element and setting its width.Specifying the parent forms
Previous releases of HTML required the form submission element to be in a form to submit
its data. This could become a problem when form submission elements are scattered over a
webpage and more than one form is on the page. With HTML5, the form submission ele-
ments have a form attribute that can be set to the id of one or more <form> elements, and
the form submission elements no longer need to be inside a <form> element. The flexibility
of a form submission element belonging to more than one <form> element is especially use-
ful. Firefox, Opera, Chrome, and Safari implement the form attribute, but as of this writing,
Internet Explorer 10 does not.Triggering the form submission
Triggering the form submission causes the browser to gather its associated form submission
element data and send it to the URI specified in the action attribute of the form, using the
form’s specified HTTP method. To trigger the submission of a form, you can use any of the
following elements.
<button type='submit' name='submitButton' >Submit</button>
<input type='submit' name='submitButton' value='Submit' />
<input type='image' src='/images/submit.gif' alt='Submit' />In addition, you can use JavaScript to submit a form by executing jQuery’s submit method
on the form element. Consider the following HTML document that contains a <form> ele-
ment whose id is myForm.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/default.js"></script>
</head>
<body>
<form id="myForm">
Favorite Car: