Notes:

All tested on OSX 10.6.1. Obviously I've left out most of the standard, and therefore boring, inputs.

Currently, this page is only interesting in Opera 9.60+ (earlier?) 9.0+ (thanks @FataL), and partially-so in Safari 3+ / Chrome.

Safari / Chrome: autofocus (4+), type=search, placeholder, maxlength, :required css pseudo-selector (4+), type=range—but can't hook into <output>.

Opera: everything else, for the most part, except for autofocus, placeholder, a chrome style for type=search.

Both Opera and Safari / Chrome have type=color implemented—but there is no fancy UI.

Click submit, or hit enter to see validation errors in Opera. Client-side validation will only work for inputs that have a name:

Bruce Lawson writes: forms with required attrib. need name attrib too, otherwise they don't take part in submission so can't be checked (thanks!). See also his html5 forms demo page.

Demo:

Text: <input type="text" maxlength="6"/>

Search:

          (css) [list] {background:#ff0;}
          <input type="search" autofocus list="search-suggestions"/>
          <datalist id="search-suggestions">
            <option label="DM" value="Depeche Mode">
            <option label="Moz" value="Morrissey">
            <option label="NO" value="New Order">
            <option label="TC" value="The Cure">
          </datalist>

Telephone: <input type="tel" pattern="[0-9]{10}" name="tel" title="Phone Number?!?!"/>

Password:


                  (css) [autofocus] {background:blue;}  
          <input type="password" placeholder="Password"/>

URL:


                  (css) [required] {border:2px dotted green;}
          (css) input:required {outline: 2px solid #f00;color:red;}  
          <input type="url" id="url" name="earl" required />

Email: <input type="email" placeholder="foo@bar.com" />

Datetime:

          (css) [type=datetime] {font: normal 14px 'Helvetica Neue';color:red;}
          <input type="datetime" />

Date:

          (css) [type=date] {font: normal 15px 'Hobo Std';}
          <input type="date" />

Month: <input type="month" />

Week: <input type="week" />

Time: <input type="time" />

Date-Time Local: <input type="datetime-local" />

Number: <input type="number" min="99" max="101"/>

Range: 0

        <input type="range" required name="range" />
        <output onforminput="value=range.value">0</output>

Color: <input type="color"/>

Checkbox: <input type="checkbox"/>

Radio: <input type="radio"/>

Select:

File: <input type="file" multiple />