Overview

In this blog, I will be covering the basics of HTML forms and their attributes which are most commonly used. It is easily understandable. I have explained the meaning and usage of each form tag and its attributes in detail.

HTML Forms

HTML Form is used to collect user input data and send it to the backend server for further processing.

HTML Elements that are used to create Forms

• Form Element: <form> </form>

It is used to create a form for user input. It is a container that contains different input data like text, checkboxes, radio buttons, submit buttons etc.

• Input Element: <input>

It is the most important and most used form element. It is a field where the user can enter the data and based on its type attribute we can change the input display.

• Label Element: <label> </label>

It is used to define a label for form elements. In order to bind the <label> element to an <input> element, the for attribute of <label> element should be equal to the id attribute of <input> element.

• Select Element: <select> </select>

It is used to create a drop-down list.

• Textarea Element: <textarea> </textarea>

  It is used to define a multi-line user input field. The size of the textarea is specified by the rows and cols attribute.

  • Rows Attribute : <element rows="number">

    It is used to define the height of a text area.

  • Cols Attribute : <element cols="number">

    It is used to define the width of a text area.

• Button Element : <button> </button>

  It is used to define a clickable button. The type attribute for a <button> element is used to specify the type of button (submit/reset).

• Fieldset Element: <fieldset> <fieldset>

  It is used to group related data in a form.

• Legend Element: <legend> </legend>

  It is used to define the caption for the <fieldset> element.

• Datalist Element : <datalist> </datalist>

  It is used to define a list of pre-defined options for an <input> element. The user will be able to see the pre-defined options in the drop-down list. In order to bind <input> element to a <datalist> , the list attribute of input element should be equal to the id attribute of <datalist> element.

• Output Element : <output> </output>

  It is used to display the result of a calculation.

Attributes used in form elements

• Action Attribute : <element action="">

  It is used to define the action to be performed when the user submits the form.

  <form action="/thankyou_page">
  <label for="fname">First name:</label>
  <input type="text" id="fname" >
  <input type="submit" value="Submit">
  </form>
  In this case, the form data is sent to thankyou_page
  

• Target Attribute : <element target="value">

  It is used to specify where to display the response when the user submits the form. There are 4 different types of target values.

  • _blank

    <form action="/thankyou_page"  target="_blank">
    This target value is used to display the response in a new window or tab.
    </form>
    

  • _self

    <form action="/thankyou_page"  target="_self">
    This target value is used to display the response in the same window or tab.
    </form>
    

  • _parent

    <form action="/thankyou_page"  target="_parent">
    This target value is used to display the response in the parent frame.
    </form>
    

  • _top

    <form action="/thankyou_page"  target="_top">
    This target value is used to display the response in the full body of the window.
    </form>
    

• Method Attribute : <element method="GET|POST">

  It is used to define the HTTP method when the user submits the form.

  • GET

    <form action="/thankyou_page"  method="GET">
    The GET method will append the user data to the URL which will be publicly visible. It is good to use GET  to submit non-secure data.
    </form>
    

  • POST

    <form action="/thankyou_page"  method="POST">
    The POST method will append the user data to the body of the HTTP request which will not be publicly visible.
    </form>
    

• Autocomplete Attribute : <element autocomplete="on|off">

  It is used to specify whether a form should have autocomplete on or off.

  <form action="/thankyou_page"  autocomplete="on">
  When autocomplete is on, the browser will automatically fill the data based on values that the user has entered before.
  </form>
  

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

A simple cargo service form using HTML

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Consignment Booking</title>
</head>
<body>
<form action="/thankyou_page" method="post" >
       <table>
        <tr>
            <td colspan="2">
                <h1>Cargo Service</h1>
            </td>
        </tr>
        <tr>
            <td>
                <label for="accnumber">Logistic Account Number</label>
            </td>
            <td>
                <input type="text" name="accnumber" id="accnumber" placeholder="Enter the Unique ID"
required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="mobile">Mobile Number</label>
            </td>
            <td>
                <input type="text" name="mobile" id="mobile" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="emailid">Email-ID</label>
            </td>
            <td>
                <input type="text" name="emailid" id="emailid" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="item">Item to be Shipped</label>
            </td>
            <td>
                <input type="text" name="item" id="item" placeholder="Item Name" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="itemtype">Item Category</label>
            </td>
            <td>
                <select name="itemtype" id="itemtype" required>
                    <option value="Electronics">Electronics</option>
                    <option value="Attires">Attires</option>
                    <option value="Toys">Toys</option>
                    <option value="Non Poisonous Food">Non Poisonous Food</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="address">Shipment Address</label>
            </td>
            <td>
                <textarea name="address" id="address" cols="20" rows="5" required></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label for="location">Location</label>
            </td>
            <td>
                <select name="location" id="category" required>
                    <option value="London - 1800">London - 1800</option>
                    <option value="Singapore - 1400">Singapore - 1400</option>
                    <option value="New York - 3100">New York - 3100</option>
                    <option value="Mexico City - 3300">Mexico City - 3300</option>
                    <option value="Tokyo - 2800">Tokyo - 2800</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="kilogramval">Weight in kilograms</label>
            </td>
            <td>
                <input type="number" name="weight" id="kilogramval" min="5" max="36" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="servicetype">Service Type</label>
            </td>
            <td>
                <input type="radio" name="servicetype" id="type1" value="Normal" required>
                <label for="type1">Normal</label>
                <input type="radio" name="servicetype" id="type2" value="Express" required>
                <label for="type2">Express</label>
                <input type="radio" name="servicetype" id="type3" value="Platinum" required>
                <label for="type3">Platinum</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="submit" id="submit" value="Book My Consignment">
            </td>
            <td>
                <input type="reset" name="clear" id="clear" value="Clear">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

Output

---

I hope this article gave you some practice and basic knowledge about HTML5 Forms and their attributes and how they work. Feel free to put up any queries that you may have.

Also, feel free to put suggestions in the comments section and give a reaction if you enjoyed reading. Connect with me on LinkedIn | Twitter .