UX Design and Development course

HTML5 Form Semantics

COLOR

<input type="color" name="color">

Date and Time

date: 2012-05-21

datetime: 2012-05-24T12:00:00+01

month: 2012-05

time: 12:00:00

week: 2012-W21

<input type="datetime-local" name="event">

Email

<input type="email" name="email" multiple>

Number

<input type="number" name="cost" min="10" max="100">

Range

<input type="range" name="rating" min="0" max="10">

Telephone

<input type="tel" name="phone">
<input type="search" name="query">

URL

<input type="url" name="website">

Datalist

<input type="text" name="city" list="cities">
<datalist id="cities">
  <option value="Chicago">
  <option value="Los Angeles">
  <option value="New York">
</datalist>

Automation

Autocomplete

<form action="foo" autocomplete="off">
<input type="text" name="destination" autocomplete="off">

Autofocus

<input type="text" name="destination" autofocus>

UX Hinting

Placeholder

<input type="text" name="destination" placeholder="Chicago">

Title

<input type="text" name="destination" title="Please enter your destination.">

Disabled inputs

Inputs

<input type="text" name="destination" disabled>

Groups of inputs

<fieldset disabled>
  <input type="text" name="destination">
  <input type="number" name="cost">
</fieldset>

Incremental steps

Numbers

<input type="number" name="cost" min="10" max="100" step="2">
<input type="range" name="rating" min="0" max="10" step=".5">

Time

<input type="date" name="event" min="2012-05-01" max="2012-08-32" step="2">

Validations

Required

<input type="text" name="destination" required>

Pattern

<input type="tel" name="phone" pattern="^[0-9]+[\- ]*[0-9]+$">

Maxlength

<input type="url" name="website" maxlength="100">