formulaires HTML5
<form id="form1" action="do1.php">
<input type="submit" value="action 1"/>
</form>
<form id="form2" action="do2.cgi">
<input type="submit" value="action 2"/>
</form>
<!-- Cette entrées concerne les deux formulaires -->
<input type="text" form="form1 form2"/>
<input type="text"
name="le-prenom" list="prenoms"/>
<datalist id="prenoms">
<option value="Alain"/>
<option value="Robert"/>
<option value="Jean"/>
<option value="Zoé"/>
</datalist>Ce mode est actuellement réalisé par du javascript. Dans le cas de listes dynamiques il faudra continuer à réaliser ce genre de script, mais leur rôle se confinera à produire la liste des options, le rendu étant réalisé par le navigateur.
<input type="datetime" value="1989-12-22T20:35:59Z"/>Bien qu'aujourd'hui ce type d'entrée n'apporte pas un grand confort à l'utilisateur, il est très probable, voire certain que dans un avenir proche les différents navigateurs du marché proposeront des interfaces conviviales pour le choix d'une heure et/ou d'une date.
Les attributs min et max sont applicables à toutes les entrées temporelles.
<input type="date" value="1989-12-22"/>
<input type="time" value="20:30:05" max="23:00"/><input type="month" value="1989-12"/>
<input type="week" value="1989-W51" min="1989-W03"/><input type="number" value="12"/>
<input type="range" value="23.5" min="2.9" max="40.4"/><input type="email" value="moi@mon-site.com"
placeholder="veuillez indiquer un E-mail valide"/>L'attribut pattern est également applicable aux entrés de type text et password permettant ainsi de leur donner des contraintes de filtrage comme par exemple imposer la présence de chiffres et de lettres sur un mot de passe.
L'attribut multiple est également applicable aux entrés de type file permettant de saisir plusieurs fichiers en une seule action, dans le cas de la récupération par du PHP il faudra indiquer un nom de champ du type nom_fichiers[] afin de récupérer un tableau de fichiers.
<input type="tel" pattern="^[0-9]{10}$"/><-- numéro à 10 chiffres -->
<input type="url" pattern="^http://.*$"/><-- URL HTTP -->
<input type="search" pattern="[a-z]*"/> <-- des minuscules -->À priori la seule différence comportementale entre text et search ne devrait concerner que la mise en forme qui devrait être laissé à la charge du client web, Les éléments de type search devrait être en harmonie avec les zones de saisie du système d'exploitation ou du navigateur.
<input type="color" value="#FFDD88"/> <-- par défaut orange -->Si aujourd'hui les navigateurs ne présentent que des interfaces basiques pour la saisie d'une couleur, il ne fait aucun doute que d'ici la finalisation de la norme les interfaces évolueront et présenteront une fenêtre permettant de choisir une couleur dans une palette ou par des curseurs. Citons cependant le navigateur Opera Qui reconnaît déjà ce type d'entrée et propose un choix à l'aide d'une roue de couleurs.
<form oninput="x.value=a.value * b.value">0
<input type="number" name="a" value="12"/> *
<input type="number" name="b" value="31"/> =
<output name="x" for="a b"/>
</form>
Grâce au type implicite text il est permis d'utiliser dès aujourd'hui les nouveaux types introduits par HTML 5, au pire le navigateur présentera une zone de saisie sans contraintes. Bien entendu ce sera au serveur de vérifier la conformité du champs saisi, mais cette vérification est à faire dans tous les cas car le formulaire soumis peut ne pas provenir d'un navigateur web.
Les attributs min, max et step sont utilisables pour toutes les entrées relatives à une grandeur telles que les dates, les nombres...
Il est préférable d'utiliser autofocus plutôt que de recourir à du javascript car les navigateurs permettront aux utilisateurs d'invalider ce comportement qui pour des utilisateurs avertis est souvent nuisible, alors que la neutralisation de ce comportement réalisé par du javascript impose de désactiver tout le javascript ce qui peut être lourd de conséquences.