HTML form elements are used to take user input. There are many various types of form elements such as text box, check box, drop-down menu, submit button
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
The <input> Element
The <input> element can be illustrated in several ways, depending on the type attribute.
Example:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Output:
The <label> Element
The <label> element is useful for end-users because the end-user will read the label aloud when the user focuses on the input element.
Example
<form action="" method="post">
<label for="cars">Choose a Gender</label>
<select id="cars" name="cars">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</form>
Ouput:
The <textarea> Element
The <textarea> element is used for a multi-line input field
<form action="" method="post">
<textarea placeholder="Type your message"></textarea>
</form>
Output:
The <fieldset> and <legend> Elements
The <legend> element is used a caption for the <fieldset> element.
Example:
<form action="" method="post">
<fieldset>
<legend>User Info</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
</fieldset>
</form>
Output: