HTML: Hypertext Markup Language (Form Elements)
Websites are a compilation of HTML Documents, i.e., Webpages. And an HTML Document is made up of many HTML Elements. This includes Headings, Paragraphs, Lists, Images etc.
Apart from these, there are many other important HTML Elements. Which also includes an HTML Form Element. This tutorial will give you complete information about HTML Form Elements.
You will know how to make form from HTML? This lesson has been divided into small parts for convenience.
{tocify} $title={Table of Contents}
The HTML <form> Elements
The HTML <form> element can include one or more of the following form elements:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
The <input> Element
One of the considerably used form elements is the <input> element.
Depending on the type attribute, the <input> element can be shown in several methods.
Example:
<label for="fname">First name:</label><input type="text" id="fname" name="fname">{codeBox}
Try This:
<!DOCTYPE html><html><body><h2>The input Element</h2><form action="/action_page.html"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname"><br><br><input type="submit" value="Submit"></form></body></html>{codeBox}
The <label> Element
The <label> element represents a label for several form elements.
The <label> element is helpful for screen-reader users because the screen-reader will read out loud the label when the user concentrates on the input element.
The <label> element even help users who have a problem 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.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to tie them together.
The <select> Element
The <select> element represents a drop-down list:
Example:
<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>{codeBox}
The <option> elements represent an option that can be selected.
By default, the first thing in the drop-down list is selected.
To determine a pre-selected option, add the selected attribute to the option:
Example:
<option value="fiat" selected>Fiat</option>{codeBox}
Try This “To determine a pre-selected option”:
<!DOCTYPE html><html><body><h2>Pre-selected Option</h2><p>You can preselect an option with the selected attribute:</p><form action="/action_page.html"><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><input type="submit"></form></body></html>{codeBox}
Visible Values:
Utilize the size attribute to determine the number of visible values:
Example:
<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>{codeBox}
Allow Multiple Selections:
Utilize the multiple attribute to let the user to select more than one value:
Example:
<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>{codeBox}
The <textarea> Element
The <textarea> element represents a multi-line input field (a text area):
Example:
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>{codeBox}
The rows attribute determines the visible number of lines in a text area.
The cols attribute defines the visible width of a text area.
This is how the HTML code above will be shown in a browser:
You can also specify the size of the text area by using CSS:
Example:
<textarea name="message" style="width:200px; height:600px;">The cat was playing in the garden.</textarea>{codeBox}
The <button> Element
The <button> element represents a clickable button:
Example:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>{codeBox}
This is how the HTML code above will be shown in a browser:
The <fieldset> and <legend> Elements
The <fieldset> element is utilized to group related data in a form.
The <legend> element represents a caption for the <fieldset> element.
Example:
<form action="/action_page.html"><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>{codeBox}
This is how the HTML code above will be shown in a browser:
The <datalist> Element
The <datalist> element defines a list of pre-defined options for an <input> element.
Users will witness a drop-down list of pre-defined options as they input data.
The list attribute of the <input> element must refer to the id attribute of the <datalist> element.
Example:
<form action="/action_page.html"><input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>’</form>{codeBox}
The <output> Element
The <output> element defines the result of a calculation (like one performed by a script).
Example -
Perform a calculation and display the result in an <output> element:
<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>{codeBox}
HTML Form Elements
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline 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> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Form Elements.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
