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 Text <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 2013-06-27 <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 Choice 1

Choice 2 <label>Choice 1

<input type="radio" name="radio1" value="radio1">

</label>

<label>Choice 2

<input type="radio" name="radio1" value="radio2">

</label> Textarea content <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 Alpha Beta Delta <select name="select">

<option>Alpha</option>

<option>Beta</option>

<option>Delta</option>

</select> Select list Alpha Beta Delta <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 New Open Save <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