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é

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’attribut 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’attribut 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’attribut 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’attribut 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’attribut 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

Attributs 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– output–progress – select– textarea