Class – 28 | HTML5 Form Elements | HTML Tutorial

HTML forms gather user information through input elements such as text fields, radio buttons, and checkboxes. The input elements are grouped inside a <form> element, which is used to define the form and its actions.

Here are some common HTML5 form elements:

1. <input type="text"> – Used to create a single-line text input field.
2. <input type="password"> – Used to create a password input field. The characters entered by the user are masked to protect the password.
3. <input type="radio"> – Used to create a radio button. Radio buttons are used when you want to offer multiple options to the user and allow them to select only one.
4. <input type="checkbox"> – Used to create a checkbox. Checkboxes are used when you want to offer multiple options to the user and allow them to select one or more.
5. <select> – Used to create a drop-down list. The options for the drop-down list are defined using the <option> element.
6. <textarea> – Used to create a multi-line text input field.
7. <button> – Used to create a button that can be used to submit the form data, reset the form, or perform other actions.

Here is an example of a simple HTML5 form:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  
  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>
  
  <label for="hobbies">Hobbies:</label>
  <input type="checkbox" id="reading" name="hobbies" value="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="traveling" name="hobbies" value="traveling">
  <label for="traveling">Traveling</label><br><br>
  
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Select a country</option>
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="UK">UK</option>
  </select><br><br>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br><br>
  
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

In the above example, the form has various input elements that allow the user to enter their username, password, gender, hobbies, country, and message. The form also has two buttons, one to submit the form data

Next Class