Quelques attributs HTML 5 pour améliorer vos formulaires

HTML 5 apporte de nouveaux éléments et attributs pour faciliter la conception de formulaire.Icône HTML 5 Dans cet article, nous allons voir quelques attributs qui peuvent se révéler très pratiques. Attention toutefois, la compatibilité avec les navigateurs reste limité.

  • Firefox : 4+
  • Internet Explorer : 10+
  • Safari : 5+
  • Chrome : 10+

 

L'attribut "required"  permet de rendre un champ obligatoire

Le navigateur doit permettre la validation du formulaire que si les champs ayant l'attribut "required" sont correctement remplis.

Ex :

<label>Mail : </label><input type="email" name="email" size="50" required/><br />

Résultat si le champ est vide lors de la validation :

Attribut required si le champ reste vide

Résultat si le champ ne correspond pas au type de l'input :

Attribut required html 5

 

L'attribut "multiple" autorise la saisie de plusieurs valeurs

Cet attribut permet à l'utilisateur de saisir plusieurs valeurs dans le même champ.

Ex :

<label>Mail : </label><input type="email" name="email" size="50" required multiple />

 

L'attribut "autocomplete" pour permettre ou non l'autocomplétion du navigateur

Cet attribut permet de définir la manière dont l'autocomplétion du navigateur va agir. Il existe deux possibilités : "on" et "off".

Ex :

<label>Recherche : </label><input type="search" name="search" autocomplete="on" />

 

L'attribut autofocus pour donner le focus à un champ au chargement de la page

L'attribut "autofocus" permet de placer le curseur de l'utilisateur directement dans le champs souhaité et cela dés le chargement de la page.

Ex :

<label>Recherche : </label><input type="search" name="search" autofocus />

Attribut autofocus html 5

 

L'attribut "placeholder" pour afficher un texte indicatif dans un champ

L'attribut "placeholder" permet d'afficher un texte indicatif dans un champ de votre formulaire. Ce texte disparait lorsque l'internaute obtient le focus. Cet attribut permet de donner une indication supplémentaire sur ce que l'utilisateur doit saisir.

Ex :

<label>Newsletter :&nbsp;</label><input type="email" size="40" placeholder=" Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. " />

Exemple de mise en place de l'attribut placeholder dans un formulaire