The HTML <form> element can include any of the following form elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>One of the most commonly used form elements is the <input> element.
The appearance of the <input> element can vary based on its type attribute.
Example
| <label for=”fname”>First name:</label> <input type=”text” id=”fname” name=”fname”> |
The <label> element assigns a label to multiple form elements.
For screen-reader users, the <label> element enhances accessibility by having the screen-reader announce the label when the user selects the input element.
Additionally, the <label> element aids users who struggle with clicking on tiny areas, like radio buttons or checkboxes, because clicking on the text within the <label> element toggles the associated radio button or checkbox.
To link the <label> and <input> elements, the for attribute of the <label> tag should match the id attribute of the <input> element.
The <select> element creates a dropdown menu:
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> |
The <option> element represents a selectable choice.
By default, the first item in the dropdown list is selected.
To specify a default selection, include the selected attribute within the option tag.
Example
| <option value=”fiat” selected>Fiat</option> |
Utilize the size attribute to indicate the quantity 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> |
Employ the multiple attribute to enable users to select multiple values.
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> |
The <textarea> element establishes a multi-line input field, known as a text area:
Example
| <textarea name=”message” rows=”10″ cols=”30″> The cat was playing in the garden. </textarea> |
The rows attribute determines the visible number of lines in a text area, while the cols attribute specifies its visible width.
Here’s how the HTML code above will appear when rendered in a browser:
You can also specify the size of the text area using CSS:
Example
| <textarea name=”message” style=”width:200px; height:600px;”> The cat was playing in the garden. </textarea> |
The <button> element specifies a button that can be clicked.
Example
| <button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button> |
| Reminder: Ensure to define the type attribute for the button element at all times. Various browsers might employ distinct default types for the button element. |
The <fieldset> element organizes correlated data within a form.
The <legend> element establishes a title for the <fieldset> element.
Example
| <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 outlines a set of predetermined choices for an <input> element.
When users input data, they encounter a dropdown menu presenting these predefined options.
The list attribute of the <input> element must correspond to the id attribute of the <datalist> element.
Example
| <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 symbolizes the outcome of a computation, such as one executed by a script.
Example
Conduct a calculation and display the outcome within 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> |