HTML Attributs d'entrée
Ce chapitre décrit les différents attributs de l'élément HTML <input>.
L'attribut value
L'attribut input value spécifie une valeur initiale pour un champ de saisie :
Exemple
Champs de saisie avec 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>
Try it Yourself »
L'attribut readonly
L'attribut input readonly spécifie qu'un champ de saisie est en lecture seule.
Un champ de saisie en lecture seule ne peut pas être modifié (cependant, un utilisateur peut y accéder, 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>
Try it Yourself »
L'attribut disabled
L'attribut input disabled 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>
Try it Yourself »
L'attribut size
L'attribut input size spécifie la largeur visible, en caractères, d'un champ de saisie.
La valeur par défaut pour size est 20.
Remarque : L'attribut size fonctionne avec les types d'entrée suivants : texte, recherche, numéro de téléphone, URL, e-mail et mot de passe.
Exemple
Définir 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>
Try it Yourself »
L'attribut maxlength
L'attribut d'entrée maxlength spécifie le nombre maximum de caractères autorisés dans un champ de saisie.
Remarque : Lorsqu'un maxlength est défini, le champ de saisie n'acceptera pas plus que le nombre de caractères spécifié. Cependant, cet attribut ne fournit aucune rétroaction. Ainsi, si vous souhaitez 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>
Try it Yourself »
Les attributs min et max
Les attributs d'entrée min et max spécifient les valeurs minimales et maximales d'un champ de saisie.
Les attributs min et max fonctionnent avec les types d'entrée suivants : nombre, plage, date, datetime-local, 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>
Try it Yourself »
L'attribut multiple
L'attribut input multiple spécifie que l'utilisateur est autorisé à saisir plusieurs valeurs dans un champ de saisie.
L'attribut multiple 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>
Try it Yourself »
L'attribut pattern
L'attribut d'entrée pattern spécifie une expression régulière par rapport à laquelle la valeur du champ de saisie est vérifiée lorsque le formulaire est soumis.
L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, téléphone, e-mail et mot de passe.
Astuce : Utilisez l'attribut global title pour décrire le modèle afin d'aider l'utilisateur.
Astuce : Apprenez-en plus sur les expressions régulières dans notre tutoriel JavaScript.
Exemple
Un champ de saisie ne pouvant 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>
Try it Yourself »
L'attribut placeholder
L'attribut d'entrée placeholder spécifie un court indice qui décrit la valeur attendue d'un champ de saisie (un exemple de valeur ou une brève description du format attendu).
Le court indice est affiché dans le champ de saisie avant que l'utilisateur ne saisisse une valeur.
L'attribut placeholder fonctionne avec les types d'entrée suivants : texte, recherche, URL, numéro de téléphone, 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>
Try it Yourself »
L'attribut required
L'attribut input required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
L'attribut required fonctionne avec les types d'entrée suivants : texte, recherche, URL, téléphone, 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>
Try it Yourself »
L'attribut step
L'attribut d'entrée step spécifie les intervalles de numéros légaux pour un champ de saisie.
Exemple : si step="3", les nombres légaux pourraient ê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'attribut step fonctionne avec les types d'entrée suivants : nombre, plage, date, datetime-local, mois, heure et semaine.
Exemple
Un champ de saisie avec un numéro légal spécifié par intervalles :
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Try it Yourself »
Remarque : Les restrictions de saisie ne sont pas infaillibles et JavaScript propose de nombreuses façons d'ajouter des entrées illégales. Pour restreindre la saisie en toute sécurité, celle-ci doit également être vérifiée par le récepteur (le serveur) !
L'attribut autofocus
L'attribut input autofocus spécifie qu'un champ de saisie doit automatiquement obtenir le focus lors du chargement de la page.
Exemple
Laissez le champ de saisie "First name" 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>
Try it Yourself »
Les attributs de height et de width
Les attributs d'entrée height et width spécifient la hauteur et la largeur d'un <input type="image"> Élément.
Astuce : 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é au 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 de soumission, avec les 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>
Try it Yourself »
L'attribut list
L'attribut input list fait référence à un élément <datalist> qui contient des options prédéfinies pour un <input> élément.
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>
Try it Yourself »
L'attribut autocomplete
L'attribut input autocomplete spé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 à saisir un champ, le navigateur doit afficher des options pour remplir le champ, en fonction des valeurs saisies précédemment.
L'attribut autocomplete fonctionne avec <form> et le types <input> suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.
Exemple
Un formulaire HTML avec la saisie semi-automatique activée et désactivée pour un champ de saisie :
<form action="/action_page.html" 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>
Try it Yourself »
Astuce : 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).
HTML Exercices
HTML Éléments de formulaire et de saisie
| Étiquette | Description |
|---|---|
| <form> | Définit un formulaire HTML pour la saisie de l'utilisateur |
| <input> | Définir un contrôle d'entrée |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
