HTML Forms — Complete Guide

Forms

Forms collect input from users — names, emails, choices — and send it somewhere for processing.

<form method="POST" action="/submit">
  <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>

  <button type="submit">Submit</button>
</form>

This is the same pattern used by any real signup or contact form — a <label> paired with each field, and a submit button at the end.

Form Attributes

• action — the URL the form data is sent to
• method — GET (data visible in the URL, for searches) or POST (data sent in the request body, for anything sensitive)
• autocomplete="off" — disables browser autofill suggestions
• novalidate — turns off the browser's built-in validation (rarely needed)

<form method="POST" action="/save-request" autocomplete="off">
  ...
</form>

Form Elements

<label for="course">Course</label>
<select id="course" name="course">
  <option value="html">HTML Basics</option>
  <option value="css-basics">CSS Basics</option>
</select>

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

<fieldset>
  <legend>Preferred contact</legend>
  <input type="radio" id="email-contact" name="contact" value="email">
  <label for="email-contact">Email</label>
  <input type="radio" id="phone-contact" name="contact" value="phone">
  <label for="phone-contact">Phone</label>
</fieldset>

• <select> + <option> — a dropdown, exactly what this site's certificate form uses to pick a course
• <textarea> — a multi-line text box
• <fieldset> + <legend> — groups related fields with a caption

Input Types

<input type="text">      <!-- plain text -->
<input type="email">     <!-- validates email format -->
<input type="password">  <!-- masks characters -->
<input type="number">    <!-- numeric spinner -->
<input type="tel">       <!-- phone number -->
<input type="date">      <!-- date picker -->
<input type="checkbox">  <!-- yes/no toggle -->
<input type="radio">     <!-- pick one of a group -->
<input type="file">      <!-- file upload -->
<input type="hidden">    <!-- invisible, sent with the form anyway -->

Choosing the right type gives users the right keyboard/picker on mobile automatically — e.g. type="tel" shows a number pad.

Input Attributes

<input type="tel" name="phone" placeholder="Mobile / WhatsApp Number"
       pattern="[0-9]{10}" maxlength="10" required>

• required — the browser won't let the form submit without this filled in
• placeholder — grey hint text shown when the field is empty
• pattern — a regex the value must match (e.g. exactly 10 digits)
• maxlength / minlength — character limits
• disabled — greyed out, not submitted, not editable
• readonly — visible and submitted, but the user can't edit it

This exact pattern (type="tel" + pattern + maxlength) is a reliable way to validate a 10-digit phone number on any form.