Améliorez vos formulaires avec HTML5!

By tglasgow

L'HTML n'a pas vraiment été mis à jour depuis la sortie d'HTML version 4 qui remonte à 1998. Cependant, le groupe de travail WHATWG a travaillé sur l'HTML depuis 2004 puis transmis au W3C qui prend la forme des spécifications HTML5 du W3C. Cet article présente certaines des nouvelles fonctionnalités de la proposition du chapitre sur les formulaires d'HTML5: Formulaires Web 2. Opera supporte les Formulaires Web 2 depuis la Version 9.5 et les suivantes. Pour le tester, téléchargez la dernières version d'Opera.

autofocus et omission d'attributs

Les nouveaux Formulaires Web vous permettent de faire de la validation et un nombre d'autres fonctionnalités d'une manière plus déclarative, simplifiant l'édition. Prenons en exemple le code de démonstration suivant:

<form action="" method="get">
 <p><label>Search: <input name=search type="text" id="search"></label></p>
 <script> document.getElementById('search').focus() </script>
 <!-- the rest of the form -->
</form>

Ceci peut être réécrit en utilisant la nouvelle fonctionnalité du formulaire comme ceci:

<form>
 <p><label>Search: <input name=search autofocus></label></p>
  <!-- the rest of the form -->
</form>

Une partie du code a été retiré de l'exemple et un nouvel attribut, autofocus, a été ajouté. L'attribut autofocus a efficament retiré le besoin de l'élément script et de l'attribut id de l'input qui était utilisé par le script. L'attribut method de l'élément form peut être omis, car le formulaire fera une requête GET par défaut. Similairement, les contrôles input sont de type text par défaut. Conformément aux Formulaires Web 2, vous pouvez aussi omettre l'attribut action quand il est définit comme chaîne de caractères vide. En effet, cela vous donnera le même résultat.

Validation de formulaire

De nos jours, les développeurs web utilisent des scripts astucieux pour effectuer la validation côté client. Bientôt vous pourrez simplement écrire la chose suivante:

<form>
 <p><label>Name: <input name=name required></label></p>
 <p><label>E-mail: <input name=email type=email required></label></p>
 <p><label>URL: <input name=url type=url></label></p>
 <p><label>Comment: <textarea name=comment required></textarea></label></p>
 <p><input type=submit value=React!></p>
</form>

J'irai jusqu'à dire, que c'est presque aussi lisible que de l'anglais! Quand l'utilisateur tente de soumettre le formulaire, le navigateur vérifie si toutes les conditions sont remplies et si c'est le cas, il soumet le formulaire, sinon il affiche un message d'erreur à l'utilisateur. Évidemment, vous devez toujours avoir une validation côté serveur, mais dans le cas où le navigateur supporte les nouveaux formulaires, cela pourrait bien éviter à votre utilisateur quelques va-et-vient. C'est meilleur pour l'ergonomie et votre bande passante.

Ce que j'ai présenté dans l'exemple ci-dessus est une partie des nouveaux contrôles: email et url. Et également un nouvel attribut disponible à tous les contrôles du formulaire: required. En plus de ceux-là, les Formulaires Web 2 incluent également des contrôles pour les dates, l'heure et les nombres.

Mise en forme des contrôles

Si vous voulez mettre en forme un contrôle requis (<input required>), ceci est plutôt trivial en utilisant certaines de nouvelles pseudo-classes:

input:required { background:yellow }

De la même manière, pour les contrôles désactivés, les cases à cocher cochées, le bouton de soumission par défaut, les contrôles en lecture seule, etc:

input:disabled { ... }
input:checked + label { ... }
input[type=button]:default { ... }
input:read-only { ... }

Cet exemple de formulaire montre ces fonctionnalités en action.

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.