HTML Form Elements

There are different HTML form elements which are used in between <form> and </form>. The form element can contain one or more elements. Lets discuss the form elements below:

HTML Form Elements: Tags

Element	Description
<input>	It defines the command of input.
<textarea>	It defines multiline command of inputs(textarea).
<label>	It defines label for input elements.
<select>	It defines the drop-down list.
<option>	It defines the options for the drop-down list.
<optgroup>	It defines the related group of options for the drop-down list.
<fieldset>	It defines related group of data in form.
<legend>	It defines caption for <fieldset> element.
<datalist>	It defines list of pre defined options for input controls
<output>	It defines the result.
<button>	It defines a button.

Label Element

The label element specifies a label for certain elements of form for users it is useful because through label element user will get hint about input element So, label makes form user friendly.

If you click on label tag the text control will be highlight and it will become easier for user to click on small input elements like radio button , button and others. To do so, for attribute is used in label tag that must be same as the input id attribute.

Input Element

The most commonly use form element is <input> element. The input element can be displayed in several ways it depends on the value of type attribute.

  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>

Visit HTML Input Types to learn types of input element.

Select and Option Element

Select element defines the drop-down list of options it allow user to select from different options.

The options in the drop-down list can be given using <option> element and the top most option from list is selected by the browser by default.

<select id="cake" name="cake">
    <option value="Chocolate">Chocolate Cake</option>
    <option value="Pineapple">Pineapple Cake</option>
    <option value="Cream">Cream Cheese Cake</option>
    <option value="Strawberry">Strawberry Cake</option>
  </select>

Select & Option Element

Choose a cake: Chocolate Cake Pineapple Cake Cream Cheese Cake Strawberry Cake

Optgroup Element

Html <optgroup> element defines the related group of options for the drop-down list. By using optgroup element it become easier to navigate the items in the dropdown list. The label attribute is used in optgroup tag to give label to related options.

  <select name="dessert" id="dessert">
  
    <optgroup label="Cakes">
     <option value="Chocolate">Chocolate Cake</option>
    <option value="Pineapple">Pineapple Cake</option>
    <option value="Cream">Cream Cheese Cake</option>
    <option value="Strawberry">Strawberry Cake</option>
    </optgroup>
	
    <optgroup label="Cookies">
      <option value="choco">Choco Cookies</option>
      <option value="oatmeal">Oatmeal Cookie</option>
    </optgroup>
	
	  <optgroup label="IceCream">
      <option value="choco">Choco Icecream</option>
      <option value="Strawberry">Strawberry Icecream</option>
    </optgroup>
  </select>

Optgroup element

Choose a Dessert: Chocolate Cake Pineapple Cake Cream Cheese Cake Strawberry Cake Choco Cookies Oatmeal Cookie Choco Icecream Strawberry Icecream

Note: The optgroup will act as a label user cannot select the label, by default the first option will be shown as selected item.

Textarea Element

Textarea element defines multiline command of input fields(textarea). It contains two attributes row and column.

Rows attribute define the height of text area and Cols attribute define the width of text area.

<textarea name="msg" rows="5" cols="20">The textarea element defines multiline input field.</textarea>

Textarea

The textarea element defines multiline input field.

Note: You can try the above code and can change the rows and cols attribute values to know how its actually effecting the textarea.

The Fieldset and Legend Element

Html <fieldset> is used to defines related group of data in form. It is used with <legend> element to provide the caption for fieldset.

  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Hery"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Potter"><br>
	 <label for="age">Age</label><br>
    <input type="text" id="age" name="age" value="40"><br><br>
    <input type="submit" value="Submit">
  </fieldset>

Fieldset Element

Personal Information

First name:

Last name:

Age

Datalist Element

Html <datalist> element defines list of pre defined options for input controls. It can be used to provide fast choices for the user which can be time saving.

<datalist id="Country">
    <option value="Pakistan">
    <option value="China">
    <option value="Turkey">
    <option value="U.K">
    <option value="U.A.E">
  </datalist>

Datalist Element

Output Element

Html <output> element defines the result or final calculations.

Button Element

Html <button> element defines the clickable button.

<button type="button" onclick="alert('Buttons have so many other types will discus later on')">Click Me!</button>

Button Element

Click Me!