Advanced Forms: datalist, new input types, validation attributes

13 min read

HTML5 Form Power Features

HTML5 added a wide range of input types and validation attributes that reduce the need for JavaScript. Combining them gives users a native, accessible experience with minimal code.

Newer Input Types

html

<!-- Colour picker -->
<label for="brand-color">Brand colour</label>
<input type="color" id="brand-color" name="color" value="#ff6600" />

<!-- Range slider -->
<label for="volume">Volume: <output id="vol-out">50</output></label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" />

<!-- Search field (may show clear button) -->
<input type="search" name="q" placeholder="Search..." />

<!-- Time and datetime-local -->
<input type="time" name="meeting-time" min="09:00" max="18:00" />
<input type="datetime-local" name="event-start" />

<!-- Telephone (shows numeric pad on mobile) -->
<input type="tel" name="phone" pattern="[0-9]{10}" title="10-digit phone number" />

datalist: Autocomplete Suggestions

A <datalist> provides a list of suggested values for a text input. The user can type freely or select a suggestion — unlike <select>, they are not restricted to the list.

html

<label for="framework">Favourite framework</label>
<input
  type="text"
  id="framework"
  name="framework"
  list="frameworks-list"
  placeholder="Start typing..."
/>
<datalist id="frameworks-list">
  <option value="React" />
  <option value="Vue" />
  <option value="Svelte" />
  <option value="Angular" />
  <option value="Next.js" />
</datalist>

Validation Attributes

required — The field must have a value before the form submits.
min / max — Numeric, date, or time bounds.
minlength / maxlength — Character count limits for text fields.
pattern — A regular expression the value must satisfy. Add title to show a human-readable error.
step — Numeric or time increment (e.g. step="0.01" for currency, step="900" for 15-minute intervals).
novalidate on <form> — Disables all browser validation (useful when you handle validation with JavaScript).

Browser validation is a UX convenience, not a security boundary. A determined user can remove the required attribute in DevTools or send a raw HTTP request. Always re-validate on the server.

Ready to test yourself?

Practice HTML— quiz & coding exercises