May 4, 20213 min read

What are HTML Forms?

HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc.

The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a web server.

The form tag is used to create an HTML form.

Example:

<!DOCTYPE html>
<html>
<body>
  
<form>
    <fieldset> 
    <legend> Contact us </legend>
      Username:<br>
      <input type="text" name="username">
      <br>
      Email id:<br>
      <input type="text" name="email_id">
      <br><br>
      <input type="submit" value="Submit">
     </fieldset>
  
</form> 
  
</body>
</html>

Text Field:

The text field is a one line input field allowing the user to input text. Text Field input controls are created using the “input” element with a type attribute having value as “text”.

<!DOCTYPE html>
<html>
<h3> Text Field</h3>
<body>
 <form>
 <label for="EMAIL ID">Email Id:</label><br>
 <input type="text" name="Email id" id="Email id">
 </form>
</body>
</html>

Text Area:

Text Area is a multiple line text input control which allows user to provide a description or text in multiple lines. A Text Area input control is created using the “textarea” element.

<!DOCTYPE html>
<html>
<h3>Text Area Box</h3> 
<body>
 <form>
 <label for="Description">Description:</label><br>
 <textarea rows="5" cols="50" name="Description"
 id="Description"></textarea>
 </form>
</body>
</html>

Password:

Password fields are a type of text field in which the text entered is masked using asterisk or dots for prevention of user identity from another person who is looking onto the screen. Password Field input controls are created using the “input” element with a type attribute having value as “password”.

<!DOCTYPE html>
<html>
<h3>Password Field</h3>    
<body>
 <form>
 <label for="user-password">Password:
 </label><br>
 <input type="password" name="user-pwd" 
 id="user-password">
 </form>
</body>
</html>

Radio Buttons:

Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created using the “input” element with a type attribute having value as “radio”.

<!DOCTYPE html>
<html>
<h3>Radio Button</h3>
<body>
    <form>
        SELECT GENDER
        <br>
        <input type="radio" name="gender" id="male">
        <label for="male">Male</label><br>
        <input type="radio" name="gender" id="female">
        <label for="female">Female</label>
    </form>
</body>
</html>

Check Box:

Checkboxes are used to let the user select one or more options from a pre-defined set of options. Checkbox input controls are created using the “input” element with a type attribute having value as “checkbox”.

<!DOCTYPE html>
<html>
<h3>Checkboxes</h3>
<body>
    <form>
        <b>Select the Language</b>
        <br>
        <input type="checkbox" name="subject" id="English">
        <label for="English">English</label><br>
        <input type="checkbox" name="subject" id="Hindi">
        <label for="Hindi">Hindi</label><br>
        <input type="checkbox" name="subject" id="Punjabi">
        <label for="Punjabi">Punjabi</label><br>
    </form>
</body>
</html>

File Select Button:

File select boxes are used to allow the user to select a local file and send it as an attachment to the web server.It is similar to a text box with a button which allows the user to browse for a file.Instead of browsing for the file, the path and the name of the file can also be written. File select boxes are created using the “input” element with a type attribute having value as “file”.

<!DOCTYPE html>
<html>
<h3>File Select Box</3> 
 <body>
 <form>
 <label for="fileselect">Upload:</label>
 <input type="file" name="upload" id="fileselect">
 </form>
</body>
</html>

Select Box:

Select boxes are used to allow users to select one or more than one option from a pull-down list of options. Select boxes are created using two elements which are “select” and “option”.List items are defined within the select element.

<!DOCTYPE html>
<html>
<h3> Select Box</h3> 
<body>
    <form>
        <label for="country">Country:</label>
        <select name="country" id="country">
            <option value="India">India</option>
            <option value="USA">USA</option>
            <option value="South Africa">South Africa</option>
            <option value="Thailand">ThaiLand</option>
            <option value="Sri Lanka">Sri Lanka</option>
            <option value="Russia">Russia</option>
        </select>
    </form>
</body>
</html>

Submit and Reset Button:

The Submit Button allows the user to send the form data to the web server. The Reset Button is used to reset the form data and use the default values.

<!DOCTYPE html>
<html>
<h3>Submit And Reset Button</h3> 
<body>
 <form action="test.php" method="post" id="users">
 <label for="username">Username:</label>
 <input type="text" name="username" id="Username"><br><br>
 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
 </form>
</body>
</html>