HTML Forms and jQuery

Many websites provides mechanisms for the user to input information that is then submitted to the server. For example consider buying something on a website, the web page where the user inputs their credit card details and address contains a form. A HTML form is used to collect information from the user that can then be used either by JavaScript or can be submitted to the server for processing. In this module processing on the server will not be considered, instead there is a level 2 discovery module that considers that. Here we will look at how to create forms and what types of inputs are available.

Form element

The form HTML element is the container for all components that allow the user to submit data. The form element must always have the action attribute set. The action attribute tells the browser which web resource the data should be submitted. The method attribute tells the browser how the data should be submitted to the server. The value of the method attribute is either get or post. When the attribute is set to get the data entered into the form is submitted to the server by encoding it into the URL. When the attribute is set to post the data entered into the form is submitted to the server in the HTTP header.

Input element

The input element forms the basis for most of the components that are placed inside a form, such as textboxes, password fields and checkboxes. Note that the input element is one of the HTML elements that is self closing. To specify which type of component is displayed in the form the type attribute is changes. The possible values for the attribute are:

  • text: Text field; text without line breaks. (default)
  • password: Text field with obscured input.
  • checkbox: Check box/tick box.
  • radio: Radio button; allows one control to be selected in a group of these sharing the same name attribute value.
  • submit: Submit button; submits the form.
  • reset: Reset button; resets the controls in a form to their initial default values.
  • hidden: A hidden control that can not be accessed directly by the user.
  • image: An image that, when clicked or otherwise selected, will submit the form.
  • file: File upload allows a local file to be selected for submission.
  • button: Button with no default behaviour.
  • search: Text field for search strings.
  • tel: Text field for telephone numbers.
  • url: Text field for absolute URLs.
  • email: Text field for email addresses.
  • date: Date selection control.
  • time: Time selection control.
  • number: Text field or spinner for numerical values.
  • range: Slider, or similar, for selecting a numerical value from a potentially imprecise range.
  • color: Color well, with an 8-bit sRGB value.

The name attribute is used when the data is submitted to the server. The value of this attribute is used by the server to know which piece of data is associated with which field.

Text fields

Text fields are used to allow the user to input short pieces of text such as usernames or address.

Passwords

Password fields are used to allow the user to input a password, when the user types text into this type of input the characters will not be visible instead the text is obscured.

Radio field

The radio field type allows the user to pick one of a number of options. When a radio field is select it can not be deselected, instead the user must select a different radio fields in the group. The group of possible options is determined by the name attribute. In the example below there are two groups of radio fields, it is possible to select one option from each of the groups.

Checkboxes

The checkboxfield type allow the user to select one of more of a number of options.

Submit

The submit field type is used to send the form data to the server. The data will be submitted to the URL specified by the action attribute of the containing form element.

File

The file field type is used to upload files to the server.

Textarea

The textarea field type allows the user to input long passages of text.

Select

The select field type allows for the user to select an option from a drop down list. The select element is the container for a set of option elements. The value of the value attribute is the value that is sent to the server when the form is submitted.

Fieldsets

Fieldsets are a way of grouping together fields that are related. The fieldset element allows the developer to group fields together that are related. The legend element nested inside a fieldset element allows the developer to specify title of the group of fields.

Labels

In all of the examples above the element label has been used. This is a convenient way to associate a piece of text with a field. The text in the label should indicate the purpose of the field. For details about the label element consult the HTML reference section.

Extended example

Now that the most important form fields have been introduced let us put it all together into a contact form for a website.