Tous les objets de formulaire en HTML 5

HTML 5 permet de réaliser des interfaces utilisateurs complètes grâce à un ensemble de widgets plus étendus, objets de formulaire et éléments interactifs.

La prévisualisation permet de vérifier directement la compatibilité avec chaque navigateur.

Objet
Prévisualisation
Code HTML 5
Texte simple
<label>Texte</label>
Bouton simple
<input type="button" name="nom" value="Bouton">
Bouton image
<input type="image" src="image/bimage.jpg">
Champ de texte
<input type="text" name="texte" value="rien">
Mot de passe
<input type="password" name="monpass" value="12345">
Date
<input type="date" name="d" value="<?php echo $today?>">
Date et temps
<input type="datetime" name="dt" value="<?php echo $now?>">
Time
<time>2013-06-27</time>
Nombre
<input type="number" name="nombre" value="12345">
Couleur
<input type="color" name="couleur" value="">
Champ de recherche
<input type="search" name="" list="datalist" value="">
Data
Dix
<data value="10">Dix</data>
Case à cocher
<input type="checkbox" name="checkbox1" value="checkbox">
Groupe radio

<label>Choix 1
<input type="radio" name="radio1" value="radio1">
</label>
<label>Choix 2
<input type="radio" name="radio1" value="radio2">
</label>
Zone de texte
<textarea name="textarea">contenu</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>
Liste de données
S'utilise avec input
<datalist id="identifieur">
<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 liste
<select name="select2" size="3">
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Menu
  • Nouveau
  • Ouvrir
  • Sauver
    •
    <menu type="context">
    <li>Nouveau</li>
    <li>Ouvrir</li>
    <li>Sauver</li>
    </menu>
    Toolbar
    • <menu type="toolbar">
    <li><button type="button" onclick="fnew()">Nouveau</button></li>
    <li><button type="button" onclick="fopen()">Ouvrir</button></li>
    <li><button type="button" onclick="fsave()">Sauver</button></li>
    </menu>
    Combobox
    <input type="text" list="comboid">
    <datalist id="comboid">
    <option value="0">
    <option value="-30">
    <option value="30">
    <option value="+50">
    </datalist>
    Fichier
    <input type="file" name="file">
    Image et légende
    Caption
    <figure>
    <img src="image/image.gif">
    <figcaption>Caption</figcaption>
    </figure>
    Fieldset
    Titre

    ...Contenu...
    <fieldset> <legend>Titre </legend>
    <p>Contenu</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
    Présentation
    terme
    définition
    ...
    <details>
    <summary> Présentation </summary>
    <dl>
    <dt>terme</dt>
    <dd>définition</dd>
    ...
    </dl>
    </details>
    Bouton d'envoi
    <input type="submit" name="envoi" value="Envoyer">

    Plus d'information