HTML Forms & Validation

Step 1: Form Basics

Forms are how users send data to a server. Every form starts with the <form> tag and contains input elements, labels, and a submit button.

Here is a basic form structure:

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

Key Terms

actionThe URL where the form data is sent methodHTTP method: GET (data in URL) or POST (data in body) nameIdentifies each input when data is sent (the key) valueThe data entered by the user (the value) submitTriggers the form to send its data to the server

Form Submission Flow

User fills form

→

Clicks Submit

→

Browser validates

→

HTTP Request sent

→

Server responds

The <label> element improves accessibility. Its for attribute should match the input's id, so clicking the label focuses the input.

Step 2: Input Types

HTML provides many input types for different kinds of data. Select a type below to see a live example and the code that produces it.

Choose an input type:

Live Example

HTML Code

Step 3: HTML5 Validation

HTML5 has built-in validation attributes that let browsers check user input without JavaScript. Toggle the attributes below, then try submitting the form to see browser validation in action.

Toggle Validation Attributes

required type="email" minlength="3" maxlength="20" min="1" max="100" pattern="[A-Za-z]+"

Generated HTML

Step 4: Custom JavaScript Validation

For more complex rules, you need JavaScript validation. Type in the fields below and watch real-time feedback as each rule is checked.

View Validation Code

function validateRegistration() {
  var u = document.getElementById('reg-username').value;
  var e = document.getElementById('reg-email').value;
  var p = document.getElementById('reg-password').value;
  var c = document.getElementById('reg-confirm').value;

  // Username: 3-20 chars, alphanumeric only
  var uOk = /^[A-Za-z0-9]{3,20}$/.test(u);

  // Email: basic format check
  var eOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);

  // Password: 8+ chars, uppercase, lowercase, number
  var pOk = p.length >= 8
    && /[A-Z]/.test(p)
    && /[a-z]/.test(p)
    && /[0-9]/.test(p);

  // Confirm: must match password
  var cOk = c.length > 0 && c === p;

  // Enable submit only when all pass
  btn.disabled = !(uOk && eOk && pOk && cOk);
}

Step 5: Form Data & Submission

When a form is submitted, the browser collects all named inputs into key-value pairs. With GET, the data appears in the URL as a query string. With POST, it is sent in the request body. Fill out the form and click Submit to see the data.

Method: GET POST

Form Data (Key-Value Pairs)

URL-Encoded String (GET query)

Step 6: Knowledge Check

1. Which HTML attribute makes a form field mandatory before submission?

mandatory required validate

2. What is the difference between the GET and POST form methods?

GET sends data in the URL; POST sends data in the request body GET is for receiving data; POST is for sending data There is no difference; they work the same way

3. Which HTML5 attribute restricts input to match a regular expression?

regex match pattern