46 of 133 menu

Balise input

La balise input crée divers éléments de formulaire HTML : un champ de saisie standard, un champ pour un mot de passe, une case à cocher (checkbox), des boutons radio, un bouton.

La balise input doit se trouver à l'intérieur de la balise form. Ce n'est pas obligatoire, mais nécessaire pour l'envoi des données au serveur et leur traitement ultérieur via PHP.

Ne nécessite pas de balise fermante.

Attributs

Attribut Description
type Définit le type de champ de saisie. Voir les options ci-dessous.
value Valeur par défaut dans le champ de saisie. Dans le cas d'un bouton, définit son texte. Voir plus en détail l'attribut value.
placeholder Indice dans le champ de saisie, voir plus en détail l'attribut placeholder.
name Nom du champ de saisie. Nécessaire pour récupérer les données du champ de saisie en PHP. Pour le bon fonctionnement du formulaire, les noms des champs de saisie ne doivent pas coïncider les uns avec les autres (dans un même formulaire). S'ils coïncident - en PHP, les données du champ de saisie qui se trouve plus bas dans le code HTML seront reçues.
disabled Bloque l'élément de formulaire (pas seulement input, mais pratiquement n'importe lequel), voir plus en détail l'attribut disabled.

Valeurs de l'attribut type

Valeur Description
text Crée un champ de saisie texte standard.
password Crée un champ de saisie texte pour un mot de passe. Essayez d'y taper du texte - il s'affichera avec des astérisques.
checkbox Crée une case à cocher (checkbox). Voir plus en détail checkbox.
radio Crée un bouton radio. Voir plus en détail radio.
hidden Crée un input caché, qui ne sera pas visible à l'écran, mais enverra les données contenues dans l'attribut value au serveur.
button Crée un bouton. Le clic sur ce bouton n'enverra pas le formulaire au serveur. Il peut être utilisé à l'intérieur d'un lien ou via JavaScript. Par défaut, le bouton n'a pas de texte (exemple de bouton sans texte : ), il est défini à l'aide de value. Voir aussi la balise button, qui crée également un bouton.
submit Crée un bouton qui enverra les données au serveur. Le texte du bouton dépend du navigateur, il peut être changé à l'aide de value. Voir aussi la balise button, qui crée également un bouton.
reset Crée un bouton qui efface le formulaire rempli. Le texte du bouton dépend du navigateur, il peut être changé à l'aide de value.
file Crée un bouton de sélection de fichier. Le design de ce bouton ne peut pas être modifié via CSS (bien qu'il existe des moyens astucieux). Si vous avez besoin d'un tel champ dans un formulaire, alors la balise form doit avoir l'attribut enctype avec la valeur multipart/form-data.

Nouvelles valeurs de l'attribut type en HTML5

Ces valeurs d'attribut sont nouvelles, elles sont apparues uniquement en HTML5, donc dans certains navigateurs elles peuvent ne pas fonctionner ou fonctionner différemment dans différents navigateurs.

Dans le cas où le navigateur ne peut pas comprendre le contenu de l'attribut type (par exemple, s'il n'est pas supporté ou saisi par erreur), il considérera l'élément comme un input texte standard, comme si la valeur dans type était text.

Regardez les exemples ci-dessous dans différents navigateurs. Essayez de saisir du texte dans les inputs et de cliquer sur le bouton d'envoi. Si le texte est incorrect ou que le champ est vide - le navigateur affichera une erreur. Par exemple, si dans un champ de type email vous tapez un email incorrect - le navigateur ne permettra pas d'envoyer le formulaire et affichera un message d'erreur (le texte de l'erreur et son apparence ne peuvent pas être modifiés via html css). Si le champ est vide - le navigateur affichera également une erreur, ceci est réalisé grâce à l'attribut required :

Valeur Description
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Voir aussi

  • la balise textarea,
    qui crée un champ de saisie multiligne
  • l'attribut pattern,
    qui effectue la validation des champs
Français
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Nous utilisons des cookies pour le fonctionnement du site, l'analyse et la personnalisation. Le traitement des données est effectué conformément à la Politique de confidentialité.
accepter tout personnaliser refuser