HTML Form Elements

    Here in this article, we have covered the most common and widely used form nested elements. The <form> element is generally used to provide a form like structure, and its elements describe the various fields and buttons for that structure.

    HTML <input> Element

    <input> is the most common element used in a form. It creates an input block where the user can enter or select data. <input> type element decides which type of input should be represented on the form block. By default the type attribute value is text , but the developer can change the type value and provide the appropriate input block. Example 

    <form>
  Name:
  <input type="text" name="name"><br>
  
  DOB:
  <input type="date" name="DOB"><br>
  
  Email:
  <input type="email" name="email"><br>
  
  File:
  <input type="file" name="doc"><br>
  
  Password:
  <input type="password" name="pass"><br>
  
 <input type="submit" value="Signup">
</form>

    Output 

    Name:

DOB:

Email:

File:

Password:

    <note> It is very important to mention the name attribute in the input element because, at the backend, programming language handles the form data using its name.

    Type attribute values

    • button
    • checkbox
    • color
    • date
    • datetime-local
    • email
    • file
    • hidden
    • image
    • month
    • number
    • password
    • radio
    • range
    • reset
    • search
    • submit
    • tel
    • text
    • time
    • url
    • week

    HTML <select> Element

    The <select> element is used to create a drop-down list. It also contains <option> element which represents various options for the drop-down list. Example 

    <form>
    
    Select your favourite colour
    <select id="colour" name="colour">
       <option value="red">Red</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
       <option value="black">Black</option>
    </select>

</form>

    Output 

    Select your favourite colourRedBlueGreenBlack

    Multiple Attribute

    By default, the <select> element allows us to select only one option but using the multiple attribute we can select more than one option. Example 

    <form>
    
    Select your favourite colours<br>
    <select id="colour" name="colour" multiple>
       <option value="red">Red</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
       <option value="black">Black</option>
    </select>

</form>

    Output 

    Select your favourite coloursRedBlueGreenBlack

    HTML <textarea> Element

    <texarea> element is an extension of <input type="text"> element. <textarea> is generally used to represent multi-line input fields. Example 

    <form>
   Comment: <br>
     <textarea name="comment" rows="10" cols="90"> 
      Please Comment.....
     </textarea> <br>
     <input type="submit" value="Post">
</form>

    Output 

    Comment: Please Comment.....

    The rows and cols attributes specify the height and width of text area input.

    <button> Element

    <button> element creates a clickable button and it can be used as a replacement for <input type="submit"> element. Example 

    <form>
  Name:<input type="text" name="name">
  <button type="submit"> Click Here</button>
</form>
    Output: 
    Name: Click Here

    HTML <fieldset> and <legend> Elements

    • The <fieldset> element is used to represent a group of relatedble data.
    • <legend> element provide a caption to the feildset data.

    Example 

    <form action="/login.php">
   <fieldset>
       <legend>Login:</legend>
       <label for="Username">Username:</label>
       <input type="text" id="Username" name="Username">
       <label for="pass">Password:</label>
       <input type="Password" id="pass" name="pass">
       <input type="submit" value="Login">
    </fieldset>
</form>

    Output

    Login:Username: Password:

    HTML <datalist> Element

    <datalist> element is used to specify some pre-defied options for the input block. The list attribute of input must be equal to the id attribute of <datalist>. <datalist> element is similar to the <select> element, but instead of direct selecting the option the user can write the input for the selection. Like the <select> element, in <datalist> we mention some predefined options for the input block. Example 

    <form action="/data.php">
Colour:
 <input list="colour">
 <datalist id="colour">
   <option value="RED">
   <option value="Green">
   <option value="Blue">
   <option value="Black">
 </datalist>
 <button type="submit"> Post </button>
</form>

    Output 

    Colour:
 Post

    Summary

    • The <input> element define an input block where the user can enter data.
    • The type attribute of input specifies what type of data must be entered.
    • Every form must contain a submit button to process the data.
    • <label> element is used to provide a caption to input blocks.
    • <feildset> is used to group similar data.
    • <option> element can be used with <select> and <datalist> elements.
    • <datalist> is used to predefined some options for input block.

    People are also reading:

    Previous Tutorial Next Tutorial