HTML Form Elements
HTML Form Elements
HTML form elements are used to collect and manage user input. A form can contain one or more different elements, each designed for a specific type of data.
The <form> Elements
An HTML form may include the following elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
The <input> Element
The <input> element is one of the most commonly used form elements. Its appearance and behavior depend on the type attribute.
<label for="fname">First name:</label> <input type="text" id="fname" name="fname">
All available input types are explained in the HTML Input Types section.
The <label> Element
The <label> element defines a label for form controls.
It improves accessibility by allowing screen readers to read the label when the input is focused, and it makes inputs easier to activate by clicking the label text.
The for attribute must match the id of the related input element.
The <select> Element
The <select> element creates a drop-down list.
<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>
The <option> element defines each selectable item. By default, the first option is selected.
To preselect an option, use the selected attribute.
<option value="fiat" selected>Fiat</option>
Visible Options
The size attribute controls how many options are visible at once.
<select id="cars" name="cars" size="3">
Multiple Selection
The multiple attribute allows users to select more than one option.
<select id="cars" name="cars" size="4" multiple>
The <textarea> Element
The <textarea> element defines a multi-line text input field.
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
The rows attribute sets the visible number of lines, and cols sets the width.
The size can also be controlled using CSS.
<textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea>
The <button> Element
The <button> element defines a clickable button.
<button type="button" onclick="alert('Hello World!')">Click Me!</button> Always define the type attribute to avoid unexpected behavior across browsers.
The <fieldset> and <legend> Elements
The <fieldset> element groups related form controls and draws a border around them by default.
The <legend> element provides a caption for the group.
<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>
The <datalist> Element
The <datalist> element provides predefined options for an <input> element.
The list attribute of the input must match the id of the datalist.
<form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
The <output> Element
The <output> element represents the result of a calculation or script operation.
<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"></output> <br><br> <input type="submit"> </form>
HTML Form Elements Reference
<form>– defines a form for user input<input>– defines an input control<textarea>– defines a multi-line text input<label>– defines a label for form controls<fieldset>– groups related form elements<legend>– defines a caption for a fieldset<select>– defines a drop-down list<optgroup>– groups related options<option>– defines a selectable option<button>– defines a clickable button<datalist>– defines predefined input options<output>– displays calculation results
Input Element