HTML - Attributs des éléments de saisie
Attributs d'entrée courants
type
L'attribut type définit le type d'élément d'entrée, comme texte, mot de passe, case à cocher, bouton radio, et plus. Il détermine l'apparence et le comportement du champ de saisie. La configuration
Conseil
<input type="password">masquera les caractères saisis par l'utilisateur, tandis que
Conseil
<input type="checkbox">crée une case à cocher qui peut être activée ou désactivée.
name
L'attribut name donne un nom à l'élément d'entrée. Il est utilisé pour identifier l'élément lors de l'envoi des données du formulaire au serveur. L'attribut name est important pour le traitement côté serveur et la gestion des données. Il permet d'accéder à la valeur du champ de saisie en utilisant le nom comme référence.
value
L'attribut value définit la valeur initiale de l'élément d'entrée. Il peut être pré-rempli avec une valeur par défaut ou laissé vide pour que l'utilisateur puisse saisir.
Conseil
<input type="text" value="John Doe">pré-remplirait le champ de texte avec la valeur "John Doe". L'attribut value est également utilisé pour spécifier la valeur des boutons radio et des cases à cocher.
placeholder
L'attribut placeholder fournit un indice ou un exemple de texte à l'intérieur du champ de saisie. Il est affiché lorsque le champ est vide et disparaît lorsque l'utilisateur commence à taper. Les placeholders aident à guider les utilisateurs sur le type d'information attendu dans le champ de saisie.
Conseil
<input type="email" placeholder="Entrez votre email">afficherait "Entrez votre email" comme texte de placeholder.
required
L'attribut required spécifie que le champ de saisie doit être rempli avant l'envoi du formulaire. Si l'utilisateur tente d'envoyer le formulaire sans saisir de valeur dans un champ obligatoire, le navigateur affichera un message d'erreur et empêchera l'envoi du formulaire. Cet attribut aide à vérifier la saisie de l'utilisateur et à s'assurer que les informations requises sont fournies.
readonly
L'attribut readonly rend le champ de saisie en lecture seule, empêchant l'utilisateur de modifier sa valeur. Cependant, la valeur peut toujours être sélectionnée et copiée. Les champs en lecture seule sont utiles pour afficher des valeurs pré-remplies ou calculées qui ne doivent pas être modifiées par l'utilisateur. Les données des champs en lecture seule sont toujours envoyées lors de la soumission du formulaire.
disabled
L'attribut disabled désactive l'élément d'entrée, le rendant non cliquable et non modifiable. Les champs désactivés sont grisés et ne répondent pas aux interactions de l'utilisateur. Ils ne sont pas envoyés dans les données du formulaire. Les champs désactivés sont couramment utilisés lorsque certains champs de saisie ne sont pas applicables ou ne doivent pas être modifiés en fonction d'autres conditions.
Attributs de validation
min et max
Les attributs min et max définissent les valeurs minimales et maximales autorisées pour les types d'entrée numériques, tels que number, range et date. Ces attributs permettent de vérifier que la valeur saisie par l'utilisateur se situe dans une plage définie.
Conseil: Champ de saisie numérique avec min et max
<input type="number" min="0" max="100">Si l'utilisateur saisit une valeur en dehors de cette plage, le formulaire ne sera pas envoyé et le navigateur affichera un message d'erreur.
minlength et maxlength
Les attributs minlength et maxlength définissent la longueur minimale et maximale autorisée pour les types d'entrée de texte, tels que text, email et password. Ces attributs limitent le nombre de caractères pouvant être saisis dans le champ de saisie.
Conseil: Champ de mot de passe avec minlength et maxlength
<input type="password" minlength="8" maxlength="20">Si la valeur saisie ne respecte pas les exigences de longueur, le formulaire ne sera pas soumis.
pattern
L'attribut pattern définit un modèle d'expression régulière auquel la valeur saisie doit correspondre. Il est utilisé pour vérifier le format des données saisies, comme les adresses e-mail, les numéros de téléphone ou des motifs spécifiques. Le modèle est défini en utilisant la syntaxe des expressions régulières.
Conseil: Champ de saisie d'e-mail avec pattern
<input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}">Si la valeur saisie ne correspond pas au modèle défini, le formulaire ne sera pas envoyé et le navigateur affichera un message d'erreur.
step
L'attribut step définit les incréments pour les types d'entrée numériques lors de l'utilisation des touches fléchées ou des boutons de défilement. Il définit la granularité des valeurs autorisées.
Conseil: Champ de saisie numérique avec step
<input type="number" step="0.1">Définir step="0.1" sur un champ de saisie numérique permettra des valeurs avec une décimale, comme 0,1, 0,2, 0,3, etc. Définir step="10" permettra des valeurs par incréments de 10, comme 10, 20, 30, etc. L'attribut step fonctionne en conjonction avec les attributs min et max pour contrôler la plage et l'incrément des valeurs autorisées.
Ces attributs de validation offrent un moyen de vérifier et de limiter les saisies de l'utilisateur côté client avant de soumettre le formulaire. Ils aident à maintenir l'intégrité des données, réduisent la validation côté serveur et donnent un retour immédiat à l'utilisateur. En utilisant ces attributs, vous pouvez créer des formulaires plus robustes et conviviaux qui guident les utilisateurs vers la saisie de données valides et attendues.
Attributs d'accessibilité
autocomplete
L'attribut autocomplete indique si le navigateur doit remplir le champ de saisie en fonction des valeurs précédentes de l'utilisateur. Il aide les utilisateurs à remplir les formulaires plus rapidement et avec plus de précision, en particulier pour les informations courantes comme les noms, les adresses e-mail et les adresses postales.
Conseil: Champ de saisie avec autocomplétion activée
<input type="email" autocomplete="on">En définissant autocomplete="on", la fonction d'autocomplétion du navigateur sera activée pour le champ de saisie. Le navigateur suggérera des valeurs précédentes correspondant au type et au nom de l'entrée. Les utilisateurs peuvent sélectionner parmi les suggestions, gagnant du temps et réduisant les fautes de frappe.
autofocus
L'attribut autofocus place le focus sur le champ de saisie au chargement de la page. Il attire l'attention de l'utilisateur sur un champ spécifique, le rendant prêt pour la saisie. Un seul élément de formulaire peut avoir l'attribut autofocus par page.
Conseil: Champ de saisie avec autofocus
<input type="text" autofocus>Lorsque la page se charge, le curseur sera placé dans le champ de saisie avec l'attribut autofocus. Cela est utile pour les formulaires où le champ de saisie principal est connu à l'avance, comme les barres de recherche ou les formulaires de connexion.
aria-label et aria-labelledby
Les attributs aria-label et aria-labelledby fournissent des étiquettes accessibles pour les éléments de saisie. Ils aident à améliorer l'accessibilité pour les utilisateurs de technologies d'assistance, comme les lecteurs d'écran.
L'attribut aria-label vous permet de spécifier une étiquette textuelle pour le champ de saisie qui est lue par les technologies d'assistance. Il est utile lorsque l'étiquette visuelle n'est pas suffisante ou lorsqu'il n'y a pas d'étiquette visible avec le champ de saisie.
Conseil: Champ de saisie avec aria-label
<input type="text" aria-label="Recherche">Dans cet exemple, les technologies d'assistance liront "Recherche" comme étiquette pour le champ de saisie, même s'il n'y a pas d'étiquette visible sur la page.
L'attribut aria-labelledby, quant à lui, vous permet d'associer le champ de saisie à un élément existant sur la page qui sert d'étiquette. La valeur de aria-labelledby doit être l'ID de l'élément d'étiquetage.
Conseil: Champ de saisie avec aria-labelledby
<label id="name-label">Nom :</label>
<input type="text" aria-labelledby="name-label">Dans ce cas, les technologies d'assistance utiliseront le contenu textuel de l'élément avec l'ID "name-label" comme étiquette pour le champ de saisie.
En utilisant ces attributs d'accessibilité, vous pouvez rendre vos formulaires plus inclusifs et plus faciles à utiliser pour les personnes en situation de handicap. Ils fournissent un contexte et des informations supplémentaires aux technologies d'assistance, aidant les utilisateurs à comprendre le but et la saisie attendue de chaque champ de formulaire.
Attributs de style
size
L'attribut size définit la largeur visible de l'élément input en caractères. Il modifie la taille du champ de saisie sans changer la longueur réelle de la valeur qui peut être saisie. L'attribut size est utilisé pour définir la taille physique du champ de saisie, le rendant plus grand ou plus petit selon le nombre de caractères spécifié.
Conseil: Champ de saisie avec l'attribut size
<input type="text" size="40">Le champ de saisie de texte sera affiché avec une largeur pouvant contenir environ 40 caractères. Cependant, les utilisateurs peuvent toujours saisir plus de caractères que la taille spécifiée, et le champ de saisie défilera horizontalement pour afficher le contenu supplémentaire.
L'attribut size ne limite pas le nombre de caractères pouvant être saisis dans le champ. Il contrôle uniquement la largeur visuelle du champ. Pour limiter la longueur de la valeur saisie, vous devriez plutôt utiliser l'attribut maxlength.
width et height
Les attributs width et height vous permettent de définir la largeur et la hauteur de l'élément input en utilisant des unités CSS. Ces attributs vous donnent plus de contrôle sur la taille et la mise en page des champs de saisie dans votre formulaire.
Conseil: Champ de saisie avec les attributs width et height
<input type="text" style="width: 200px; height: 30px;">Le champ de saisie de texte aura une largeur de 200 pixels et une hauteur de 30 pixels. Vous pouvez utiliser différentes unités CSS, comme les pixels (px), les pourcentages (%) ou les ems (em), pour définir les tailles souhaitées.
En utilisant les attributs width et height, vous pouvez créer des champs de saisie avec des tailles personnalisées qui s'intègrent bien dans la mise en page de votre formulaire. C'est utile lorsque vous avez des besoins de design spécifiques ou que vous voulez aligner les champs de saisie avec d'autres éléments de la page.
Les attributs width et height doivent être utilisés avec l'attribut style ou un fichier CSS externe pour appliquer les tailles souhaitées. L'attribut style vous permet de définir des styles CSS en ligne directement sur l'élément input.
style
L'attribut style vous permet d'appliquer des styles CSS en ligne à l'élément input. Il offre une flexibilité pour personnaliser l'apparence des champs de saisie au-delà des attributs de base.
Avec l'attribut style, vous pouvez définir diverses propriétés CSS pour contrôler le style visuel du champ de saisie. Cela inclut des propriétés comme les couleurs, les polices, les bordures, le rembourrage, et plus encore.
Conseil: Champ de saisie avec l'attribut style
<input type="text" style="border: 2px solid blue; padding: 5px; font-size: 16px; color: #333;">Le champ de saisie de texte aura une bordure bleue solide de 2 pixels, un rembourrage de 5 pixels, une taille de police de 16 pixels et une couleur de texte #333 (gris foncé). Vous pouvez ajouter plusieurs propriétés CSS dans l'attribut style, en les séparant par des points-virgules.
L'utilisation de l'attribut style vous donne un grand contrôle sur la présentation visuelle de vos champs de saisie. Vous pouvez faire correspondre le style des champs de saisie avec le design global de votre page web, créant une interface utilisateur cohérente et visuellement attrayante.
Cependant, il est généralement recommandé d'utiliser des fichiers CSS externes ou des balises <style> dans la section <head> de votre document HTML pour appliquer des styles à vos champs de saisie. Cette approche sépare la présentation de la structure et rend votre code plus facile à maintenir et à réutiliser.
En utilisant ces attributs de style, vous pouvez améliorer l'apparence visuelle de vos champs de saisie, les rendant plus attrayants et conviviaux. Vous pouvez ajuster la taille, les dimensions ou appliquer des styles personnalisés pour créer des formulaires bien conçus.