HTML Attributs d'Entrée
Ce chapitre décrit les différents attributs de l'élément HTML <input> .
L'attribut value
L'attribut value spécifie une valeur initiale pour un champ de saisie :
Exemple
Champs de saisie avec des valeurs initiales (par défaut) :
<form>
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> L'attribut readonly
L'attribut 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 surligner et 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">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> L'attribut disabled
L'attribut 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">Prénom:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form> L'attribut size
L'attribut 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 de saisie suivants : text, search, tel, url, email et password.
Exemple
Définir une largeur pour un champ de saisie :
<form>
<label for="fname">Prénom:</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 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 spécifié de caractères. Cependant, cet attribut ne fournit aucun retour d'information. Donc, si vous souhaitez alerter l'utilisateur, vous devez écrire du code JavaScript.
Exemple
Définir une longueur maximale pour un champ de saisie :
<form>
<label for="fname">Prénom:</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
Les attributs min et max spécifient les valeurs minimales et maximales pour un champ de saisie.
Les attributs min et max fonctionnent avec les types de saisie suivants : number, range, date, datetime-local, month, time et week.
Astuce : Utilisez les attributs max et min ensemble pour créer une plage de valeurs légales.
Exemple
Définir une date maximale, une date minimale et une plage de valeurs légales :
<form>
<label for="datemax">Entrez une date avant 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Entrez une date après 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br;
<label for="quantity">Quantité (entre 1 et 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form> L'attribut multiple
L'attribut multiple spécifie que l'utilisateur est autorisé à entrer plus d'une valeur dans un champ de saisie.
L'attribut multiple fonctionne avec les types de saisie suivants : email et file.
Exemple
Un champ de téléchargement de fichiers qui accepte plusieurs valeurs :
<form>
<label for="files">Sélectionnez des fichiers:</label>
<input type="file" id="files" name="files" multiple>
</form> L'attribut pattern
L'attribut pattern spécifie une expression régulière contre laquelle la valeur du champ de saisie est vérifiée lors de la soumission du formulaire.
L'attribut pattern fonctionne avec les types de saisie suivants : text, date, search, url, tel, email et password.
Astuce : Utilisez l'attribut global title pour décrire le motif afin d'aider l'utilisateur.
Astuce : En savoir plus sur les expressions régulières dans notre tutoriel 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">Code pays:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Code pays de trois lettres">
</form> L'attribut placeholder
L'attribut placeholder spécifie un court indice qui décrit la valeur attendue d'un champ de saisie (une valeur d'exemple ou une courte description du format attendu).
Le court indice est affiché dans le champ de saisie avant que l'utilisateur n'entre une valeur.
L'attribut placeholder fonctionne avec les types de saisie suivants : text, search, url, number, tel, email et password.
Exemple
Un champ de saisie avec un texte d'espace réservé :
<form>
<label for="phone">Entrez un numéro de téléphone:</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 required
L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
L'attribut required fonctionne avec les types de saisie suivants : text, search, url, tel, email, password, date pickers, number, checkbox, radio et file.
Exemple
Un champ de saisie requis :
<form>
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username" required>
</form> L'attribut step
L'attribut step spécifie les intervalles de nombres 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 de saisie suivants : number, range, date, datetime-local, month, time et week.
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 destinataire (le serveur) !
L'attribut autofocus
L'attribut autofocus spécifie qu'un champ de saisie doit automatiquement recevoir le focus lorsque la page se charge.
Exemple
Laissez le champ de saisie "Prénom" recevoir automatiquement le focus lorsque la page se charge :
<form>
<label for="fname">Prénom:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Nom de famille:</label><br>
<input type="text" id="lname" name="lname">
</form> Les attributs height et width
Les attributs height et width spécifient la hauteur et la largeur d'un élément <input type="image"> .
Astuce : Spécifiez toujours à la fois les attributs height et width pour les images. Si height et width sont définis, l'espace requis pour l'image est réservé lorsque la page est chargée. Sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas réserver l'espace approprié. L'effet sera que la mise en page de la page changera pendant le chargement (pendant que les images se chargent).
Exemple
Définir une image comme bouton de soumission, avec des attributs de hauteur et de largeur :
<form>
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nom de famille:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Soumettre" width="48" height="48">
</form> L'attribut list
L'attribut list fait référence à un élément <datalist> qui contient des options prédéfinies pour un élément <input>.
Exemple
Un élément <input> avec des valeurs prédéfinies dans un <datalist> :
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> L'attribut autocomplete
L'attribut autocomplete spécifie si un formulaire ou un champ de saisie doit avoir l'autocomplétion activée ou désactivée.
L'autocomplétion 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 précédemment saisies.
L'attribut autocomplete fonctionne avec <form> et les types de <input> suivants : text, search, url, tel, email, password, datepickers, range et color.
Exemple
Un formulaire HTML avec l'autocomplétion activée, et désactivée pour un champ de saisie :
<form action="/action_page.php" autocomplete="on">
<label for="fname">Prénom:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nom de famille:</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="Soumettre">
</form> Astuce : Dans certains navigateurs, vous devrez peut-être activer une fonction d'autocomplétion pour que cela fonctionne (regardez sous "Préférences" dans le menu du navigateur).
Éléments de Formulaire et d'Entrée HTML
| Tag | Description |
|---|---|
| <form> | Définit un formulaire HTML pour la saisie utilisateur |
| <input> | Définit un contrôle de saisie |
Pour une liste complète de tous les tags HTML disponibles, visitez notre Référence des Tags HTML .