Valeur par défaut dans un input en HTML 5

Parmi les nouveautés apparues avec le HTML5, on trouve un attribut bien pratique qui permet de mettre une valeur par défaut sur vos champs de texte. Cet attribut c’est placeholder. L’utilisation de celui-ci présente deux principaux avantages par rapport à l’alternative javascript. Tout d’abord le texte est indépendant de la valeur de l’input (si le texte est affiché, le champ est considéré comme vide). L’autre avantage est que cet attribut est également disponible pour les champs de type password, ce qui permet d’afficher un texte en clair à l’intérieur (cf: exemple).

Exemples

Champ classique :
<input type="text" placeholder="Texte par défaut" />

Mot de passe :
<input type="password" placeholder="Texte par défaut" />

Commencez à taper un texte dans un des champs ci-dessous.

Champ classique :

Mot de passe :

Personnalisation

Pour l’instant seuls webkit et mozilla permettent de personnaliser le style du texte par défaut.

/* Webkit (google chrome ou safari) */
#input::-webkit-input-placeholder { color:red; }

/* Mozilla */
#input::-moz-placeholder { color:red; }

Laisser une réponse