Attributs de champ

Différents attributs

Les différents champs d'entrée de données peuvent recevoir différents attributs pour leur donner des effets particuliers. Ces attributs sont parfois uniquement disponible pour certains types de champs alors que d'autres peuvent être placé sur n'importe quel champ.

Cette page fait un court résumé des différents attributs que vous pouvez retrouver sur les champs d'entrée.

Longueur maximale

Pour les champs de texte, il est possible de spécifier une longueur maximale de texte en nombre de caractères. Si l'utilisateur essai de mettre plus de texte que la longueur maximale indiqué, le navigateur empêchera l'entrée de nouveaux caractères.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

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

Valeur minimum

Pour les champs permettant de choisir un nombre, il est possible de spécifier une valeur minimum pouvant être sélectionné. Si l'utilisateur essai de mettre une valeur plus petite, le navigateur l'en empêchera.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• <input> de type number
• <input> de type range

Valeur maximum

Pour les champs permettant de choisir un nombre, il est possible de spécifier une valeur maximum pouvant être sélectionné. Si l'utilisateur essai de mettre une valeur plus grande, le navigateur l'en empêchera.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• <input> de type number
• <input> de type range

Valeur d'incrémentation

Pour les champs permettant de choisir un nombre, il est possible de spécifier une valeur d'incrément. Ainsi, si on augmente ou diminue le nombre à partir du champ, on devrait voir qu'il "saute" par dessus certains nombres.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• <input> de type number
• <input> de type range

Texte temporaire

Pour les champs contenant du texte ou des nombres, il est possible de spécifier un texte temporaire qui sera affiché lorsque le champ est vide. Dès que le champ contient quelque chose, ce texte disparaîtra. Cet attribut est pratique pour donner un indicatif de comment remplir le champ à l'utilisateur.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• <input> de type text
• <input> de type tel
• <input> de type password
• <input> de type email
• <input> de type url
• <input> de type number
• <textarea>

Coché par défaut

Pour les champs de case à cocher, comme les inputs de type checkbox et radio, nous pouvons cocher la case par défaut au chargement de la page. Pour se faire, il suffit simplement d'ajouter l'attribut checked à l'input voulu.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• <input> de type checkbox
• <input> de type radio

Nom de champ

Un peu comme pour le champ de bouton radio, il est possible d'utiliser l'attribut name sur les autres champs pour leur donner un nom en arrière-plan. Cela sera pratique plus tard lorsque nous essayerons de prendre les valeurs des champs et d'en faire quelque chose en Javascript. Il est généralement recommandé de mettre un nom de champ à chaque champ que vous avez dans votre page.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• Tous les <input> qui ne sont pas de type submit, button ou reset
• <textarea>
• <select>

Lecture seule

Si vous voulez qu'un utilisateur puisse sélectionner et copier le texte d'un champ, mais ne puisse pas le modifier, on utilisera l'attribut readonly. Cet attribut empêchera l'utilisateur de modifier les champs indiqués.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• Tous les <input>
• <textarea>
• <select>

Désactivé

Si vous voulez désactiver un champ pour empêcher un utilisateur de l'utiliser, vous pouvez y mettre l'attribut disabled. Cet attribut indique qu'un champ est désactivé en empêchant l'utilisateur de le modifier, mais aussi en stylant différemment les champs. C'est une façon facile d'indiquer à l'utilisateur que le champ ne peut pas être utilisé.

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• Tous les <input>
• <textarea>
• <select>

Focus automatique

Lors du chargement de la page, si vous voulez que le focus soit automatiquement mis sur un champ en particulier, vous pouvez ajouter l'attribut autofocus. Si vous raffraîchissez la page, vous remarquerez que le focus est mis automatiquement dans le champ d'exemple ci-dessous.

Le focus est un terme utilisé pour les éléments avec lesquels l'utilisateur peut intéragir dans une page web. L'élément qui a le focus peut être intéractif avec le clavier de l'ordinateur. Par exemple, si on clique sur un champ de texte, on y met le focus puisqu'on peut écrire dedans avec notre clavier.

Une seul élément à la fois peut avoir le focus dans notre page web. Par conséquant, une seule balise dans votre page web peut avoir l'attribut autofocus

Voici comment l'utiliser:

Cet attribut est applicable aux balises champs suivants:

• Tous les <input>
• <textarea>
• <select>