Attributs d'entrée HTML
Ce chapitre décrit les différents attributs de l' <input>élément HTML.
L'attribut de valeur
L'attribut input valuespécifie une valeur initiale pour un champ d'entrée :
Exemple
Champs de saisie avec des valeurs initiales (par défaut) :
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attribut readonly
L' readonlyattribut input spécifie qu'un champ d'entrée est en lecture seule.
Un champ de saisie en lecture seule ne peut pas être modifié (toutefois, un utilisateur peut y accéder par tabulation, le mettre en surbrillance et en copier le texte).
La valeur d'un champ de saisie en lecture seule sera envoyée lors de la soumission du formulaire !
Exemple
Un champ de saisie en lecture seule :
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attribut désactivé
L' disabledattribut input spécifie qu'un champ de saisie doit être désactivé.
Un champ de saisie désactivé est inutilisable et non cliquable.
La valeur d'un champ de saisie désactivé ne sera pas envoyée lors de la soumission du formulaire !
Exemple
Un champ de saisie désactivé :
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attribut taille
L'attribut input sizespécifie la largeur visible, en caractères, d'un champ d'entrée.
La valeur par défaut pour sizeest 20.
Remarque : L' sizeattribut fonctionne avec les types d'entrée suivants : texte, recherche, tél, URL, e-mail et mot de passe.
Exemple
Définissez une largeur pour un champ de saisie :
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
L'attribut maxlength
L'attribut input maxlengthspécifie le nombre maximum de caractères autorisés dans un champ d'entrée.
Remarque : Lorsque a maxlengthest défini, le champ de saisie n'accepte pas plus que le nombre de caractères spécifié. Cependant, cet attribut ne fournit aucune rétroaction. Donc, si vous voulez alerter l'utilisateur, vous devez écrire du code JavaScript.
Exemple
Définissez une longueur maximale pour un champ de saisie :
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Les attributs min et max
L'entrée minet les maxattributs spécifient les valeurs minimale et maximale d'un champ d'entrée.
Les attributs minet maxfonctionnent avec les types d'entrée suivants : nombre, plage, date, date-heure locale, mois, heure et semaine.
Conseil : Utilisez les attributs max et min ensemble pour créer une plage de valeurs légales.
Exemple
Définissez une date maximale, une date minimale et une plage de valeurs légales :
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
L'attribut multiple
L'attribut d'entrée multiplespécifie que l'utilisateur est autorisé à saisir plusieurs valeurs dans un champ de saisie.
L' multipleattribut fonctionne avec les types d'entrée suivants : e-mail et fichier.
Exemple
Un champ de téléchargement de fichier qui accepte plusieurs valeurs :
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
L'attribut pattern
L'attribut input patternspécifie une expression régulière par rapport à laquelle la valeur du champ d'entrée est vérifiée, lorsque le formulaire est soumis.
L' patternattribut fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot de passe.
Conseil : Utilisez l'attribut de titre global pour décrire le modèle afin d'aider l'utilisateur.
Conseil : Apprenez-en plus sur les expressions régulières dans notre didacticiel JavaScript.
Exemple
Un champ de saisie qui ne peut contenir que trois lettres (pas de chiffres ni de caractères spéciaux) :
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
L'attribut d'espace réservé
L'attribut d'entrée placeholderspécifie un bref indice qui décrit la valeur attendue d'un champ d'entrée (un exemple de valeur ou une brève description du format attendu).
Le petit conseil s'affiche dans le champ de saisie avant que l'utilisateur n'entre une valeur.
L' placeholderattribut fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail et mot de passe.
Exemple
Un champ de saisie avec un texte d'espace réservé :
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
L'attribut requis
L' requiredattribut input spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
L' requiredattribut fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier.
Exemple
Un champ de saisie obligatoire :
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
L'attribut step
L'attribut d'entrée stepspécifie les intervalles de nombres légaux pour un champ d'entrée.
Exemple : si step="3", les nombres légaux peuvent être -3, 0, 3, 6, etc.
Astuce : Cet attribut peut être utilisé avec les attributs max et min pour créer une plage de valeurs légales.
L' stepattribut fonctionne avec les types d'entrée suivants : nombre, plage, date, date-heure locale, mois, heure et semaine.
Exemple
Un champ de saisie avec des intervalles de nombres légaux spécifiés :
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Remarque : les restrictions d'entrée ne sont pas infaillibles et JavaScript offre de nombreuses façons d'ajouter des entrées illégales. Pour restreindre l'entrée en toute sécurité, elle doit également être vérifiée par le récepteur (le serveur) !
L'attribut autofocus
L' autofocusattribut input spécifie qu'un champ de saisie doit automatiquement obtenir le focus lors du chargement de la page.
Exemple
Laissez le champ de saisie "Prénom" obtenir automatiquement le focus lors du chargement de la page :
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Les attributs hauteur et largeur
L'entrée heightet les widthattributs spécifient la hauteur et la largeur d'un <input
type="image">élément.
Conseil : Spécifiez toujours les attributs de hauteur et de largeur pour les images. Si la hauteur et la largeur sont définies, l'espace requis pour l'image est réservé lors du chargement de la page. Sans ces attributs, le navigateur ne connaît pas la taille de l'image, et ne peut pas lui réserver l'espace approprié. L'effet sera que la mise en page changera pendant le chargement (pendant le chargement des images).
Exemple
Définissez une image comme bouton d'envoi, avec des attributs de hauteur et de largeur :
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
L'attribut de liste
listL' attribut input fait référence à un <datalist>élément qui contient des options prédéfinies pour un élément <input>.
Exemple
Un élément <input> avec des valeurs prédéfinies dans une <datalist> :
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
L'attribut de saisie semi-automatique
L'attribut input autocompletespécifie si un formulaire ou un champ de saisie doit avoir la saisie semi-automatique activée ou désactivée.
La saisie semi-automatique permet au navigateur de prédire la valeur. Lorsqu'un utilisateur commence à taper dans un champ, le navigateur doit afficher des options pour remplir le champ, en fonction des valeurs saisies précédemment.
L' autocompleteattribut fonctionne avec <form>les <input>types suivants : text, search, url, tel, email, password, datepickers, range et color.
Exemple
Un formulaire HTML avec saisie semi-automatique activée et désactivée pour un champ de saisie :
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Conseil : dans certains navigateurs, vous devrez peut-être activer une fonction de saisie semi-automatique pour que cela fonctionne (regardez sous "Préférences" dans le menu du navigateur).
Exercices HTML
Formulaire HTML et éléments d'entrée
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .