SJHwebdesigns

Forms

« Previous: Tables | Next: Characters and entities »

Forms are used in many different ways on the web, from simple search forms such as google to the more complex and detailed forms used to make online purchases or register for user accounts. Forms have various types of input that allows the user to submit data in different ways. Forms can also perform different actions when they are processed, such as performing a search, updating a database or sending an email.

You can create forms using the following tags:

<form>

The <form> tag is used to create a form. All fields within an individual form must be enclosed in a single pair of <form> tags.

The action attribute is the only required attribute of the <form> tag, and specifies where to send the submitted data: this will usually be a page containing a script designed to process that data. You can leave this attribute empty, in which case the page will refresh when the form is submitted (the form-processing script is often in the same page as the form itself). However, it must be included.

The method attribute determines how the information is sent, and has two possible values: if set to get, then the information is passed through the url, which you can see in the address bar; if set to post, then the data is hidden. Post is more secure, as it hides data which could be sensitive, however get allows a form submission to be bookmarked, which could be useful on a search form, for example. This attribute is optional; if left out, it defaults to get. To see both types of form in action, have a look at these get and post examples.

So to create a very basic form, we have:

<form action=""></form>

As it is, this form isn’t much use to anyone, as there are is as yet no way for the user to enter data! We can amend this grievous oversight by the addition of form fields, of which we have a few to choose from.

<input />

The <input> tag defines a form input. Several different types of input can be created with this tag; the input type is set using the type attribute. While this is not a required attribute, you should always include it to ensure that the input type is specified. You should also include a name attribute in all input tags: this attribute identifies each particular input, and is used by the script that processes the form

Text fields

A text field is a form field in which the user can enter a single line of text. You can create a text field by setting the type attribute to "text".

Code Output
<form action="">
   Name:<br />
   <input type="text" name="textfield" size="30" maxlength="60" value="type your name" />
</form>
Name:

Note that <input> is a single tag, like <br /> and <img />.

So what are all those other attributes? Well, size sets the width of the field, in characters, and maxlength sets the maximum number of characters that the user can enter. value can be used to set an initial value for the field, which can sometimes help to make the form more user-friendly. The size and maxlength attributes can only be used for text fields.

Password fields

Similar to a text field, but displays **** instead of the user-entered data. Be aware that this doesn’t guarantee that the data will be secure - if the form uses the get method, then the password will be displayed in the url!

Code Output
<form action="">
   Password:<br />
   <input type="password" name="supersecret" size="30" maxlength="60" />
</form>
Password:

Checkboxes

Checkboxes can be used to give the site visitor multiple options to choose from; they also allow for more (or less) than one option to be chosen.

Code Output
<form action="">
   Do you like any of these animals?<br />
   <input type="checkbox" name="favourite_animals[]" value="elephants" />
Elephants<br />
   <input type="checkbox" name="favourite_animals[]" value="wildebeest" />Wildebeest<br />
   <input type="checkbox" name="favourite_animals[]" value="yaks" checked="checked"/>Yaks
</form>
Do you like any of these animals?
Elephants
Wildebeest
Yaks

The value of the name attribute should be the same for every checkbox within the group. Note that the value can be different from what is displayed to the user: this will be the value that will be sent to the form-processing script. Note also the square brackets [] at the end of the name attribute: this is just to enable the processing script to return multiple values from that field.

You can also set a checkbox to be initially checked by including the checked attribute, and setting the value of this attribute to checked.

Radio buttons

These are similar to checkboxes, except that they only allow for one option to be chosen.

Code Output
<form action="">
   Do you like any of these animals?<br />
   <input type="radio" name="favourite_animal" value="elephants" />
Elephants<br />
   <input type="radio" name="favourite_animal" value="wildebeest" />Wildebeest<br />
   <input type="radio" name="favourite_animal" value="yaks" checked="checked"/>Yaks
</form>
Which is your favourite animal?
Elephants
Wildebeest
Yaks

Like checkboxes, you can use checked="checked" to set the button to be initially checked; however you can only do this for one option in the group.

Submit buttons

A form is only any use if there is a way for the user to submit the data! Setting the type attribute of the <input> tag to submit will set the input to a submit button; when the user clicks on this, the form will be submitted.

Code Output
<form action="">
   Name:<br />
   <input type="text" name="textfield" size="30" maxlength="60" value="type your name" />
   <input type="submit" name="form_submit" value="Submit" />
