Balise HTML <input>

Définition et utilisation

<input> La balise définit un champ d'entrée où l'utilisateur peut saisir des données.

<input> L'élément est l'élément de formulaire le plus important.

<input> L'élément peut être affiché de multiples manières, cela dépend de Propriété type.

Voici différents types d'entrée :

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(valeur par défaut)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Voir également Propriété typePour voir des exemples de chaque type d'entrée !

Exemple

Formulaire HTML contenant trois champs d'entrée ; deux champs de texte et un bouton de soumission :

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

Essayez-le vous-même

Astuces et commentaires

Astuces :Toujours utiliser le tag <label> pour définir des étiquettes pour les éléments suivants :

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Attribut

Attribut Valeur Description
accept
  • Extension de fichier
  • audio/*
  • video/*
  • image/*
  • Type de média

Définit le type de fichier à soumettre via le téléversement de fichier.

Définit les filtres de types de fichiers que l'utilisateur peut sélectionner dans le dialogue de fichier d'entrée (seulement applicable pour type="file").
alt Texte Définit le texte alternatif de l'image (seulement applicable pour type="image").
autocomplete
  • on
  • off
 Définit si l'élément <input> doit activer l'auto-complétion.
autofocus autofocus Définit que l'élément <input> doit obtenir automatiquement le focus lors du chargement de la page.
checked checked Définit que l'élément <input> doit être préselectionné lors du chargement de la page (aplicable pour type="checkbox" ou type="radio").
dirname inputname.dir Définit l'orientation du texte à soumettre.
désactivé désactivé Définit que l'élément <input> doit être désactivé.
form ID du formulaire Définit le formulaire auquel appartient l'élément <input>.
formaction URL Définit l'URL de traitement des fichiers des contrôles d'entrée lors de la soumission du formulaire (aplicable pour type="submit" et type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Définir comment les données du formulaire doivent être codées lors de leur soumission au serveur (applicable pour type="submit" et type="image").
formmethod
  • get
  • post
 Définir la méthode HTTP à utiliser pour envoyer les données vers l'URL d'action (applicable pour type="submit" et type="image").
formnovalidate formnovalidate Définir que le champ de formulaire ne doit pas être validé lors de la soumission du formulaire.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nom du cadre 		Définir où afficher la réponse reçue après avoir soumis le formulaire (applicable pour type="submit" et type="image").
height Pixels Définir la hauteur de l'élément <input> (seulement applicable pour type="image").
list datalist_id Référence à l'élément <datalist> contenant les options prédéfinies pour l'<input>.
max
  • numérique
  • Date
 Définir la valeur maximale de l'élément <input>.
maxlength numérique Définir le nombre maximum de caractères autorisés dans l'élément <input>.
min
  • numérique
  • Date
 Définir la valeur minimale de l'élément <input>.
minlength numérique Définir le nombre minimum de caractères requis dans l'élément <input>.
multiple multiple Définir si l'utilisateur peut saisir plusieurs valeurs dans l'élément <input>.
name Texte Définir le nom de l'élément <input>.
pattern Expression régulière Définir l'expression régulière pour vérifier la valeur de l'élément <input>.
placeholder Texte Définir un court rappel de la valeur attendue de l'élément <input>.
popovertarget ID de l'élément Définir l'élément popup à appeler (seulement applicable pour type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Définir ce qui se passe lorsque vous cliquez sur le bouton (seulement applicable pour type="button").
readonly readonly Définir que les champs d'entrée sont en lecture seule.
required required Définir que les champs d'entrée doivent être remplis avant de soumettre le formulaire.
size numérique Définir la largeur de l'élément <input> (en nombre de caractères).
src URL URL de l'image utilisée comme bouton de soumission (seulement applicable pour type="image").
step
  • numérique
  • any
 Définit l'intervalle entre les nombres valides dans le champ d'entrée.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Définit le type de l'élément <input> à afficher.
value Texte Définit la valeur de l'élément <input>.
width Pixels Définit la largeur de l'élément <input> (seulement applicable pour type="image").

Attributs globaux

<input> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<input> Les balises prennent également en charge Attributs d'événement dans HTML.

Configuration CSS par défaut

Aucun.

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Pages associées

Tutoriel HTML :

Manuel de référence HTML DOM :