L'element HTML <input> est le composant essentiel pour saisir des donnees utilisateur dans les formulaires web.
Types d'Éléments Input
Types Textuels et Sémantiques
| Type | Description |
|---|---|
text |
Texte simple sur une seule ligne |
password |
Saisie de mot de passe masquee |
email |
Adresse e-mail avec validation native |
url |
Saisie d'une URL absolue |
tel |
Numero de telephone (clavier numerique sur mobile) |
search |
Champ de recherche avec bouton d'effacement |
Types Numériques et Quantitatifs
| Type | Description |
|---|---|
number |
Controle numerique avec pas (min, max, step) |
range |
Curseur de selection de valeur approximative |
Types de Date et d'Heure
| Type | Description |
|---|---|
date |
Selecteur de date (annee, mois, jour) |
time |
Selecteur d'heure (heures, minutes) |
datetime-local |
Date et heure locales sans fuseau horaire |
month |
Selecteur d'annee et de mois |
week |
Selecteur d'annee et de numero de semaine ISO |
Sélection et Actions
| Type | Description |
|---|---|
checkbox |
Case a cocher ou selection multiple |
radio |
Bouton radio au sein d'un groupe exclusif |
color |
Palette de selection de couleur |
file |
Televersement de fichiers (accept, multiple) |
hidden |
Valeur invisible transmise avec le formulaire |
submit |
Bouton d'envoi du formulaire |
reset |
Reinitialise les champs du formulaire |
button |
Bouton sans comportement par defaut |
Attributs Clés de Validation
| Attribut | Comportement |
|---|---|
required |
Empeche l'envoi si le champ est vide |
pattern="[A-Za-z0-9]+" |
Expression reguliere de validation |
min="1" max="100" |
Limites minimales et maximales |
step="0.5" |
Intervalle d'incrementation autorise |
minlength="5" maxlength="20" |
Nombre minimal et maximal de caracteres |
placeholder="..." |
Texte indicatif temporaire |
readonly |
Empeche la modification mais transmet la valeur |
disabled |
Desactive le champ sans transmettre sa valeur |
autofocus |
Place automatiquement le focus au chargement |
Exemple de Formulaire Complet
<form action="/api/submit" method="POST">
<label for="user-email">Adresse e-mail :</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Mot de passe (8 car. min) :</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Âge :</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
J'accepte les conditions d'utilisation
</label>
<input type="submit" value="S'inscrire" />
</form>