Forms

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.