Propriétés HTML Input

Propriété value

value La propriété spécifie la valeur initiale du champ d'entrée :

Exemple

<form action="">
 Prénom: <br>
<input type="text" name="firstname" value="Bill">
<br>
 Nom: <br>
<input type="text" name="lastname">
</form>

Essayer par vous-même

Propriété readonly

readonly La propriété spécifie que le champ d'entrée est en lecture seule (ne peut pas être modifié) :

Exemple

<form action="">
 Prénom: <br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Nom: <br>
<input type="text" name="lastname">
</form>

Essayer par vous-même

La propriété readonly n'a pas de valeur. Elle équivaut à readonly="readonly".

Propriété disabled

disabled La propriété spécifie que le champ d'entrée est désactivé.

Les éléments désactivés sont inutilisables et non cliquables.

Les éléments désactivés ne sont pas soumis.

Exemple

<form action="">
 Prénom: <br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Nom: <br>
<input type="text" name="lastname">
</form>

Essayer par vous-même

La propriété disabled n'a pas de valeur. Elle équivaut à disabled="disabled".

Propriété size

size La propriété spécifie la taille du champ d'entrée (en caractères) :

Exemple

<form action="">
 Prénom: <br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Nom: <br>
<input type="text" name="lastname">
</form>

Essayer par vous-même

Propriété maxlength

maxlength La propriété spécifie la longueur maximale autorisée pour le champ d'entrée :

Exemple

<form action="">
 Prénom: <br>
<input type="text" name="firstname" maxlength="10">
<br>
 Nom: <br>
<input type="text" name="lastname">
</form>

Essayer par vous-même

Si vous définissez l'attribut maxlength, le contrôle d'entrée ne recevra pas plus de caractères que ceux autorisés.

Cette propriété ne fournira aucun retour. Si vous devez informer l'utilisateur, vous devez écrire du code JavaScript.

Remarque :Les limitations d'entrée ne sont pas infaillibles. JavaScript propose de nombreuses méthodes pour ajouter des entrées illégales. Pour limiter l'entrée de manière sécurisée, le destinataire (serveur) doit également vérifier les limitations.

Attributs HTML5

HTML5 ajoute les attributs suivants à <input> :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height et width
  • list
  • min et max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

et ajouter les attributs nécessaires pour <form> :

  • autocomplete
  • novalidate

Attribut autocomplete

L'attribut autocomplete détermine si le formulaire ou le champ d'entrée doit être auto-complété.

Lorsque l'auto-complétion est activée, le navigateur remplira automatiquement les valeurs basées sur les valeurs d'entrée précédentes de l'utilisateur.

Avis :Vous pouvez définir l'auto-complétion du formulaire sur on, tout en définissant un champ d'entrée spécifique sur off, et vice versa.

L'attribut autocomplete s'applique aux <form> et aux types <input> suivants : text, search, url, tel, email, password, pickers de date, range et color.

Exemple

Formulaire HTML avec l'auto-complétion activée (un champ d'entrée est désactivé):

<form action="action_page.php" autocomplete="on">
   Prénom: <input type="text" name="fname"><br>
   Nom de famille : <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Essayer par vous-même

Avis :Dans certains navigateurs, vous devrez peut-être activer manuellement la fonctionnalité d'auto-complétion.

L'attribut novalidate

L'attribut novalidate appartient aux attributs <form>.

Si défini, l'attribut novalidate spécifie que les données du formulaire ne doivent pas être vérifiées lors de son soumission.

Exemple

Indique que le formulaire ne doit pas être vérifié lors de son soumission :

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Essayer par vous-même

L'attribut autofocus

L'attribut autofocus est un attribut booléen.

Si défini, l'attribut autofocus spécifie que l'élément <input> doit automatiquement obtenir le focus au chargement de la page.

Exemple

Faites que le champ d'entrée "Prénom" obtienne automatiquement le focus au chargement de la page :

