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 |