HTML Forms

A complete guide to understanding HTML forms, including input fields, validation, and form attributes.

📝 In this guide, we will cover how to create and manage forms in HTML, including input types, labels, validation, and various form attributes.

HTML forms are used to collect user input on webpages. They can contain various types of input fields like text boxes, buttons, and checkboxes. Here's how you can structure and use forms in HTML:

🏗️ Basic Form Structure

The basic structure of a form is created using the <form> tag. A form includes different input fields and a submit button. Here’s a basic example:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
 
  <input type="submit" value="Submit">
</form>

🎛️ Input Types

There are many types of input fields you can use in HTML forms:

Text 📝: <input type="text">
Password 🔒: <input type="password">
Email 📧: <input type="email">
Number 🔢: <input type="number">
Radio 🔘: <input type="radio">
Checkbox ☑️: <input type="checkbox">
Date 📅: <input type="date">
File 📂: <input type="file">
Hidden 👻: <input type="hidden">
Submit 🚀: <input type="submit">
Reset 🔄: <input type="reset">

Example of various input fields:

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
 
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
 
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
 
  <label for="terms">Accept Terms:</label>
  <input type="checkbox" id="terms" name="terms">
 
  <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>
 
  <input type="submit" value="Submit">
</form>

🏷️ Labels and Textareas

Labels associate text with form elements, improving accessibility. Textareas are ideal for longer inputs.

<form action="/submit" method="post">
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
 
  <input type="submit" value="Send">
</form>

The <label> element is linked to the <select> element by using the for attribute, which corresponds to the id of the <select> tag. This helps improve accessibility and usability by associating the label with the dropdown.

🌍 Select Dropdowns

<form action="/submit" method="post">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="india">India</option>
  </select>
 
  <input type="submit" value="Submit">
</form>

The <select> element creates a dropdown list with the options "United States," "United Kingdom," and "India."
The user can choose one of these countries from the dropdown. When the form is submitted, the selected value (e.g., "usa", "uk", or "india") will be sent to the server under the name "country".

🗂️ Fieldset and Legend

<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="first-name">First Name:</label>
    <input type="text" id="first-name" name="first-name">
    
    <label for="last-name">Last Name:</label>
    <input type="text" id="last-name" name="last-name">
  </fieldset>
 
  <input type="submit" value="Submit">
</form>

The <fieldset> groups the first name and last name fields.
The <legend> inside the <fieldset> labels this group of fields as "Personal Information."
When displayed in a browser, this grouping will be visually enclosed in a border, with the label "Personal Information" above it.

⚙️ Form Attributes

action 🎯: Where the form data goes.
method 📡: How the form data is sent (GET or POST).

Example:

<form action="/submit" method="post">
  <!-- form fields here -->
</form>

✅ Validation Attributes

These help ensure correct input:

required: Must be filled.
minlength: Minimum characters.
maxlength: Maximum characters.
pattern: Regex validation.

<form action="/submit" method="post">
  <label for="username">Username (min 5 characters):</label>
  <input type="text" id="username" name="username" required minlength="5">
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="phone">Phone (format: 123-456-7890):</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required>
 
  <input type="submit" value="Submit">
</form>

📝 Placeholder and Autofocus

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" required autofocus>
 
  <input type="submit" value="Submit">
</form>

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

HTML Forms

🏗️ Basic Form Structure

🎛️ Input Types

🏷️ Labels and Textareas

🌍 Select Dropdowns

🗂️ Fieldset and Legend

⚙️ Form Attributes

✅ Validation Attributes

📝 Placeholder and Autofocus

🧪 Try Yourself

🎉 Conclusion

📚 Resources

HTML Forms - MDN

Form Validation - W3Schools

On this page