Web Development Tutorials




  
  

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.

<form
  id="formId (optional)"
  name="formName (optional)"
  action="url (required)"
  method="get (default)|post"
  autocomplete="on (default)|off"

>
  ...form controls
</form>

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.


TOP | NEXT: Textbox Controls