Prénom: <input type="text" name="fname" autofocus>

Essayer par vous-même

L'attribut form

L'attribut form spécifie un ou plusieurs formulaires auxquels appartient l'élément <input>.

Avis :Pour faire référence à un ou plusieurs formulaires, utilisez une liste d'ids de formulaires séparés par des espaces.

Exemple

Les champs d'entrée se trouvent à l'extérieur du formulaire HTML (mais appartiennent toujours au formulaire) :

<form action="action_page.php" id="form1">
   Prénom : <input type="text" name="fname"><br>
   <input type="submit" value="Soumettre">
</form>
 Nom de famille: <input type="text" name="lname" form="form1">

Essayer par vous-même

L'attribut formaction

L'attribut formaction spécifie l'URL du fichier à traiter lorsque le formulaire est soumis.

L'attribut formaction couvre l'attribut action de l'élément <form>.

L'attribut formaction est applicable aux types "submit" et "image".

Exemple

Un HTML formulaire avec deux boutons de soumission et des actions différentes :

<form action="action_page.php">
   Prénom : <input type="text" name="fname"><br>
   Nom de famille : <input type="text" name="lname"><br>
   <input type="submit" value="Soumettre"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Soumettre en tant qu'administrateur">
</form>

Essayer par vous-même

L'attribut formenctype

L'attribut formenctype spécifie comment encoder les données du formulaire (form-data) lorsqu'elles sont envoyées au serveur (uniquement pour les formulaires avec method="post").

L'attribut formenctype couvre l'attribut enctype de l'élément <form>.

L'attribut formenctype est applicable à type="submit" et type="image".

Exemple

Envoyer les données du formulaire par défaut et les données du formulaire codées en "multipart/form-data" (second bouton de soumission) (form-data) :

<form action="demo_post_enctype.asp" method="post">
   Prénom : <input type="text" name="fname"><br>
   <input type="submit" value="Soumettre">
   <input type="submit" formenctype="multipart/form-data">
   value="Soumettre en tant que multipart/form-data">
</form>

Essayer par vous-même

Attribut formmethod

L'attribut formmethod définit la méthode HTTP utilisée pour envoyer les données du formulaire (form-data) vers l'URL d'action.

L'attribut formmethod prend le pas sur l'attribut method de l'élément <form>.

L'attribut formmethod est applicable à type="submit" et type="image".

Exemple

Le second bouton de soumission remplace le méthode HTTP du formulaire :

<form action="action_page.php" method="get">
   Prénom : <input type="text" name="fname"><br>
   Nom de famille : <input type="text" name="lname"><br>
   <input type="submit" value="Soumettre">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Soumettre en utilisant POST">
</form>

Essayer par vous-même

Attribut formnovalidate

L'attribut novalidate est un attribut booléen.

Si elle est définie, elle stipule que la validation des éléments <input> n'est pas effectuée lors du soumission du formulaire.

L'attribut formnovalidate prend le pas sur l'attribut novalidate de l'élément <form>.

L'attribut formnovalidate peut être utilisé avec type="submit".

Exemple

Formulaire avec deux boutons de soumission (validation et non validation) :

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Soumettre"><br>
   <input type="submit" formnovalidate value="Soumettre sans validation">
</form>

Essayer par vous-même

L'attribut formtarget

L'attribut formtarget indique où afficher la réponse reçue après le soumission du formulaire.

L'attribut formtarget prend le dessus sur l'attribut target de l'élément <form> .

L'attribut formtarget peut être utilisé avec type="submit" et type="image" .

Exemple

Ce formulaire contient deux boutons de soumission, correspondant à des fenêtres cibles différentes :

<form action="action_page.php">
   Prénom : <input type="text" name="fname"><br>
   Nom de famille : <input type="text" name="lname"><br>
   <input type="submit" value="Soumettre normalement">
   <input type="submit" formtarget="_blank">
   value="Soumettre dans une nouvelle fenêtre">
