Form Validation

Long before JavaScript gets involved, a browser can already catch a lot of bad input on its own — empty required fields, malformed emails, numbers out of range — using nothing but attributes on the input itself.

required

Add required to an input and the browser refuses to submit the form until it's filled in, showing its own built-in message. Try hitting submit below without typing anything:

Try it yourself
Result

Shape and range checks

  • minlength / maxlength — limits on text length.
  • min / max — limits for type="number" or type="date" inputs.
  • pattern — a regular expression the value must match, for anything not covered by a built-in type.
  • type="email" / type="url" — the browser checks the value roughly matches an email address or a URL, without you writing a pattern yourself.

Here's pattern enforcing a simple format — three letters:

Try it yourself
Result
Note: this kind of validation is a convenience, not a security boundary. Anyone can submit data straight to a server without ever loading your HTML form — so whatever receives the data on the other end has to check it again regardless of what the browser already caught.

Course complete

That covers the fundamentals — document structure, elements, attributes, headings and paragraphs, links, images, lists, tables, forms, semantic elements, div/span, classes and ids, comments and entities, iframes, media, and validation. Ready to add styling? Continue to the CSS Course.

PreviousAudio & Video