HTML Balise <input>

Définition et utilisation La balise <input>

LES BALISES HTML

La balise <input> spécifie un champ de saisie où l'utilisateur peut entrer des données.

Les éléments <input> sont utilisés dans un élément <form> pour déclarer des contrôles d'entrée qui permettent aux utilisateurs d'entrer des données.

Le champ d'entrée <input> a plusieurs variétés en fonction de l'attribut type voir le tableau en bas.

Exemple Un formulaire HTML avec trois éléments input ; dont deux champs de saisie et un bouton :

Sélectionner le code


	  <form action="page cible">
	    Nom: <input type="text" name="nom"><br>
	    Prénom : <input type="text" name="pnom"><br>
	    <input type="submit" value="Envoyer">
	  </form>

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

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

Astuces et conseils

Remarque : L’élément <input> est toujours vide, il ne doit contenir que des attributs.

image asstuce Astuce : Utilisez l'élément <label> pour définir des étiquettes pour les éléments <input>.

Différences entre HTML 4.01 et HTML5

Dans HTML 4.01, l'attribut " align " est obsolète et n'est plus supporté en HTML5. Utiliser le CSS à la place.

En HTML5, la balise <input> a plusieurs nouveaux attributs, et l'attribut type a plusieurs nouvelles valeurs.

Différences entre HTML et XHTML

En HTML, la balise <input> n'a aucune balise de fin.

En XHTML, la balise <input> doit être correctement fermée, comme ça <input type="monType" value="" />.

Les attributs de l’élément input :

Nouveau : Nouveauté en HTML5.

Attribut	Valeur	Description
accept	audio/* video/* image/* MIME_type	Spécifie les types de fichiers que le serveur doit accepter (uniquement pour le type = " file ")
align	left right top middle bottom	N'est pas prise en charge en HTML5. Déconseillée dans HTML 4.01. Spécifie l'alignement d'une image d'entrée (uniquement pour type = " image ")
alt	text	Spécifie un texte de remplacement pour les images (uniquement pour type = " image ")
autocomplete Nouveau	on off	Spécifie si un élément <input> devrait avoir la saisie automatique activé
autofocus Nouveau	autofocus	Spécifie qu'un élément <input> doit obtenir automatiquement le focus lorsque la page est chargée
checked	checked	Spécifie qu'un élément <input> devrait être présélectionné (coché ) lorsque la page est chargée (pour le type = " checkbox " ou le type = " radio ")
disabled	disabled	Spécifie qu'un élément <input> doit être désactivé
form Nouveau	form_id	Spécifie un ou plusieurs formulaires auxquelles l'élément <input> appartient
formaction Nouveau	URL	Spécifie l'URL du fichier qui traitera le contrôle d'entrée lorsque le formulaire est envoyé (pour type = " submit " et type = " image ")
formenctype Nouveau	application/x-www-form-urlencoded multipart/form-data text/plain	Spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une demande au serveur (pour type = " submit " et type = " image ")
formmethod Nouveau	get post	Définit la méthode HTTP pour l'envoi de données vers l'URL d'action (pour type = " submit " et type = " image ")
formnovalidate Nouveau	formnovalidate	Spécifie que les éléments cette form ne doivent pas être validées lors de la soumission
formtarget Nouveau	_blank _self _parent _top framename	Spécifie l'emplacement où afficher la réponse reçue après avoir rempli le formulaire (pour type = " submit " et type = " image ")
height Nouveau	pixels	Spécifie la hauteur d'un élément <input> (uniquement pour type = " image ")
list Nouveau	datalist_id	Fait référence à un élément <datalist> qui contient les options prédéfinies pour un élément <input>
max Nouveau	number date	Spécifie la valeur maximale d'un élément <input>
maxlength	number	Spécifie le nombre maximal de caractères autorisés dans un élément <input>
min Nouveau	number date	Spécifie une valeur minimale d'un élément <input>
multiple Nouveau	multiple	Spécifie qu'un utilisateur peut entrer plusieurs valeurs dans un élément <input>
name	text	Spécifie le nom d'un élément <input>
pattern Nouveau	regexp	Spécifie une expression régulière à laquelle la valeur de l'élément <input> doit être comparée
placeholder Nouveau	text	Spécifie une courte indication qui décrit la valeur attendue de l'élément <input>
readonly	readonly	Spécifie qu'un champ d'entrée est en lecture seule
required Nouveau	required	Spécifie qu'un champ de saisie doit être rempli avant d'envoyer le formulaire
size	number	Spécifie la largeur, en caractères, d'un élément <input>
src	URL	Spécifie l'URL de l'image à utiliser comme un bouton d'envoi (uniquement pour type = " image ")
step Nouveau	number	Spécifie les intervalles numériques légales pour un champ de saisie
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Spécifie le type de l'élément <input> à afficher
value	text	Spécifie la valeur d'un élément <input>
width Nouveau	pixels	Spécifie la largeur d'un élément <input> (uniquement pour type = " image ")