Web Forms 2.0 demo page

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:

<input type="text" maxlength="6"/>
          (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>
        
<input type="tel" pattern="[0-9]{10}" name="tel" title="Phone Number?!?!"/>
          (css) [autofocus] {background:blue;}  
          <input type="password" placeholder="Password"/>
        
          (css) [required] {border:2px dotted green;}
          (css) input:required {outline: 2px solid #f00;color:red;}  
          <input type="url" id="url" name="earl" required />
        
<input type="email" placeholder="foo@bar.com" />
          (css) [type=datetime] {font: normal 14px 'Helvetica Neue';color:red;}
          <input type="datetime" />
          
          (css) [type=date] {font: normal 15px 'Hobo Std';}
          <input type="date" />
          
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime-local" />
<input type="number" min="99" max="101"/>
        <input type="range" required name="range" />
        <output onforminput="value=range.value">0</output>
<input type="color"/>
<input type="checkbox"/>
<input type="radio"/>
<input type="file" multiple />

Copyright © 2009 Michael Taylor and licensed under the MIT license.