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: