In this tutorial we will see all different HTML form elements.
HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
<input> Tag
We already seen in various form example. This is the most used element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example
<label for="fname">First name:</label> <input type="text" id="fname" name="fname">
All the different values of the type attribute are covered in the next chapter
<label> Tag
Notice <label> tag in above example. The <label> tag defines a label for many form elements.
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have an attribute in the label tag that must be the same as id attribute of the input tag.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) – because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
<select> Tag
<select> tag used to make 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>
<option> tag describes the option in the list that can be selected.
By default first item is selected. To define a pre-selected option, add the selected attribute to the option,
<option value="fiat" selected>Fiat</option>
Visible Values
Use the size attribute to specify the number of visible values.
<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>
Allow Multiple Selections
Use the multiple attribute to allow the user to select multiple values value
<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>
<optgroup> Tag
<optgroup> tag is used to group related options in a <select> element (drop-down list).
If you have a long list of options, groups of related options are easier to handle for a user.
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<textarea> Tag
<textarea> tag used to define multi-line input field. For examples just scroll down and see the comment section of this article.
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
<button> Tag
The <button> element defines a clickable button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Always specify the type attribute for the button element. Different browsers may use different default types for the button element.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!
| Types | Description |
|---|---|
| button | The button is a clickable button |
| submit | The button is a submit button (submits form-data) |
| reset | The button is a reset button (resets the form-data to its initial values) |
<fieldset> and <legend> Tag
<fieldset> tag is used to group related data in a form.
<legend> element defines a caption for the <fieldset> element.
<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>
<datalist> Tag
<datalist> tag used to define pre-defined options for the input field.
User can see pre-defined list of value when they focus on input filed.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output> Tag
<output> tag represents the result of a calculation (like one performed by a script).
<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>
Example of all above tag
See the Pen form elements by Arpit (@soniarpit) on CodePen.
Hope you enjoyed. Must try this examples in your system. Happy coding 🙂
Previous: #22 HTML Form Attribute
Next: #24 HTML Input types
