<label for="firstname">First Name</label>

<input type="text" id="firstname" name="first name"/>

In the above example we can see that we add a ‘for’ attribute, which will contain the ID of the input field it is associated with. You will notice we have also added an ID attribute to the input tag matching this label’s ‘for’ attribute. Inside the opening and closing tags we can specify our label, which will be visible in the browser. Inside the opening and closing tags, we can specify our label, which will be visible in the browser. This label text can be anything at all without any restrictions.

The inputs

As you already know, forms are made up of a number of different inputs ranging from text input fields, to passwords, sliders and dropdowns. It is important that a web developer understands the full extent of the input

Table 3.1    Input types

Input type	Definition	Example
Text	Defines a one-line text input field	<input type="text" id="firstname" name ="firstname">
Password	Defines a password field with the inputted text converted into asterisks	<input type="password" name="psw">
Submit	Defines a button which, when clicked, will submit the form data to the ‘form-handler’ (the value of action attribute)	<input type="submit" value="Submit">
Reset	Defines a button which, when clicked, will clear all the inputted data and revert them back to their original default values	<input type="reset">
Radio	Defines a set of radio buttons, which will restrict the user to only selecting one of the options presented	<input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other
Checkbox	Defines a set of checkboxes, which will allow the user to select multiple options, including selecting none at all	<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car
Button	Defines a button for use with JavaScript (more on this later)	<input type="button" onclick="alert(‘Hello World!’)" value="Click Me!">

options available to them. Below is a table outlining the various inputs along with a brief explanation and example mark-up.

Other input types

There are a small number of elements that break the mould of the standard input types and instead of utilizing the type attribute of the <input> element, they exist as stand-alone elements that operate in very much the same way as the <input> tag. They are as follows:

<textarea>

The <textarea> element is the only input type that breaks from the above standard of defining the input type in the type attribute. The <textarea> element is a stand-alone element and can be defined as follows: