All form objects in HTML 5

HTML 5 allows to design complete user interfaces with a more extensive set of widgets, form objects and interactive elements.

The preview allows to directly verify the compatibility with every browser.

Object
Preview
HTML 5 code
Label
<label>Texte</label>
Button
<input type="button" name="name" value="Bouton">
Image button
<input type="image" src="image/bimage.jpg">
Text field
<input type="text" name="text" value="empty">
Password
<input type="password" name="monpass" value="12345">
Date
<input type="date" name="date" value="<?php echo $today?>">
Date and time
<input type="datetime" name="time" value="<?php echo $now?>">
Time
<time>2013-06-27</time>
Number
<input type="number" name="num" value="12345">
Color
<input type="color" name="color" value="">
Search input
<input type="search" name="" list="datalist" value="">
Data
Dix
<data value="10">Ten</data>
Check box
<input type="checkbox" name="checkbox1" value="checkbox">
Radio group

<label>Choice 1
<input type="radio" name="radio1" value="radio1">
</label>
<label>Choice 2
<input type="radio" name="radio1" value="radio2">
</label>
Textarea
<textarea name="textarea">content</textarea>
Range
<input type="range" min="-100" max="100" value="0" step="2" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="+50">
</datalist>
Data list
To be used with input
<datalist id="identifier">
<option value="1">
<option value="2">
<option value="3">
</datalist>
Select
<select name="select">
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Select list
<select name="select2" size="3">
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Menu
  • New
  • Open
  • Save
    •
    <menu type="context">
    <li>New</li>
    <li>Open</li>
    <li>Save</li>
    </menu>
    Toolbar
    • <menu type="toolbar">
    <li><button type="button" onclick="fnew()">New</button></li>
    <li><button type="button" onclick="fopen()">Open</button></li>
    <li><button type="button" onclick="fsave()">Save</button></li>
    </menu>
    Combo box
    <input type="text" list="comboid">
    <datalist id="comboid">
    <option value="0">
    <option value="-30">
    <option value="30">
    <option value="+50">
    </datalist>
    File upload
    <input type="file" name="file">
    Image & caption
    Caption
    <figure>
    <img src="image/image.gif">
    <figcaption>Caption</figcaption>
    </figure>
    Fieldset
    Title

    ...Content...
    <fieldset> <legend>Title </legend>
    <p>Content</p>
    </fieldset>
    Output
    <output onforminput="value = 2 + 2"></output>
    Meter
    12 units
    <meter min=0 max=24 value=12>12 units</meter>
    Progress
    0%
    <progress id="prog" max=100>
    Summary
    Overview
    term
    definition
    ...
    <details>
    <summary> Presentation </summary>
    <dl>
    <dt>term</dt>
    <dd>definition</dd>
    ...
    </dl>
    </details>
    Submit button
    <input type="submit" name="submit" value="Submit">

    More