HTML Forms

This series of tutorials shows how to create HTML forms in your Web pages. Forms allow you to make your site interactive — your visitors can use the forms on your site for giving you feedback via email, navigating your site, posting messages and other content to your site, voting and polling, and almost anything else you can dream of!

In this tutorial, you start by looking at the HTML form element, the basic building block of Web forms. You then learn how to use disabled and read-only controls to enhance your forms. Finally, you’ll look briefly at ways to process the results of your forms after they’ve been submitted.

The remaining tutorials in the series look at 8 different types of form fields that you can place in an HTML form, including text fields, checkboxes, radio buttons, menus, text areas, hidden fields, password fields and file upload fields. You’ll also learn how to create submit, image and reset buttons, and how to create generic form buttons. Buttons are needed to “activate” your Web form — for example, to enable the user to send the form after they’ve filled it in.

The HTML form element

HTML forms are created using the form element:

<form method="xxxx" action="xxxx">

(form fields in here)

</form>

The method attribute controls how the information that the user enters in the form is sent to the server. The two options are:

GET

Sends the form data as part of the URL (e.g. "script.pl?name=Joe& email=joe@joe.com"). This is the default option. It’s useful and efficient for small amounts of data (e.g. a search engine query) and it’s easy for the user to refresh the results of the form by just pressing the browser’s refresh button. However it cannot be used for large amounts of data (more than a few hundred bytes).

POST

Sends the form data encoded in the HTTP data stream. This is recommended for most types of forms (e.g. feedback forms and form mailers). The user will not see the form data in the URL. Large amounts of data can be sent this way. Unlike the GET method, the user cannot easily refresh the form results page — they usually see a dialog asking if they want to resend the form data — but this is often a good thing!

The action attribute specifies where the form data submitted by the user will be sent. Usually this is the URL of a script on the server — for example, http://www.yoursite.com/cgi-bin/feedback.cgi or http://www.yoursite.com/poll.asp.

Form fields and buttons

Now that you understand the basic form tag, it’s time to put some fields and buttons in your form!

Form fields include things like text boxes, checkboxes, radio buttons, and menus. Each form field has a name and a value. The name is used by the server-side script or other program to identify the field, and the value is the data that is entered by the user.

Form buttons are used to send the form to the server after it’s filled in, amongst other things.

The following tutorials look at each of the available HTML form field and button types in turn, and show examples in each case:

• Text and textarea fields
• Checkboxes, radio buttons and select fields
• Hidden fields, password fields and file upload fields
• Form buttons

Disabled and read-only controls

You can prevent user interaction with your form fields and buttons to various degrees with the disabled and readonly attributes — for example:

<select name="myfield" disabled="disabled" /> ... </select>
<input type="text" name="myfield" value="Hi there!" readonly="readonly" />

Here’s a summary of the differences between these two attributes:

disabled

This totally locks the control and prevents the user from interacting with it in any way. The control cannot receive focus. The value of the field is also not sent when the form is submitted. disabled can be used on button, input, optgroup, option, select and textarea controls.

readonly

Only the value of the field is locked, so the user can’t change it. The user can still interact with the control – for example, if it’s a checkbox the user can still check/uncheck it (which makes readonly a bit pointless for checkboxes and radio buttons!). The control can also receive focus, and the value of the field is sent when the form is submitted. readonly can only be used on input and textarea controls.

Examples

Try clicking on each of these fields to see what happens (if anything!):

A disabled text field:

A disabled checkbox:

A disabled radio button:

A read-only text field:

A read-only checkbox:

A read-only radio button:

Processing the form results

An HTML form on its own is pretty useless — it needs some code to process the form results!

Once your visitor fills in the form and clicks the form’s submit button, the form data is sent to the target specified in the action attribute of the form tag. Usually this will be a server-side script (for example, a form mailer), maybe a CGI script written in Perl, or a PHP or ASP page.

You can find links to some great free form processing CGI scripts over at the CGI Resource Index. These include form mailers (to send the form results to you via email), guestbooks and poll scripts. Usually they come with instructions and a sample HTML form to get you going.

You can also use JavaScript to process the form on the browser without it being sent to the server (or before it is sent). Commonly this is used to check that the user has filled in the form correctly. Here’s a tutorial that shows how to validate a form with JavaScript.

Accessible HTML forms

There are many things you can do to make your HTML forms more accessible. For example, you can use fieldsets, field labels and access keys to make forms easier to use. To find out more, read the Creating accessible forms tutorial.

Other useful info

For more detail on HTML forms and form elements you might like to refer to the W3C HTML 4.01 specification for HTML forms. Finally, if you’d like to make your forms look great, check out my Styling forms with CSS tutorial.