Web Forms 2.0 demo page


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.


<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">
<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.