HTML Balise input

Définition et utilisation La balise <input>

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.

La balise <input> est utilisée pour créer des champs interactifs dans un formulaire HTML. Elle peut prendre plusieurs types, en fonction de l'interaction souhaitée.

Types de champs

Voici quelques-uns des types de champs les plus couramment utilisés avec la balise <input> :

Texte : Utilisé pour les champs de saisie de texte courts.
Mot de passe : Masque les caractères pour les champs de mot de passe.
Checkbox : Permet à l'utilisateur de sélectionner une ou plusieurs options.
Radio : Permet à l'utilisateur de sélectionner une seule option parmi plusieurs.
Bouton radio : Similaire à la radio, mais avec un style personnalisé.
Submit : Utilisé pour soumettre un formulaire.

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 :

Exemple : 📋 Copier 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>

Cet exemple crée un formulaire avec un champ de saisie de texte pour le nom d'utilisateur, un champ de mot de passe, et un bouton de soumission.

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 :

La balise <input> en HTML prend plusieurs attributs qui permettent de contrôler son comportement et son apparence. Voici quelques-uns des attributs les plus couramment utilisés :

type

L'attribut type spécifie le type de champ à afficher. Les valeurs courantes sont :

text : Champ de texte simple.
password : Champ de mot de passe.
checkbox : Case à cocher.
radio : Bouton radio.
submit : Bouton de soumission.

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 ")

Attributs globaux

La balise <input> prend également en charge les Attributs globaux dans HTML.

Attributs de l'événement

La balise <input> prend également en charge les Attributs de l'événement au format HTML.

Pages connexes

Tutoriel HTML: formulaires HTML

Tutoriel PHP: traitement des formulaires en php

Retour à l'accueil du site

Par carabde 10 mars 2014

HTML La balise <input> élément d'entré de données

Balises html

Plus...