Back to subject
HTML5/HTML Form Validation

Help the Browser Help the User

Practical lesson

Let's add browser-side validation rules to a form and read what each rule checks.

- required tells the browser that a value must be provided before submission. - type="email" asks for an email-like value and can trigger browser validation. - minlength and maxlength control the allowed length of text. - min and max can set numeric limits for supported input types. - pattern can require a value to match a regular expression pattern when that input type supports it. - Use clear labels and instructions so the user knows what the field expects before they submit. - The browser can show validation messages, but server-side validation is still needed because client-side checks can be bypassed. - Do not use validation rules that are stricter than the real data requirements without a good reason.

The practical lesson is that HTML can provide useful first-line checks, but validation is part of a larger form system rather than a security boundary.

Try it yourself
Code

Starter example

Code
<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

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

  <button type="submit">Send</button>
</form>
Live preview