Creating Forms
An HTML form consists of at least 1 of the form controls listed in the previous section.
The form can appear anywhere within the body of a Web page. In fact, the entire page can
be a form.
The <form>
Tag
The form controls must be surrounded by a <form>
tag, the general format
for which is shown below.
Figure 10-3. General format for <form>
tag.
All controls that are part of a form must be enclosed inside a <form>
tag. The tag can appear anywhere on the page as long as it encloses all its controls.
If the entire page consists only of form controls, you can code the opening tag immediately
following the <body>
tag and the closing tag immediately preceding
the </body>
tag to encompass the entire page as a form. Then, form
controls can appear anywhere on the page and be part of the form.
The id Attribute
The id attribute assigns unique identification to the form. This id
is used by Javascript or other client-side scripts to reference the form. The id can also
be used to apply styles to the form. You can use any identification of your choosing
for a form; the id value must be unique and should not include embedded blank spaces
or special characters.
The action Attribute
User information entered into a form is made available to a server page containing
a script to processes that information. The script may appear on the same page as
the form or the information may be sent to a different page.
The action attribute identifies the server page to which form information is submitted.
If the processing page is the same page as the form page, or if the processing page is
in the same directory as the form page, then the URL is simply the name of the page.
If the page is at a remote location, a complete URL is coded. The action attribute
must appear in all <form>
tags.
The method Attribute
The method attribute specifies the manner in which form information
is transmitted to the page identified in the action attribute. The two possible values
are get and post, the former being the default. When the get method is used, information
from the form is appended to the action URL. The get method is best suited for sending
small amounts of data; when the post method is used, the information is transmitted to
the action page as a separate data stream. Thepost method offers better security since
the submitted data is not visible in the browser's address bar.
The autocomplete Attribute
The autocomplete attribute is used to dynamically fill form fields.
Autocomplete can be disabled by setting value to off. This attribute is new to HTML 5.
All that is required at present is to code the basic <form>
tag to
enclose its controls. The minimal setup for a page containing a form is shown below,
delaying for the moment considerations about form submission for processing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Page</title>
<meta charset="utf-8">
</head>
<body>
<form action="
url
>
...form controls
</form>
</body>
</html>
Listing 11-1. General page layout for a form.