Tutorial: Building forms
Level: Intermediate. Published on 28 November 2001 in HTML
Learn how to construct Web forms using the FORM tag. Covers all the types of form fields and buttons, and shows you how forms are built and processed.
This tutorial will show you how to create forms in your Web pages using HTML. 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, we'll start off by looking at the form element, the basic building block of Web forms. Then we'll look at 8 different types of fields that you can place in your form, including text fields, checkboxes, radio buttons, list boxes, text areas, hidden fields, password fields and file upload fields.
After that, we'll show you how to use the submit, image and reset buttons, and how to create generic form buttons. Buttons are needed to "activate" your form, for example, to enable the user to send the form after they've filled it in.
Finally, we'll briefly look at ways to process the results of your forms after they've been submitted.
The form element
All 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
GETmethod, 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
Now that we've covered the basic form tag, it's time to put some fields in our form!
Form fields include things like text boxes, checkboxes, radio buttons, and drop-down lists. 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.
We'll look at each of the available form field types in turn, and show examples of each field.
Text fields
Possibly the most widely used form field is the text entry field. This is a simple box into which the user can enter small amounts of text data, such as their name or email address. It takes the format:
<input type="text" name="xxxx"
value="xxxx" size="xxxx" maxlength="xxxx">
The name attribute is the name of the field (for example, "email_address" or "age"). The value attribute allows you to provide a default value that will appear in the box (the user can change the value if they want). This is optional - to leave the field blank, use value="" or miss out the value attribute altogether.
The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser's default field size will be used.
Finally, the maxlength attribute allows you to limit the amount of characters the user can enter. If you leave this value out, then the user can enter as much as they like.
Example:
Email Address: <input type="text" name="email_address"
value="" size="30" maxlength="50">
Checkboxes
Checkboxes are simple fields that can be toggled on or off with a mouse click. A checkbox can have only one value - for example, "yes" or "true".
These fields are great for allowing the user to specify a single item of data - for example, whether they want to receive your newsletter or not, or to indicate that they have read your terms and conditions.
The checkbox field takes the format:
<input type="checkbox" name="xxxx" value="xxxx" checked="checked">
The name attribute is the name of the field (for example, "newsletter"). You can specify multiple checkboxes all with the same name, in which case they will belong to the same group. When the form is submitted, the values of all the checkboxes will be sent using the same field name.
The value attribute specifies the value that will be submitted if the user checks the box. If the user clears the box (so that it has no check mark in), then a null (empty) value will be submitted.
The checked attribute, if present, will display the checkbox already selected. If checked is not present in the tag, the checkbox will be displayed empty.
Example:
Would you like to be added to our mailing list?
<input type="checkbox" name="mailing_list"
value="yes" checked="checked"> Yes
Radio Buttons
Radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any one time. (As with checkboxes, a radio button group is a collection of radio buttons with the same name attribute.)
Radio buttons are useful for getting a user to pick from a choice of options. (If you have a lot of options, consider using a list box instead.) The radio button tag has the same attributes as the checkbox element:
<input type="radio" name="xxxx" value="xxxx" checked="checked">
The name attribute is the name of the field (for example, "favourite_colour"). You can specify multiple radio boxes all with the same name, in which case they will belong to the same group. Only one radio button in the group can be selected at any one time.
The value attribute specifies the value that will be submitted if the user selects this radio button.
The checked attribute, if present, will display the radio button already selected. If checked is not present in the tag, the radio button will be displayed empty.
Example:
What is your favourite colour?
<input type="radio" name="favourite_colour"
value="red" checked> Red
<input type="radio" name="favourite_colour"
value="orange"> Orange
<input type="radio" name="favourite_colour"
value="pink"> Pink
List Boxes
List boxes allow the user to select one or more items from a list of available options. A list box takes the format:
<select name="xxxx" size="xxxx" multiple>
<option value="xxxx" selected="selected">Option Text</option>
<option value="xxxx">Option Text</option>
...
</select>
The <select></select> tag defines the list box. The name attribute is the name of the list box (for example, "favourite_sport").
The size attribute specifies how many list items will be displayed at once. If this attribute is not present or is set to 1, then a drop-down box will be displayed.
The optional multiple attribute, if present, will allow the user to select more than one option in the list by holding down the Shift or Control keys.
Inside the <select></select> tags, one or more <option> elements are placed. Each <option> element represents an item in the list box. The value attribute is the value that will be submitted if the user selects this option. The optional selected attribute will pre-select this option when the form is first displayed.
In between each <option></option> element, you can place the text label that you would like to be displayed for that option. Note that the text label does not have to be the same as the option's value attribute. The text label is not submitted with the form; it's just to guide the user.
Example 1: Drop-Down List
What is your favourite sport?
<select name="favourite_sport" size="1">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
Example 2: 3-Line List
What is your favourite sport?
<select name="favourite_sport" size="3">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
Text Areas
If you need the user to input a large amount of text (more than a single line), use the textarea field. It takes the format:
<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">
(default text here)
</textarea>
The name attribute is the name of the field (for example, "comments"). The rows attribute specifies the height of the text area in characters, while the cols attribute specifies the width.
The wrap attribute controls how the text is wrapped when it reaches the right-hand edge of the textarea box. Possible values are:
- off
- The text will not wrap, and will be submitted exactly as it was entered by the user.
- soft
- The text as displayed in the textarea box will wrap, but it will be submitted exactly as it was entered by the user (i.e. with no wrapping).
- hard
- The text in the textarea box will wrap, and it will be submitted with line breaks inserted where the text wraps (i.e. exactly as it appears in the box).
Inside the <textarea></textarea> element, you can place some text that will be displayed in the text area when the form loads. The user can then change or delete this text as appropriate.
Example:
Please enter your comments below:<br>
<textarea name="comments" rows="5" cols="50" wrap="soft">
I love this site!
</textarea>
Hidden Fields
Hidden fields are form fields that are not actually displayed to the user. The main purpose of hidden fields is to pass information to the server script that the user does not need to view or change. For example, if you were building a shopping cart, you might use a hidden field to track the cart ID.
The format of a hidden form field is very simple:
<input type="hidden" name="xxxx" value="xxxx">
The field name with value value will be passed to the server like any other field when the form is submitted, but the field will not be visible to the user (unless they view source, of course!).
Example:
<input type="hidden" name="cart_id" value="1234">
Password Fields
If you need your user to enter sensitive information such as a password, you can use the password field type. This will allow the user to enter text just like a regular text field, but the characters will be displayed as asterisks to prevent the text from being viewed on the screen.
The password field takes the format:
<input type="password" name="xxxx" size="xxxx">
The name attribute is the name of the field (for example, "password"). The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser's default field size will be used.
(You can also supply a default value using the value attribute, if you wish, although this is rarely needed, for obvious reasons!)
Example:
Password: <input type="password" name="password" size="20">
File Uploads
Nearly all modern browsers allow files from the user's hard drive to be uploaded via an HTML form to the server. For this to work, the (CGI, ASP, PHP, etc) script on the server needs to be written to handle the file data. Explaining these scripts is outside the scope of this tutorial. We'll just look at how to create the file upload form field.
The file upload field consists of a filename box, much like a regular text box, and a Browse... button, that the user can use to browse to the file to upload on their hard drive. The file upload field takes the format:
<input type="file" name="xxxx" size="xxxx"
maxlength="xxxx" accept="xxxx">
The name attribute is the name of the upload field (for example, "photo"). The size attribute specifies the physical size (width) of the filename field, in characters. You can miss out this value in which case the browser's default field size will be used.
The maxlength attribute allows you to specify the maximum length of the filename field, in characters. If you leave this value out, then the filename can be any length.
Finally, the accept attribute allows you to specify exactly what types of files may be uploaded. To specify the file types, use MIME types (e.g. "application/octet-stream", "image/gif") separated by commas. Note that this only works on some browsers (other browsers will just allow the user to upload any type of file regardless of this attribute!).
Example:
Photo to upload:
<input type="file" name="photo" accept="image/*">
Form buttons
As well as the different field types described above, a form can contain a number of different types of buttons. These buttons allow the user to submit the filled-in form to the server for processing. Your form will generally contain at least one submit button so that the form can be sent.
The submit button
Buttons of the submit button type usually send the form data to the script that was specified in the action attribute of the form tag (as described above). It takes the format:
<input type="submit" name="xxxx" value="xxxx">
The optional name attribute is the name of the button (for example, "sendform"). The value attribute specifies the value associated with this button. The value will also be the text label that appears on the button.
Note that the button behaves rather like a checkbox, in that the button's value itself is sent as a form field named after the button's name. So if your button was called sendform and had a value of "Send Now!", then the form field sendform having value "Send Now!" would be sent to the server, along with the rest of the submitted form data.
You can also include more than one submit button in the form, and use your server script to determine which of the buttons was pressed by looking at the fields that were submitted (only the value of the button that was pressed will be sent to the server).
Example 1: Simple submit button
<input type="submit" value="Send Now!">
Example 2: Two submit buttons
<input type="submit" name="send_button" value="Send">
<input type="submit" name="send_button" value="Send Now!">
(If the first button is pressed, then the field send_button with value "Send" will be sent to the server. If the second button is pressed, the field send_button with value "Send Now!" will be sent to the server.)
Images and Image Buttons
Forms can have submit buttons in the form of images, using the image type. An image behaves exactly like a regular submit button, with the additional feature that the X and Y coordinates of the point where the user clicked on the image are submitted as well. These coordinates are taken from the top left of the image.
The coordinates are returned as the values of two field names, name.x and name.y, where name is the image button's name. For example, if the user clicked on an image called fred, at a point 50 pixels across by 35 pixels down from the top-left corner, the fields name.x and name.y would be submitted, with values of 50 and 35 respectively.
The image button tag takes the format:
<input type="image" name="xxxx" src="xxxx" width="xxxx"
height="xxxx" border="xxxx" align="xxxx" hspace="xxxx"
vspace="xxxx" alt="xxxx">
The name attribute is the name of the field (for example, "checkout"). The src and alt attributes behave exactly like their counterparts in the img element.
Example:
<input type="image" name="checkout"
value="Proceed to Checkout"
src="images/checkout_button.gif" style="width: 170px; height=23px;"
alt="Proceed to Checkout">
The reset button
The reset button type is used to reset the contents of the form to their original values. This means that each form field will change back to the value it had when the form loaded - either null (empty), or the default value set with the value attribute.
The syntax for reset buttons is simply:
<input type="reset" name="xxxx" value="xxxx">
As with regular buttons, if you specify a text string value then that text string will appear as the label on the button.
Example:
<input type="reset" value="Reset the Form">
General buttons
It's also possible to create generic form buttons. These buttons won't do anything unless you write some code around them (for example, using onclick to call some JavaScript).
To create a generic button, use the syntax:
<input type="button" name="xxxx" value="xxxx">
The optional name attribute is the name of the button (for example, mybutton). The value attribute specifies the value associated with this button. The value will also be the text label that appears on the button.
Example:
<input type="button" name="mybutton" value="Click Me!">
Processing the Form Results
A 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 will be 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 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. You can find a tutorial on how to do this here.
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!