Ukázka možností Web Forms 2.0

V době vytvoření (březen 2007) tato stránka funguje pouze v Opeře 9.x. Na platformě Mac OS X pro 100% funkčnost doporučuji použít aktuální weekly build (testováno s buildem 3659). Všechny zde předváděné konstrukce jsou součástí návrhu specifikace Web Forms 2.0 od WHATWG.

Výběr času a kalendářních dat

<input type="datetime-local">
<input type="week">
<input type="time" min="09:00" max="17:00" value="09:00" step="900">

Zadávání e-mailů

Pokuste se zadat špatně formátovanou e-mailovou adresu.

<input type="email">

Zadávání URL

Pokuste se zadat špatně formátovanou URL.

<input type="url">

Povinné položky formuláře

Zvýrazněné položky formuláře je nutné vyplnit.

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

Kontrola zadání dle vzoru

<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
       title="Telefonní číslo musí být ve tvaru 'XXX-XXX-XXX'.">

Zadávání čísel a vypočtené položky formuláře

Procvičíme si násobilku: × = 12 
<input type="number" id="a">
<input type="number" id="b">
<output onforminput="value = a.value * b.value">12</output>

Výběr z rozsahů

21 °C 
<input type="range" value="21" id="temperature" min="15" max="35" step="1">
<output onforminput="value = temperature.value + ' °C'">21 °C</output>

Opakující se sekce formulářů

Vyplňte jména max. 5 osob:

 
<tr id="people" repeat="template" repeat-max="5">
  <td><label>Jméno: <input name="person[people].firstname" type="text"></label></td>
  <td><label>Příjmení: <input name="person[people].lastname" type="text"></label></td>
  <td><button type="remove">Smazat osobu</button></td>
  <td><button type="move-up">↑</button></td>
  <td><button type="move-down">↓</button></td>
</tr>
<tr>
  <td><button type="add" template="people">Přidat osobu</button></td>
</tr>