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:

User Info