Understanding Forms
Last update on: 05-08-2008Almost every time you want to collect information from a visitor to your site you need to use a form. You have probably used several different kinds of forms on different Web sites, from simple search boxes that allow you to enter keywords in order to find what you are looking for to complex forms that allow you to order groceries or book a holiday online.
Forms on the Web bear a strong resemblance to paper forms you have to fill out. On paper, there are areas to enter text, boxes to check (or cross), options to choose from, and so on. While on the Web, you can create a form by combining what are known as form controls, such as text boxes (to enter text into), checkboxes (to place a check in), select boxes and radio buttons (to choose from different options), and so on. In this chapter you learn how each of these different types of controls can be combined into a form.
In this section, you will learn:
- How to create a form using the <form> element
- The different types of form control you can use to make a form; such as text input boxes, radio buttons, select boxes, and submit buttons
- What happens to the data a user enters
- How to make your forms accessible
- How to structure the content of your forms
Introducing Forms:
Any form that you create will live inside an element called <form>. Between the opening <form> and closing </form> tags, you will find the form controls (the text input boxes, drop-down boxes, checkboxes, a submit button and so on). A <form> element can also contain other XHTML markup just like the rest of a page.Once the user has entered information into a form, the data is usually sent to a Web server. This usually happens when the user clicks what is known as a submit button (although the actual text on the button may say something different such as Search, Send, or Proceed).
Once the data that the user entered arrives at the server, a script or other program usually processes the data and sends a new Web page back to you. The returned page will usually respond to a request you have made or acknowledge an action you have taken.
Sample example:
The <form> element contains an attribute called action whose value is the URL of the page on the Web server that handles search requests. The method attribute meanwhile indicates which HTTP method will be used in getting the form data to the server.
Creating a Form with the <form> Element
As you have already seen, forms live inside an element called <form>. The <form> element can also contain other markup such as paragraphs, headings, and so on. A <form> element must not, however, contain another <form> element.
Providing you keep your <form> elements separate from each other (and no one <form> element contains another <form> element), your page may contain as many forms as you like. For example, you might have a login form, a search form, and a form to subscribe to a newsletter all on the same page. If you do have more than one form on a page, users will be able to send the data from only one form at a time to the server.
Every <form> element should carry at least two attributes; action and method.
A <form> element may also carry all of the universal attributes, the UI event attributes, and the following attributes; enctype accept accept-charset onsubmit onreset, but we will not discus these last attribute.
The action Attribute:
The action attribute indicates which page or program on the server will receive the information from this form when a user presses the submit button.
The method Attribute:
Form data can be sent to the server in two ways, each corresponding to an HTTP method:- The get method, which sends data as part of the URL
- The post method, which hides data in the HTTP headers