Attributs d’Entrée HTML pour une Fonctionnalité Améliorée
Nous savons déjà comment créer des formulaires avec des champs de saisie et des étiquettes. Examinons maintenant d'autres attributs utiles pour les éléments input qui améliorent leur fonctionnalité et leur convivialité.
Attributs courants pour les éléments input
Placeholder
placeholder fournit un indice ou un texte d'exemple à l'intérieur du champ de saisie, indiquant aux utilisateurs le type de donnée attendu. Utile pour fournir un contexte ou des instructions aux utilisateurs avant la saisie des données.
<input type="text" placeholder="Enter your email" />
Name
name définit le nom du champ de saisie, utilisé pour identifier la donnée lors de la soumission du formulaire. Chaque champ de saisie dans un formulaire doit posséder un attribut name unique.
<input type="text" name="username" />
Value
value définit la valeur initiale ou par défaut du champ de saisie. Pré-remplit le champ avec une valeur spécifique lors du chargement de la page.
<input type="tel" value="+1 (484) 298-9732" />
Requis
required indique que le champ de saisie doit être rempli avant que le formulaire puisse être soumis. Empêche la soumission du formulaire si le champ requis est laissé vide.
<input type="password" required />
Désactivé
disabled désactive le champ de saisie, empêchant les utilisateurs d'interagir avec lui ou d'y saisir des données. Utile pour afficher des champs de saisie en lecture seule ou inactifs.
<input type="text" value="New York" disabled />
Lecture seule
readonly rend le champ de saisie en lecture seule, permettant aux utilisateurs de voir la valeur sans pouvoir la modifier. Semblable à l'attribut disabled, mais permet toujours de focaliser et de sélectionner le champ.
<input type="text" value="USA" readonly />
Min et Max
min et max spécifient les valeurs minimale et maximale autorisées pour les champs de saisie numérique. Utile pour appliquer des contraintes sur les entrées numériques, telles que l'âge ou la quantité.
<input type="number" min="21" max="99" />
Exemple : Considérons un exemple qui inclut tous les attributs et éléments nécessaires pour le formulaire.
index.html
Tutoriel vidéo
1. Quel attribut fournit un indice ou un texte d'exemple à l'intérieur d'un champ de saisie, guidant les utilisateurs sur le type de saisie attendu ?
2. Quel attribut spécifie le nom du champ de saisie, utilisé pour identifier les données saisies lors de la soumission du formulaire ?
3. Quel attribut empêche la soumission du formulaire si le champ requis est laissé vide ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain the difference between the disabled and readonly attributes?
What happens if I don't set a name attribute for an input field in a form?
Can you give more examples of using min and max with different input types?
Awesome!
Completion rate improved to 3.13Attributs d’Entrée HTML pour une Fonctionnalité Améliorée
Glissez pour afficher le menu
Nous savons déjà comment créer des formulaires avec des champs de saisie et des étiquettes. Examinons maintenant d'autres attributs utiles pour les éléments input qui améliorent leur fonctionnalité et leur convivialité.
Attributs courants pour les éléments input
Placeholder
placeholder fournit un indice ou un texte d'exemple à l'intérieur du champ de saisie, indiquant aux utilisateurs le type de donnée attendu. Utile pour fournir un contexte ou des instructions aux utilisateurs avant la saisie des données.
<input type="text" placeholder="Enter your email" />
Name
name définit le nom du champ de saisie, utilisé pour identifier la donnée lors de la soumission du formulaire. Chaque champ de saisie dans un formulaire doit posséder un attribut name unique.
<input type="text" name="username" />
Value
value définit la valeur initiale ou par défaut du champ de saisie. Pré-remplit le champ avec une valeur spécifique lors du chargement de la page.
<input type="tel" value="+1 (484) 298-9732" />
Requis
required indique que le champ de saisie doit être rempli avant que le formulaire puisse être soumis. Empêche la soumission du formulaire si le champ requis est laissé vide.
<input type="password" required />
Désactivé
disabled désactive le champ de saisie, empêchant les utilisateurs d'interagir avec lui ou d'y saisir des données. Utile pour afficher des champs de saisie en lecture seule ou inactifs.
<input type="text" value="New York" disabled />
Lecture seule
readonly rend le champ de saisie en lecture seule, permettant aux utilisateurs de voir la valeur sans pouvoir la modifier. Semblable à l'attribut disabled, mais permet toujours de focaliser et de sélectionner le champ.
<input type="text" value="USA" readonly />
Min et Max
min et max spécifient les valeurs minimale et maximale autorisées pour les champs de saisie numérique. Utile pour appliquer des contraintes sur les entrées numériques, telles que l'âge ou la quantité.
<input type="number" min="21" max="99" />
Exemple : Considérons un exemple qui inclut tous les attributs et éléments nécessaires pour le formulaire.
index.html
Tutoriel vidéo
1. Quel attribut fournit un indice ou un texte d'exemple à l'intérieur d'un champ de saisie, guidant les utilisateurs sur le type de saisie attendu ?
2. Quel attribut spécifie le nom du champ de saisie, utilisé pour identifier les données saisies lors de la soumission du formulaire ?
3. Quel attribut empêche la soumission du formulaire si le champ requis est laissé vide ?
Merci pour vos commentaires !
