Skip to content

Chapter 2 of 8

Forms, Validation & Accessibility

HTML5 dramatically expanded form capabilities beyond simple text and password fields. Modern input types include `email` and `url` for automatic format validation, `number` with built-in spinners, `range` for slider controls, `date`, `time`, and `datetime-local` for date and time entry, `color` for a native color picker, `search` for search fields, and `tel` for telephone numbers. The `required` attribute marks a field as mandatory so the browser performs built-in validation and displays a default error message if the field is empty when the form is submitted. For more precise control, the `pattern` attribute applies a regular expression that the entire input value must match, with the `title` attribute providing a human-readable hint that the browser displays when validation fails. The `accept` attribute on file inputs hints which file types the user should be able to select (such as `accept="image/*"` for any image), though it is only a hint and server-side validation remains essential.

Labels tie text descriptions to form controls and are crucial for accessibility. Screen readers announce the label when a user focuses the input, making forms navigable for users who cannot see the screen. The two ways to associate a label with an input are referencing the input's `id` via the `for` attribute, or wrapping the input inside the label itself. Related controls should be grouped with `

` and described with a ``, which propagates a `disabled` attribute to all contained controls and gives screen readers a consistent caption to announce. The `` element represents the result of a calculation, typically wired to one or more inputs via the `for` attribute, while `` provides a list of suggested values for an input without forcing the user to pick one. Other useful form attributes include `autocomplete` for telling the browser what kind of saved value to fill in (such as `email`, `cc-number`, or `new-password`), and explicitly setting `type="button"` on buttons that should not submit their parent form, since the default `type="submit"` is a common source of unexpected submissions. The `enctype` attribute on the `
` itself specifies how data is encoded, with `application/x-www-form-urlencoded` as the default and `multipart/form-data` required for file uploads.

Accessibility extends well beyond forms. The `alt` attribute provides alternative text for images, which screen readers read aloud for visually impaired users, displays when the image fails to load, and helps search engines understand the image content; decorative images should use an empty `alt=""` so screen readers skip them entirely. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility when native HTML semantics are insufficient, with `aria-label` providing an accessible name, `aria-hidden` hiding elements from assistive technology, and `aria-live` announcing dynamic content changes (`polite` waits for the user to finish before announcing, while `assertive` interrupts immediately for urgent updates). ARIA live regions are essential for toast notifications, chat messages, form validation feedback, and search results, because without them screen reader users miss updates that do not change focus. The `role` attribute defines an element's purpose, but a `

` looks like a button to screen readers yet lacks built-in keyboard activation on Enter and Space, disabled handling, and form submission semantics, so a real `
All chapters
  1. 1Foundations of HTML Document Structure
  2. 2Forms, Validation & Accessibility
  3. 3CSS Selectors & the Cascade
  4. 4The Box Model, Display & Positioning
  5. 5Flexbox & CSS Grid Layout
  6. 6Responsive Design, Units & Custom Properties
  7. 7Animations, Transforms & Visual Effects
  8. 8Performance, Loading & Advanced HTML

Drill it

Reading is not remembering. These come from the HTML CSS Fundamentals deck:

Q

What is the purpose of HTML5 semantic elements?

HTML5 semantic elements provide meaningful structure to web pages. They describe the role of their content rather than just its appearance. Examples include &lt...

Q

What is the difference between <section> and <div>?

<section> is a semantic element that represents a thematic grouping of content, typically with a heading. <div> is a non-semantic generic container...

Q

What is the <article> element used for?

The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:Blog postsNews articlesF...

Q

What is the purpose of the <nav> element?

The <nav> element represents a section of a page that contains navigation links, either within the site or to other sites. It is intended for major naviga...