HTML Forms | Day 06 of HTML Learning Series

Welcome to Day 06 of our HTML learning series! Today, we’ll learn about HTML forms, which are essential for collecting user input on websites. Forms are widely used for login pages, contact forms, surveys, and more.

Last article we discuss about HTML Tables u can also check out that.

What Are HTML Forms?

HTML forms allow users to enter data that is then sent to a server for processing. Forms consist of various input elements such as text fields, checkboxes, radio buttons, and submit buttons.

Basic HTML Form Structure:

A basic HTML form is created using the <form> element.

  
<form action="/submit" method="post">
  
  <label for="name">Name:</label>
  
  <input type="text" id="name" name="name">
  


  
  <label for="email">Email:</label>
  
  <input type="email" id="email" name="email">
  


  
  <input type="submit" value="Submit">
  
</form>
  

In this example, the form includes text fields for the name and email, and a submit button to send the data.

Explanation:

• <form>: Starts the form. The action attribute specifies where the form data should be sent, and method defines how the data will be submitted (GET or POST).
• <label>: Describes what the form input is about.
• <input type="text">: Creates a text field for the user to type in.
• <input type="email">: Creates an email field that checks for proper email format.
• <input type="submit">: Adds a button to submit the form.

Common Form Elements

1. Radio Buttons and Checkboxes

Radio buttons allows users to select one option from multiple choices, while checkboxes allow users to select multiple options.

Example of radio button

    
<input type="radio" name="gender" value="male"> Male
    
<input type="radio" name="gender" value="female"> Female
    

Example of checkboxes

    
<form>
    
<p>Please select your hobbies:</p>
    

      <input type="checkbox" id="reading" name="hobby" value="reading">
    
    
<label for="reading">Reading</label><br>
    

      <input type="checkbox" id="traveling" name="hobby"
      value="traveling">
    
    
<label for="traveling">Traveling</label><br>
    

      <input type="checkbox" id="cooking" name="hobby" value="cooking">
    
    
<label for="cooking">Cooking</label><br>
    
</form>
    

In this example, users can select one gender and multiple hobbies.

2. Dropdown Lists

Dropdown lists allow users to select an option from a predefined list.

Example: Dropdown List

  
<h1>Select Your Country</h1>
  
<form action="/submit" method="post">
  
   <label for="country">Country:</label>
  
   <select id="country" name="country">
  
      <option value="usa">USA</option>
  

          <option value="canada">Canada</option>
  
  
      <option value="uk">UK</option>
  
   </select><br><br>
  
   <input type="submit" value="Submit">
  
</form>
  

In this example, the dropdown list includes three countries.

3. Text Areas

Text areas allow users to enter multiple lines of text.

  
<h1>Leave a Comment</h1>
  
<form action="/submit" method="post">
  

       <label for="comment">Comment:</label><br>
  
  

       <textarea id="comment" name="comment" rows="4"
    cols="50"></textarea><br><br>
  
  
   <input type="submit" value="Submit">
  
</form>
  

In this example, the text area allows users to enter a comment.

Form Validation

HTML5 provides built-in form validation to ensure users enter valid information before submitting the form. 

For example:

• The required attribute makes sure that users don’t leave fields empty.
• The type="email" ensures users enter a valid email format.

Thanks for reading