</form>

Essayer par vous-même

Les attributs height et width

Les attributs height et width définissent la hauteur et la largeur de l'élément <input> .

Les attributs height et width ne s'appliquent qu'à l'élément <input type="image"> .

Remarque :Définissez toujours la taille de l'image. Si le navigateur ne connaît pas la taille de l'image, la page clignote lors du chargement de l'image.

Exemple

Définissez l'image comme bouton de soumission et définissez les attributs height et width :

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Essayer par vous-même

Attribut list

L'élément <datalist> mentionné par l'attribut list contient des options prédéfinies pour l'élément <input> .

Exemple

Utilisez <datalist> pour définir des valeurs prédéfinies pour l'élément <input> :

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Essayer par vous-même

Les attributs min et max

Les attributs min et max

Les attributs min et max déterminent la valeur minimale et maximale de l'élément <input>.

Exemple

Les attributs min et max s'appliquent aux types d'entrée suivants : number, range, date, datetime, datetime-local, month, time et week.

Champ <input> avec des valeurs minimales et maximales :
Entrez une date avant le 1979-12-31 :
 Entrez une date avant le 1980-01-01 :
Entrez une date après le 2000-01-01 :
 Quantité (entre 1 et 5) :
<input type="number" name="quantity" min="1" max="5">

Essayer par vous-même

L'attribut multiple

L'attribut multiple est un attribut binaire.

Si configuré, cela permet à l'utilisateur d'entrer une valeur multiple dans l'élément <input>.

L'attribut multiple s'applique aux types d'entrée suivants : email et file.

Exemple

Champ de téléchargement de fichiers acceptant plusieurs valeurs :

Sélectionnez une image : <input type="file" name="img" multiple>

Essayer par vous-même

L'attribut pattern

L'attribut pattern spécifie l'expression régulière utilisée pour vérifier la valeur de l'élément <input>.

L'attribut pattern s'applique aux types d'entrée suivants : text, search, url, tel, email et password.

Avis :Utilisez l'attribut title global pour décrire le modèle pour aider l'utilisateur.

Avis :Apprenez plus sur les expressions régulières dans notre tutoriel JavaScript.

Exemple

Le champ d'entrée ne peut contenir que trois lettres (sans chiffres ou caractères spéciaux) :

Code pays : 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Essayer par vous-même

L'attribut placeholder

L'attribut placeholder détermine un texte d'indication pour décrire la valeur attendue du champ d'entrée (valeur d'échantillon ou une brève description de la mise en forme).

Cette indication s'affichera avant que l'utilisateur n'entre une valeur dans le champ d'entrée.

L'attribut placeholder est applicable aux types d'entrée suivants : text, search, url, tel, email et password.

Exemple

Champs d'entrée avec texte de place-tenant :

<input type="text" name="fname" placeholder="Prénom">

Essayer par vous-même

Attribut required

L'attribut required est un attribut booléen.

Si configuré, il stipule que le champ d'entrée doit être rempli avant de soumettre le formulaire.

L'attribut required est applicable aux types d'entrée suivants : text, search, url, tel, email, password, pickers de date, number, checkbox, radio et fichier.

Exemple

Champs d'entrée obligatoires :

Nom d'utilisateur : <input type="text" name="usrname" required>

Essayer par vous-même

Attribut step

L'attribut step spécifie l'intervalle numérique légitime de l'élément <input>.

Exemple : si step="3", les nombres légitimes devraient être -3, 0, 3, 6, etc.

Avis :L'attribut step peut être utilisé avec les attributs max et min pour créer une plage de valeurs légitimes.

L'attribut step est applicable aux types d'entrée suivants : number, range, date, datetime, datetime-local, month, time et week.

Exemple

Champs d'entrée avec des intervalles numériques spécifiques et légaux :

<input type="number" name="points" step="3">

Essayer par vous-même