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>
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 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
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>
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