HTML Forms and Form Validation

What a form is for

A form is the part of a web page that collects information from the user — a login, a registration, a feedback message, or an order. Forms are what make a website two-way: the user sends data back to the site. In HTML, a form is created with the <form> element, which acts as a container for controls such as text boxes, buttons, checkboxes, and drop-down lists.

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

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

The <form> tag has two important attributes: action (the address the data is sent to when the form is submitted) and method (how it is sent — get puts the data in the address bar, post sends it hidden in the body of the request; post is used for private data such as passwords).

Common form controls

The <label> tag names a control; joining a label to its input (via the label's for and the input's id) improves accessibility, because clicking the label activates the control and screen readers announce it correctly.

What form validation is

Form validation is the process of checking that the information a user enters is complete and in the correct form before it is accepted — for example, that a required box is not empty, that an email address really looks like an email, or that a phone number has the right number of digits. Validation protects the site from incomplete or wrong data and gives the user helpful feedback.

HTML5 built-in validation

HTML5 can perform simple validation by itself, with no scripting, using attributes on the input:

• required — the field must be filled in before the form can be submitted.
• type="email" / type="url" — the browser checks the entry has the shape of an email address or web address.
• min, max — the smallest and largest allowed values for a number or date.
• minlength, maxlength — the fewest/most characters allowed in text.
• pattern — a rule the entry must match (a regular expression), for example a 6-digit PIN code.
• placeholder — hint text shown inside an empty box (a guide, not validation).

<form>
  <input type="text" name="pin" pattern="[0-9]{6}"
         placeholder="6-digit PIN" required>
  <input type="number" name="age" min="18" max="100" required>
  <input type="submit" value="Submit">
</form>

If the user tries to submit with an empty required box or a badly formatted email, the browser stops the submission and shows a message automatically. …