Niveau : Confirmé

Formulaires HTML5 : placeholder, required, pattern et validation

HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript.

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (247022 lectures)
Tags : formulaire, html5, placeholder, pattern, required

Sommaire


Un indice grâce à placeholder

placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire.
C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire (ou commence à écrire dedans si vous êtes sous Webkit).

Mise en place

Ce comportement a très longtemps été mis en place grâce à JavaScript et des techniques dans ce genre :

<input type="text" onfocus="javascript: this.value=''" onblur="this.value='Entrez un pseudo'" value="Entrez un pseudo">

Avec l'arrivée de HTML5, la syntaxe se simplifie pour donner :

<input type="text" placeholder="Entrez un pseudo">

La présence d'un placeholder ne vous dispense pas de renseigner un label pertinent. Bien au contraire, le placeholder n'est qu'un indice supplémentaire, il ne doit pas être indispensable.

Démonstration

Éléments compatibles

L'attribut placeholder peut être placé sur les éléments :

  • <input> : de type text, search, password, url, tel, email
  • <textarea>

Compatibilité de l'attribut placeholder

Navigateurs Versions
Firefox Firefox 4.0+
Opera Opera 11.01+
Google Chrome Chrome 3.0+
Safari Safari 3.0+
Internet Exlorer Internet Explorer 10+

Styler le placeholder

Ce contenu éphémère peut être distingué du contenu entré par l'utilisateur grâce à une pseudo-classe (ou pseudo-élément) CSS.
Le souci que l'on va rencontrer, c'est la diversité de la syntaxe de cette pseudo-classe non normalisée :

::-webkit-input-placeholder {}
:-moz-placeholder {}

Le flou actuel de cette syntaxe nous empêche de voir clairement si nous avons à faire à une pseudo-classe ou un pseudo-élément, les deux cas seraient défendables.
Bien que supporté par Opera, le placeholder n'est pas stylable sur ce navigateur.

À l'heure actuelle, les styles applicables au placeholder sont très limités, ils se concentrent majoritairement sur des styles de texte (text-decoration, font-style, color).

Alternatives pour le support de placeholder

Tous les navigateurs ne se comportent pas de la même manière : compréhension de l'attribut, possibilité de modification des styles via CSS, etc.

  • jQuery Placeholder : Permet l'attribution du comportement du placeholder ainsi que d'une classe CSS permettant d'uniformiser la méthode de sélection.
  • Placeholder.js : propose une alternative compatible jQuery ou en JavaScript pur.