Beginner 15 min

Forms and Semantic HTML

Inputs, labels, validation and landmarks that make pages accessible.

What you will learn

Build an accessible form
Use built-in validation
Structure with header/nav/main/footer

Forms collect input, and semantic elements tell browsers, search engines and assistive technology what each part of a page is. Getting both right makes your site usable by everyone.

<body>
  <header>
    <nav><a href="/">Home</a> <a href="/blog/">Blog</a></nav>
  </header>
  <main>
    <article>
      <h1>Post title</h1>
      <p>Content...</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>&copy; 2026</footer>
</body>

Prefer these over a sea of <div> elements. Screen-reader users can jump straight to main or nav, and search engines understand the page better. Use <div> and <span> only when nothing more meaningful fits.

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <label for="pw">Password</label>
  <input id="pw" name="password" type="password" minlength="8" required>

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
  </select>

  <fieldset>
    <legend>Contact by</legend>
    <label><input type="radio" name="contact" value="email" checked> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>

  <label><input type="checkbox" name="terms" required> I agree to the terms</label>
  <textarea name="notes" rows="3" placeholder="Anything else?"></textarea>

  <button type="submit">Create account</button>
</form>

Labels matter

Every input needs a <label> linked by for/id (or by wrapping the input). Clicking the label focuses the field, and screen readers announce it. Placeholder text is not a substitute, since it disappears as soon as you type.

Input types and built-in validation

type: email, url, tel, number, date, password, search, file. Mobile keyboards adapt to the type.
Validation attributes: required, min, max, minlength, maxlength, pattern.
The name attribute is the key sent to the server; an input without one is not submitted.

Server-side too

Browser validation is a convenience, easily bypassed. Always validate again on the server.

Buttons

Inside a form a <button> submits by default. Use type="button" for buttons that should not submit. Use a <button> for actions and an <a> for navigation.

Accessibility quick wins

Everything usable with a keyboard: tab through your page.
Sufficient color contrast (aim for 4.5:1 for body text).
Meaningful link text: "Read the pricing guide", not "click here".

Try it yourself

Build a contact form with name, email, a topic dropdown, a message box and a submit button. Every field needs a label and the email and message must be required.

Show solution

<form action="/contact" method="post">
  <label for="n">Name</label><input id="n" name="name" required>
  <label for="e">Email</label><input id="e" name="email" type="email" required>
  <label for="t">Topic</label>
  <select id="t" name="topic"><option>Sales</option><option>Support</option></select>
  <label for="m">Message</label><textarea id="m" name="message" required></textarea>
  <button type="submit">Send</button>
</form>