<input>

Description

L’élément <input> est le composant de formulaire le plus polyvalent. Son comportement est entièrement défini par l’attribut type. Il est void (auto-fermant) et ne contient aucun enfant. Toujours lui associer un <label> pour l’accessibilité.

Syntaxe

<label for="email">Email :</label>
<input type="email" id="email" name="email" required>

Exemples

Types courants :

<!-- Texte -->
<input type="text" name="nom" placeholder="Votre nom">

<!-- Email avec validation -->
<input type="email" name="email" required autocomplete="email">

<!-- Mot de passe -->
<input type="password" name="mdp" minlength="8" required>

<!-- Nombre avec limites -->
<input type="number" name="age" min="18" max="120">

<!-- Date -->
<input type="date" name="naissance">

<!-- Case à cocher -->
<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte les CGU</label>

<!-- Bouton radio -->
<input type="radio" id="css" name="langage" value="css">
<label for="css">CSS</label>

<!-- Fichier -->
<input type="file" name="avatar" accept="image/*">

<!-- Recherche -->
<input type="search" name="q" placeholder="Rechercher…">

<!-- Plage -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- Couleur -->
<input type="color" name="couleur" value="#336699">

Attributs spécifiques

Attribut	Type	Description
type	enum	Comportement du champ : text, email, password, number, date, time, datetime-local, month, week, tel, url, search, checkbox, radio, file, range, color, hidden, submit, reset, button, image.
name	string	Nom du champ, envoyé avec la valeur lors de la soumission.
value	string	Valeur initiale du champ.
placeholder	string	Texte d’aide affiché quand le champ est vide.
required	boolean	Rend le champ obligatoire pour la soumission.
disabled	boolean	Désactive le champ (non soumis, non focusable).
readonly	boolean	Empêche la modification (valeur soumise).
autocomplete	string	Contrôle l’autocomplétion : on, off, ou un token (email, username, current-password…).
list	string	ID d’un <datalist> pour des suggestions.
min / max	string	Valeur minimale/maximale (number, date, range…).
minlength / maxlength	integer	Nombre de caractères min/max.
pattern	string	Expression régulière de validation.
multiple	boolean	Autorise plusieurs valeurs (email, file).
accept	string	Types de fichiers acceptés pour type="file".
checked	boolean	État initial coché pour checkbox ou radio.
step	string	Incrément pour number, date, range.

Notes

<label> obligatoire : chaque <input> (sauf type="hidden") doit être associé à un <label>. Utiliser for/id ou encapsuler l’input dans le label. Sans label, les lecteurs d’écran ne peuvent pas identifier le champ.

placeholder ≠ label : placeholder disparaît à la saisie. Il ne remplace pas un <label> visible — les deux sont nécessaires pour l’accessibilité et l’utilisabilité.