Forms, input types and validation — HTML5 & CSS3 — Semantic Markup to Responsive Layouts

2. Forms, input types and validation

Basic★ Must knowLesson 2 of 11

html

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

  <label for="age">Age</label>
  <input id="age" name="age" type="number" min="18" max="99">

  <label for="phone">Phone</label>
  <input id="phone" name="phone" type="tel" pattern="[0-9]{10}" placeholder="10 digits">

  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="basic" checked> Basic</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>

  <select name="country"><option value="IN">India</option><option value="TW">Taiwan</option></select>
  <textarea name="notes" rows="3"></textarea>
  <button type="submit">Register</button>
</form>

Every input needs a <label> (for = input id) — clicking the label focuses the input and screen readers announce it.
HTML5 types (email, number, date, tel, url) give mobile keyboards and built-in validation.
Constraint attributes: required, min, max, minlength, maxlength, pattern.
GET puts data in the URL (search forms); POST sends it in the body (create/change data).
Client-side validation is for UX only — always validate again on the server.