Forms

HTML forms are one key way that data can be sent from a user (inputting data into a web browser) to a server.

Below is a simple comprising an input element with the type set to 'text', and another input element with the type set to "submit" this causes the form to be submitted.

Forms are configured to one of two 'methods' which determine how the data is transferred, either 'GET' or 'POST'.

This form uses the GET method - which takes the values from the inputs and puts them in the URL in something known as a query string. You can test this: fill in the form, click the Submit button and view the url in the address bar of the browser

The 'action' attribute on a form can be used to specify an alternate url to which the form is posted, see the example at the bottom of the page

The HTML to generate that form appears as follows:

<form method="get">
    <input type="text" name="somevalue" placeholder="Enter some text" />
    <input type="submit" value="Submit">
</form>

Labels and Inputs

Labels

In order to identify many types of input (such as text) we make use of labels. Labels are associated to input controls using the for attribute. the value for the 'for' attribute should be the id of the input control, e.g:

<label for="txtForename">Forename</label>
<input type="text" id="txtForename" name="Forename" />

Labels associated to inputs of type checkbox or radio can be clicked to toggle the control, and clicking the label for text based input elements will place the cursor in the input. Labels are important from an accessibility point of view - the provide information informing the user what data is expected in a form.

Inputs

Inputs have three common attributes, an id - to identify it, a name (which is used to identify the field when the form is submitted), and a type to determine what sort of data it can hold

Special considerations

Inputs with type of radio shoud have a value attribute specified. Only one radio from all with the same 'name' attribute can be selected. Only the selected radio's value will be submitted.
Inputs with the type of hidden should have a value specified. These are often used to perform some check that the form submission came from a specified form
Space for multiple lines of text is not an input, it is a textarea.
Drop-down lists and multiple selection panes are not inputs, they are select tags, with multiple option tags inside. To determine a select can have multiple options selected, use the multiple="multiple" attribute and value.
Some browsers will provide validation for certain types of input, e.g. email

Form actions

If an action is specified for a form, then it will send the values to a new url - this for example would allow a page to include a search box which would send the search parameters to another site. An example of a form that searches amazon.co.uk is show below, followed by the implementation of that form

<form method="get" action="https://www.amazon.co.uk/s/">
    <input name="field-keywords" type="text" placeholder="e.g. USB drive" />
    <button>Search Amazon</button>
</form>

Input types

There are a vast number of inputs that can be used on a form, you can see examples of these on the Form Examples page