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:
<form>
<label for=”fullName”>Name: </label>
<input type=”text” name=”fullName” id=”fullName” />
<input type=”button” value=”Submit” />
</form>
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” />
</form>
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:
