Using the form Tag

Using the <form> Tag

To accept input from a user, you must wrap all of your input fields inside a <form> tag. The purpose of the <form> tag is to indicate where and how the user's input should be sent. First, let's look at how the <form> tag affects page layout. Forms are block-level elements. That means when you start a form, a new line is inserted (unless you apply the display: inline CSS property to the form tag).

Note

Form controls must appear inside another block level element inside the <form> element in order to be considered valid. A <div>, <p>, or <table> will all do the trick, as will other block level elements.

Take a look at the following code fragment:

Input

<p>Please enter your username <form><input /> and password <input /></form> to log in.</p>

You might think that your entire form would appear on a single line based on the preceding markup. As shown in Figure 10.3, the opening and closing <form> tags act like opening and closing paragraph tags.

Output

Figure 10.3. A line break inserted by an opening <form> tag.

The two most commonly used attributes of the <form> tag are action and method. Both of these attributes are optional. The following example shows how the <form> tag is typically used:

<form action="someaction" method="get or post"> content, form controls, and other HTML elements </form>

action specifies the URL to which the form is submitted. Again, remember that for the form to be submitted successfully, the script must be in the exact location you specify and must work properly.

If you leave out the action attribute, the form is submitted to the current URL. In other words, if the form appears on the page http://www.example.com/form.html and you leave off the action attribute, the form will be submitted to that URL by default. This probably doesn't seem very useful, but it is if your form is generated by a program instead of residing in an HTML file. In that case, the form is submitted back to that program for processing. One advantage of doing so is that if you move the program on the server, you don't have to edit the HTML to point the form at the new location.

Although most forms send their data to scripts, you also can make the action link to another web page or a mailto link. The latter is formed as follows:

<form action="mailto:[e-mail]" method="post">

This attaches the form data set to an email, which then is sent to the email address listed in the action attribute.

Tip

To test your forms, I recommend using the get method and leaving out the action attribute of the form tag. When you submit the form, the values you entered will appear in the URL for the page so that you can inspect them and make sure that the results are what you expected.

The method attribute supports two values: get or post. The method indicates how the form data should be packaged in the request that's sent back to the server. The get method appends the form data to the URL in the request. The form data is separated from the URL in the request by a question mark and is referred to as the query string. If I have a text input field named searchstring and enter Orangutans in the field, the resulting would look like the following:

http://www.example.com/cgi-bin/search?searchstring=Orangutans

The method attribute is not required; if you leave it out, the get method will be used. The other method is post. Rather than appending the form data to the URL and sending the combined URL-data string to the server, post sends the form data to the location specified by the action attribute in the body of the request.

DO	DON'T
DO use the POST method when data on the server will be changed in any way.	DON'T use the GET method if the form is used to delete information.
DO use the GET method if the form just requests data. (Like search forms, for example.)	DON'T use the GET method if you do not want the form parameters to be visible in a URL.
DO use the GET method if you want to bookmark the results of the form submission.

The general rule when it comes to choosing between post and get is that if the form will change any data on the server, you should use post. If the form is used to retrieve information, using get is fine. For example, let's say that you're writing a message board program. The registration form for new users and the form used to publish messages should use the post method. If you have a form that enables the user to show all the posts entered on a certain date, it could use the get method.

That about does it for the <form> tag, but you've really only just begun. The <form> tag alone is just a container for the input fields that are used to gather data from users. It simply indicates where the data should go and how it should be packaged. To actually gather information, you're going to need items called form controls.

One other less frequently used attribute of the <form> tag is enctype. It defines how form data is encoded when it's sent to the server. The default is application/x-www-form-urlencoded. The only time you ever need to use enctype is when your form includes a file upload field (which I'll discuss a bit later). In that case, you need to specify that the enctype is multipart/form-data. Otherwise, it's fine to leave it out.