HTML Forms

Forms are how we collect user input in HTML – from login forms to surveys, contact forms, and everything in between.

We’ll walk through everything step-by-step with clear examples so you understand and can build real forms today.

🧱 Basic Form Structure

Every form starts with the <form> element:

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

Important Attributes:

• action: where the form data is sent (URL)
• method: "get" (visible in URL) or "post" (secure)

⌨️ Input Types (HTML5 Inclusive)

The <input> element is super flexible. The type attribute decides what kind of data it expects.

Common Input Types:

Example:

<input type="text" name="fullname" placeholder="Enter your name">
<input type="email" name="email" required>
<input type="submit" value="Send">

🧾 Other Form Elements

1. <textarea> – Multi-line input:

<textarea name="message" rows="5" cols="30" placeholder="Type your message"></textarea>

2. <select> – Dropdown menu:

<select name="country">
  <option value="">Select Country</option>
  <option value="in">India</option>
  <option value="us">USA</option>
</select>

3. <option disabled selected> – Placeholder in select

🏷️ Labels & Fieldsets

✅ Use <label> for accessibility:

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

for attribute must match the id of the input.

✅ Use <fieldset> to group inputs:

<fieldset>
  <legend>Personal Info</legend>
  <input type="text" name="first_name">
  <input type="text" name="last_name">
</fieldset>

⚙️ HTML5 Form Attributes

These attributes improve functionality without JavaScript.

Example:

<input type="text" name="username" required pattern="[a-zA-Z0-9]{5,}" placeholder="Enter 5+ letters/numbers">

🧠 Datalist & Autocomplete

Let’s add autocomplete suggestions using <datalist>.

<input list="browsers" name="browser" placeholder="Choose your browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

♿ Accessible Forms

✅ Always use:

• <label for="id"> to associate labels with inputs
• aria-label or aria-describedby for screen readers if needed
• Semantic grouping (<fieldset>, <legend>)

✅ HTML Validation (Without JavaScript)

HTML5 gives us basic validation out-of-the-box.

Examples:

<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

Browser will show error messages if the field doesn’t match!

🧪 Sample Contact Form

<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>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

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

🔁 Summary

🎓 Coming Up Next

Let’s break forms even deeper in upcoming posts like input types, validation tricks, and accessibility.

📚 Next: HTML Div, Span & Layout Basics