Forms

example form

Example form

Whenever you've entered data, checked a box, or clicked on a button on a web page, you've used a form. The boxes and buttons are examples of controls (also called fields) used in the collection of data by the form.

There are a variety of ways to enter information using controls. Some allow you to make a selection, some allow you to enter text, and some allow you to submit or reset a form. Data from the form consists of (name, value) pairs collected from the controls. The controls used in the example include:

  • text entry for identification
  • checkboxes for foods
  • radio buttons for tree type (only one can be selected)
  • selection for colours (one choice) and animals (multiple choices)
  • a button that currently does nothing
  • a button to reset values
  • a button to submit the form

Creating a form

The form element (tag name form) is used to create a form, within which the fieldset element (tag name fieldset) can be used to group information. Each fieldset element has a title, using the legend element (tag name legend). The label element (tag name label) can be used to provide the caption for a control. The value of the for attribute (for) of a label element matches the value of the ID for the control it labels, as in the example below:

<form>
  <fieldset>
    <legend>Identification</legend>
    <label for="name">Name</label>
    <input type="text" id="name"><br>
    <label for="studno">Student number</label>
    <input type="text" id="studno"><br>
  </fieldset>
</form>

Our other forms will look pretty much the same, though the type of control used will differ.

Using a form

Although it will be possible to select and reset values using the forms designed here, to be able to do anything interesting with the information requires learning a programming language.

Optional enhancement

After completing this course, consider learning JavaScript.