The HTML <form> Elements
This chapter describes all the different HTML form elements.
The <form> element can hold one or more of these form elements: <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, and <optgroup>.
The <input> Element
The <input> element is one of the most used form elements. It can be shown in several ways, depending on its type attribute. All the different type values are covered in HTML Input Types.
Example
A single text input with a label.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The input Element</title>
</head>
<body>
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
The <label> Element
The <label> element defines a label for a form element.
It helps screen-reader users, because the screen reader reads the label out loud when the user moves to the input. It also helps people who find it hard to click very small areas, like radio buttons or checkboxes: clicking the label text toggles the matching control. Set the label's for attribute to the same value as the input's id to bind them together.
The <select> Element
The <select> element makes a drop-down list. Each choice is an <option> element. By default the first option is selected.
To pre-select an option, add the selected attribute to it. Use the size attribute to set how many options are visible at once, and the multiple attribute to let the user pick more than one.
Drop-down list
A basic drop-down list of cars.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The select Element</title>
</head>
<body>
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Pre-selected option
The same list with Fiat pre-selected using the selected attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre-selected Option</title>
</head>
<body>
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Visible values
Using size="3" to show three options at once.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visible Values</title>
</head>
<body>
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Multiple selections
Using the multiple attribute so the user can pick more than one car.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Selections</title>
</head>
<body>
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
The <textarea> Element
The <textarea> element makes a multi-line text field.
The rows attribute sets how many lines are visible, and the cols attribute sets the visible width. You can also set the size with CSS instead.
Using rows and cols
A text area sized with rows and cols.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The textarea Element</title>
</head>
<body>
<form>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
</form>
</body>
</html>
Sized with CSS
A text area sized with CSS width and height instead.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea sized with CSS</title>
</head>
<body>
<form>
<textarea name="message" style="width:200px; height:100px;">The cat was playing in the garden.</textarea>
</form>
</body>
</html>
The <button> Element
The <button> element makes a clickable button.
Note: Always set the type attribute on a button, because different browsers may use different default types.
Example
A button that shows an alert when clicked.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The button Element</title>
</head>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
The <fieldset> and <legend> Elements
The <fieldset> element groups related fields in a form. The <legend> element gives that group a caption.
Example
A form whose fields are grouped in a <fieldset> with a <legend> caption.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset and legend</title>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
The <datalist> Element
The <datalist> element gives an <input> a list of pre-defined options. The user sees a drop-down of these options while typing.
The input's list attribute must match the id of the <datalist> to connect them.
Example
A text input with a datalist of browser suggestions.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The datalist Element</title>
</head>
<body>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
The <output> Element
The <output> element shows the result of a calculation, such as one done by a script.
Example
A form that adds two numbers and shows the result in an <output> element.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The output Element</title>
</head>
<body>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b">100</output>
<br><br>
<input type="submit">
</form>
</body>
</html>
HTML Form Elements
These are the HTML form elements and what each one does:
<form>— defines a form for user input.<input>— defines an input control.<textarea>— defines a multi-line input control (text area).<label>— defines a label for an<input>element.<fieldset>— groups related elements in a form.<legend>— defines a caption for a<fieldset>element.<select>— defines a drop-down list.<optgroup>— defines a group of related options in a drop-down list.<option>— defines an option in a drop-down list.<button>— defines a clickable button.<datalist>— gives a list of pre-defined options for input controls.<output>— defines the result of a calculation.