Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Attributs pour les Éléments d'Input | Tableaux et Formulaires
Essentiels HTML

book
Attributs pour les Éléments d'Input

Nous savons déjà comment construire des formulaires avec des champs de saisie et des étiquettes. Maintenant, considérons d'autres attributs utiles pour les éléments de saisie qui améliorent leur fonctionnalité et leur convivialité.

Attributs Communs pour les Éléments de Saisie

Placeholder

placeholder fournit un indice ou un exemple de texte dans le champ de saisie, guidant les utilisateurs sur le type de saisie attendu. Utile pour fournir un contexte ou des instructions aux utilisateurs avant qu'ils n'entrent des données.

html
<input type="text" placeholder="Enter your email" />

Name

name spécifie le nom du champ de saisie, qui est utilisé pour identifier les données saisies lorsque le formulaire est soumis. Chaque champ de saisie dans un formulaire doit avoir un attribut de nom unique.

html
<input type="text" name="username" />

Value

value définit la valeur initiale ou par défaut du champ de saisie. Pré-remplit le champ de saisie avec une valeur spécifique lorsque la page se charge.

html
<input type="tel" value="+1 (484) 298-9732" />

Requis

required spécifie 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.

hml
<input type="password" required />

Désactivé

disabled désactive le champ de saisie, empêchant les utilisateurs d'interagir avec lui ou d'y entrer des données. Utile pour afficher des champs de saisie en lecture seule ou inactifs.

html
<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 mais pas de la modifier. Semblable à l'attribut disabled, mais permet toujours de focaliser et de sélectionner le champ.

html
<input type="text" value="USA" readonly />

Min et Max

min et max spécifient les valeurs minimales et maximales autorisées pour les champs de saisie numérique. Utile pour imposer des contraintes sur les saisies numériques, telles que l'âge ou la quantité.

html
<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.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Attributes for Input Elements</title>
<meta charset="UTF-8" />
</head>
<body>
<form onsubmit="return false">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email" required><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" value="+1 (484) 298-9732"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" value="New York" disabled><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="USA" readonly><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="21" max="99"><br>
<button type="submit">Send Form</button>
</form>
</body>
</html>

Tutoriel Vidéo

1. Quel attribut fournit un indice ou un exemple de texte dans un champ de saisie, guidant les utilisateurs sur le type de saisie attendu ?

2. Quel attribut spécifie le nom du champ de saisie, qui est utilisé pour identifier les données saisies lorsque le formulaire est soumis ?

3. Quel attribut empêche la soumission du formulaire si le champ requis est laissé vide ?

question mark

Quel attribut fournit un indice ou un exemple de texte dans un champ de saisie, guidant les utilisateurs sur le type de saisie attendu ?

Select the correct answer

question mark

Quel attribut spécifie le nom du champ de saisie, qui est utilisé pour identifier les données saisies lorsque le formulaire est soumis ?

Select the correct answer

question mark

Quel attribut empêche la soumission du formulaire si le champ requis est laissé vide ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7
some-alt