HTML and CSS Reference
In-Depth Information
As you learn later in this lesson, you can use <p> tags, tables, and other HTML
elements along with CSS to create a structure to position the form elements.
In the preceding code example, notice how the <label> tag wraps around the <input> tag, which
defines their connection. Many modern web designers use a variation on this technique to connect a
given label to a particular form control. This variation uses a for attribute in the <label> tag that
points to an id attribute in the form control, like this:
<label for=”fullName”>Name: </label>
<input type=”text” name=”fullName” id=”fullName” />
<input type=”button” value=”Submit” />
The for attribute technique has a several benefits over the <label> tag wrapping method. First, it
separates the two tags — <label> and <input> — which allows the tags to be positioned in sepa-
rate table cells, a common design approach. In addition, the independent tags make it easier to apply
CSS styles; with the for attribute technique, you could, for instance, add padding to a label tag
selector to keep the form controls uniformly distant. Perhaps most importantly, the for attribute
technique is far more accessible to assistive technology like screen readers.
One of the least understood aspects of website development is how the entries in a form are trans-
mitted to the website owner or other designated party. It is important to understand that some form
of server-side processing is necessary for form data to be delivered properly. Such processing usually
takes the form of a script that runs on the server natively (in a high-end computer language like Perl)
or on installed server applications such as PHP, .NET, or ColdFusion. The specific form processing
script to be used is identified with the action attribute in the <form> tag, like this:
<form action=”scripts/mailForm.php”>
The action attribute requires a path to a file; this web address can be a relative or absolute URL.
Another attribute, method , determines how the data is transmitted to the file noted in the action
attribute. The method attribute accepts one of two values: get and post . If your code specifies a
method of get , the data is passed via the URL. For example, the following code expands on the
prior example:
<form action=”scripts/mailForm.php” method=”get”>
<label for=”fullName”>Name: </label>
<input type=”text” name=”fullName” id=”fullName” />
<input type=”button” value=”Submit” />
When the user clicks the Submit button, the next web address displayed in the browser will be a
combination of the action value as well as information from the form, like this:
Search WWH ::

Custom Search