</form>
Name:

Reset buttons

A reset button resets the value of all form fields to their initial value. Reset buttons can be created by setting the type attribute of the <input> tag to reset.

Code Output
<form action="">
   Name:<br />
   <input type="text" name="textfield" value="type your name" /><br />
   Email:<br />
   <input type="text" name="textfield2" /><br />
   <input type="submit" name="form_submit" value="Submit" />
   <input type="reset" name="form_reset" value="Reset" />
</form>
Name:

Email:

<select>

The <select> tag is used to create a dropdown menu from which the user can pick one of multiple options. Each option is defined using an <option> tag:

Code Output
<form action="">Favourite animal, again:
   <select name="fave_animal_select">
      <option value="elephants">Elephants</option>
      <option value="wildebeest">Wildebeest</option>
      <option value="yaks" selected="selected">Yaks</option>
      <option value="aardvarks">Aardvarks</option>
      <option value="llamas">Llamas</option>
      <option value="slugs">Slugs</option>
   </select>
</form>
Favourite animal, again:

Here we can also set the initially selected option, this time using selected="selected" within one of the <option> tags.

<textarea>

Textareas allow the user to enter multiple lines of text. It has two required attributes: rows - the height of the textarea, in characters, and cols - the width, in characters.

Code Output
<form action="">
   Explain why you like these animals:<br />
   <textarea name="comments" rows="5" cols="30">Tell us what you think!
   </textarea>
</form>
Explain why you like these animals:

<fieldset>

Fieldsets can be used to group form fields; this can help to stucture the form and can make it much more user-friendly if there are many fields.

<legend>

The <legend> tag can be used to add a title to a fieldset. This tag should follow immediately after <fieldset>.

Code Output
<form action="">
   <fieldset>
      <legend>Your details:</legend>
      Name:<br />
      <input type="text" name="textfield" value="type your name" /><br />
      Email:<br />
      <input type="text" name="textfield2" />
   </fieldset>
   <fieldset>
      <legend>Favourite animals:</legend>
      Do you like any of these animals?<br />
      <input type="checkbox" name="favourite_animals" value="elephants" />
Elephants<br />
      <input type="checkbox" name="favourite_animals" value="wildebeeste" />
Wildebeest<br />
      <input type="checkbox" name="favourite_animals" value="yaks" checked="checked"/>Yaks<br />
      Explain why you like these animals:<br />
      <textarea name="comments" rows="5" cols="30">Tell us what you think!
      </textarea>
   </fieldset>

   <input type="submit" name="form_submit" value="Submit" />
   <input type="reset" name="form_reset" value="Reset" />

</form>
Your details: Name:

Email:
Favourite animals: Do you like any of these animals?
Elephants
Wildebeest
Yaks
Explain why you like these animals:

<label>

The <label> tag defines text that belongs to a particular input, and distinguishes it from any other text that the form might contain. Adding labels makes forms more accessible, particularly to people using screen readers. For checkboxes and radio buttons, it also has the benefit that the user can select an option by clicking on the label, so your form doesn’t have to become a test of coordination.

A label is associated with an input by adding an id attribute to the input tag, and adding a for attribute to the label tag; and setting the same value for both attributes. Note that each id must have a unique value - you’re not allowed to have more than one id containing the same value..

Code Output
<form action="">

<label for="textfield">Name:</label><br />
<input type="text" name="textfield" id="textfield" size="30" maxlength="60" value="type your name" /><br />

Which is your favourite animal?<br />
<input type="radio" name="favourite_animal" value="elephants" id="elephant" />
<label for="elephant">Elephants</label><br />

<input type="radio" name="favourite_animal" value="wildebeest" id="wildebeest" />
<label for="wildebeest">Wildebeest</label><br />

<input type="radio" name="favourite_animal" value="yaks" id="yak" checked="checked" />
<label for="yak">Yaks</label>
</form>


Which is your favourite animal?

Processing the form

To process the submitted data, you need a script written in a programming language such as PHP, which is beyond the scope of this course. You can use the supplied processform.php file to provide some simple form processing.

There are also some free utilities on the web which will automatically generate the necessary code, such as www.webformfactory.com.

The form processing will only work if it is uploaded to a web server that supports PHP, so you will need to upload it to your space on this site in order to see it in action.

« Previous: Tables | Next: Characters and entities »

Page style: Dark Light