Balise INPUT

Rôle

La balise <input> définit un champ pour saisir ou sélectionner des données. Le rôle de la balise peut varié en fonction de l’attribut type. Pour faciliter l’accessibilité des éléments (moteur de rechercher, mal-voyants..), la balise <input> s’utilise conjointement avec la balise label

Testez vous-même cette balise

Utilisez Codepen.

Voici le resultat

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

La balise <input> est pris en charge par tous les principaux navigateurs

Attributs spécifiques

Attributs spécifiques à cet élément

accept
Précise les types de fichiers que le serveur accepte. Ne fonctionne qu’avec l’attribut type= »file »(attention, pris en charge qu’à partir de IE-10 et Safari 6)
Syntaxe :
<input type="file" accept="image/*" />
Valeurs possible :

  • accept=’audio/* »‘: bouton cliquable pour lancer un script
  • accept=’video/*’ : bouton pour réinitialiser les valeurs de départ
  • accept=’image/*’ : bouton pour soumettre les données
  • accept=’MINE_type’ : Spécifiez le type MINE manuellement, voir la référence IANA
Remarque : pour accepter plus de valeur, séparez-les par une virgule accept= »audio/*,video/*,image/* »
alt
Précise le texte alternatif à l’image. Ne fonctionne qu’avec l’attribut type= »image »
Syntaxe :
<input type="image" alt="description de l'image" />
autocomplete
Permet d’activer la saisie semi-automatique: le navigateur va automatiquement complèter par des valeurs que l’utilisateur a entré auparavant. Fonctionne avec les types : text, search, url, tel, email, password, datepickers, range, color. 
Syntaxe :
<form action="form.php" autocomplete="on" >
autofocus
Donne le focus à l’élément au chargement de la page, il est donc immédiatement utilisable (attention, pris en charge qu’à partir de IE-10)
Syntaxe :
<input type="text" autofocus>
checked
Permet de spécifier que l’élément est coché. Foction avec les types : radio, checkbox. 
Syntaxe :
<input type="radio" checked>
disabled
Permet de vérouiller l’élément, il n’est donc plus utilisable
Syntaxe :
<input type="submit" disabled>
form
Spécifie l’idendifiant (attribut ID) du formulaire auquel l’élément appartient. Cet attribut permet à un élément d’être utilisé à l’extérieur à la balise <form> (attention, pas pris en charge par Internet Explorer)
Syntaxe :
<input type="submit" form="form1" >
formaction
Cet attribut remplace l’attibut action de la balise form (attention, pris en charge qu’à partir de IE-10). Fonctionne avec les types : image, submit. 
Syntaxe :
<input type="submit" formaction="form.php" >
formenctype
Cet attribut remplace l’attibut enctype de la balise form (attention, pris en charge qu’à partir de IE-10). Fonctionne avec les types : image, submit. 
Syntaxe :
<input type="submit" formenctype="text/plain" >
formenmethod
Cet attribut remplace l’attibut method de la balise form (attention, pris en charge à partir de IE-10). Fonctionne avec les types : image, submit. 
Syntaxe :
<input type="submit" formmethod="post" >
formnovalidate
Cet attribut remplace l’attibut novalidate de la balise form (attention, pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Safari). Fonctionne avec les types : image, submit. 
Syntaxe :
<input type="submit" formnovalidate >
formtarget
Cet attribut remplace l’attibut target de la balise form (attention, pris en charge qu’à partir de IE-10). Fonctionne avec les types : image, submit. 
Syntaxe :
<button type="submit" formtarget="_blank" >Envoyer</button>
height
Spécifie la hauteur des boutons de type image 
Syntaxe :
<input type="image" height="200" >
list
Spécifie le datalist auquel il fait référence (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Safari).
Syntaxe :
<input type="text" list="id_datalist" >
max
Spécifie la valeur maximale d’un élément input. Utilisez max avec l’attribut min pour créer une gamme de valeur. Fonctionne avec les types : number, range, date, datetime, datetime-local, month, time, week (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Opera)
Syntaxe :
<input type="number" min="18" max="99" >
maxlength
Spécifie le nombre maximal de caractères autorisés.
Syntaxe :
<input type="text" maxlength="16" >
min
Spécifie la valeur minimale d’un élément input. Utilisez min avec l’attribut max pour créer une gamme de valeur. Fonctionne avec les types : number, range, date, datetime, datetime-local, month, time, week (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Opera)
Syntaxe :
<input type="number" min="18" max="99" >
multiple
Spécifie que l’utilisateur est autorisé à entrer plusieurs valeurs dans l’élément . Fonctionne avec les types : email, file (attention, est pris en charge qu’à partir de IE-10)
Syntaxe :
<input type="file" multiple >
name
Spécifie le nom de l’élément
Syntaxe :
<input type="text" name="pseudo" >
pattern
Spécifie une expression régulière utilisée pour contrôler la valeur de l’élément. Fonctionne avec les types : text, search, url, tel, email,password (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Safari)
Syntaxe :
<input type="text" name="pseudo" pattern="[A-Za-z0-9]{8,16}" >
placeholder
Spécifie la valeur de substitution qui sera affiché dans l’élément avant que l’utilisateur entre du contenu et disparait au moment de la saisie : conseil ou description du format attendu. Fonctionne avec les types : text, search, url, tel, email,password (attention, est pris en charge qu’à partir de IE-10)
Syntaxe :
<input type="text" name="pseudo" placeholder="8 à 16 caractères" >
readonly
Spécifie que le champ de saisie est en lecture seule : le contenu ne peut pas être modifié mais il est possible de le copier.
Syntaxe :
<input type="text" readonly >
required
Spécifie que le champ ne peut pas resté vide au moment de soumettre le formulaire. Fonctionne avec les types : text, search, url, tel, email, password, date pickers, number, checkbox, radio, file(attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Safari)
Syntaxe :
<input type="text" name="pseudo" required >
size
Spécifie la largeur visible, en caractères, de l’élément. Fonctionne avec les types : text, search, tel, url, email, password
Syntaxe :
<input type="text" name="pseudo" size="16" >
src
Spécifie l’URL de l’image si vous utilisez le type image (bouton-image pour soumettre le formulaire)
Syntaxe :
<input type="image" src="monimage.jpg" >
step
Permet d’afficher des valeurs par intervalle. Vous pouvez l’utiliser avev les attributs min et max . Fonctionne avec les types : number, range, date, datetime, datetime-local, month, time, week (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Firefox)
Syntaxe :<input type="number" name="quantite" step="3" >
Exemple :  (affiche les valeurs entre 0 et 21)
value
Spécifie la valeur de l’élément. Pour les types submit, rest, button, il correspond au texte du bouton. Pour les types text, hidden, passeword, il correspond à la valeur par défaut du champ de saisie. Pour les types radio, checkbox, image, il correspond à la valeur qui sera associée à cet élément et exploitée par PHP
Syntaxe :
<input type="submit" value="ok" >
Exemple : 
type
Spécifie le type de l’élément. Le type par défaut est : text 
Syntaxe :
<input type="text" />
Valeurs possible :

  • type=’button’ : définit un bouton cliquable, exemple : 
  • type=’checkbox’ : définit une case à cocher, exemple : 
  • type=’color’ : affiche une palette de couleur (ne fonctionne pas sur Safari et IE)
    Exemple : couleur : 
  • type=’date’ : affiche une sélection de date (ne fonctionne pas sur Firefox et IE),
    Exemple: 
  • type=’datetime’ :affiche une sélection de date et heure avec fuseau horaire (ne fonctionne pas sur Firefox, IE et Google Chrome)
    Exemple: Date :
  • type=’datetime-local’ : affiche une sélection de date et heure sans fuseau horaire (ne fonctionne pas sur Firefox, IE)
    Exemple:
    Date :
  • type=’email’ : pour saisir un email, avec validation lorqu’on on soumet le formulaire. Safari sur iPhone reconnaît le type email , et change le clavier à l’écran en ajoutant @ et l’option .com (pris en charge qu’à partir de IE-10 et ne fonctionne pas sur Safari).
    Exemple : Email :
  • type=’file’ : définit un champ de sélection de fichier avec un bouton « Parcourir … » (pour le téléchargement de fichiers).
    Exemple : Votre fichier :
  • type=’hidden » : définit une valeur cachée à transmettre au serveur
  • type=’image » : image qui fera office de bouton d’envoi.
    Exemple : 
  • type=’month’ : pour saisir le mois et l’année (ne fonctionne pas sur IE et Firefox).
    Exemple : Année-Mois :
  • type=’number » : pour saisir un nombre (à partir de IE-10).
    Exemple :
  • type=’password’ : pour saisir une valeur cryptée, comme un mot de passe.
    Exemple : Login : 
  • type=’radio’ : affiche un bouton radio.
    Exemple : 
  • type=’range’ : pour saisir une valeur avec un curseur (à partir de IE-10)
    Exemple : 
  • type=’reset’: pour initialiser le formulaire
    Exemple (saisissez du contenu puis appuyer sur le bouton reset ) :  
  • type=’search’ : définit un champ de recherche comme un moteur de recherche (ne fonctionne pas sur IE, Firefox et Opéra)
  • type=’submit’ : bouton pour soumettre le formulaire
  • type= »tel » : pour saisir un numéro de téléphone (fonctionne sur aucun navigateur)
  • type=’text’ : champ par défaut pour saisir du texte.
    Exemple : 
  • type=’time’ : affiche une heure (ne fonctionne pas sur Firefox, IE)
    Exemple :
  • type=’url’ : pour saisir une URL. Safari sur iPhone reconnaît ce type, et change le clavier à l’écran en ajoutant l’option de .com (à partir de IE-10).
  • type=’week’ : affiche le numéro de la semaine et l’année (ne fonctionne pas sur IE, Firefox).
    Exemple : :
width
Spécifie la largeur des boutons de type image 
Syntaxe :
<input type="image" width="200" >

La balise <input> prend aussi en charge les attributs globaux

Attibuts de type événement

La balise <input> prend en charge les événements de type formulaire. La balise <input> prend aussi en charge les événements souris

Voir les autres balises pour l’intégration d’un formulaire

button– datalist– fieldset– form– keygen– label– legend– meter– optgroup– option– outputprogressselect– textarea

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.