Types d'input en HTML
Les éléments de formulaire ont cartographié les balises dans form. Types d'input zooment sur une balise : input. type choisit le visage du contrôle. Cette leçon est un catalogue de type. Aides comme required viennent ensuite.
Pourquoi les types comptent
type=text marche presque partout, mais le mobile montre le mauvais clavier, les mots de passe restent visibles, les dates deviennent du texte libre. Adapter type aux données améliore saisie, contrôles et forme des valeurs.
Réponse directe
1) Mettez type sur input — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Associez chaque visible à label. 3) Radios d'une réponse partagent name ; checkbox est indépendante. 4) Préférez button type=submit. 5) type ne choisit que le visage — action/method et attributs suivants sont d'autres couches.
📊 Starter input types
| type | Use | Beginner tip |
|---|---|---|
| text | General single-line text | Default when nothing fitter exists |
| Email addresses | Mobile email keyboard + light format check | |
| password | Masked secrets | Never store the real password in page source |
| number | Numeric values | Good for ages/qty — still validate on the server |
| checkbox | Independent on/off | Many can be checked at once |
| radio | One choice in a named group | Same name = one group |
| date | Calendar date | Browser UI varies; value is YYYY-MM-DD style |
| file | Upload a file | Needs multipart form encoding for real uploads |
| hidden | Value not shown | Still submitted with name/value |
Inscription : champs typés
Petit formulaire d'adhésion : email, mot de passe, âge number et date de début.
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">
<label for="pw">Password</label>
<input id="pw" name="pw" type="password">
<label for="age">Age</label>
<input id="age" name="age" type="number">
<label for="start">Start date</label>
<input id="start" name="start" type="date">
<button type="submit">Join</button>
</form>
Lire la démo d'inscription
- email → UI e-mail
- password masque les caractères
- number saisie numérique
- date contrôle de date
- label avec for/id ; name comme clé
- action/method inchangés
Sondage : checkbox, radio et file
Bascules et envois utilisent le même input avec un autre type. Radios partagent name=plan. checkbox seule. file ouvre un sélecteur.
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>
<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>
<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">
<button type="submit">Send</button>
</form>
Lire la démo sondage
- checkbox newsletter indépendante
- même name → un choix radio
- label rend le texte cliquable
- file + multipart pour les envois
- fieldset encadre Plan — focus sur type
- leçon suivante : attributs comme required
Choisir le bon type
- texte court : text
- email/mot de passe : email/password
- quantité ou âge : number
- option exclusive : radio même name
- bascule indépendante : checkbox
- jour calendrier : date
- pièce jointe : file
- caché : hidden
- multiligne reste textarea
Pratique — changer les types
- Copiez l'inscription ; email→text
- password brièvement en text
- second number pour quantité
- radios avec names différents puis corrigez
- Newsletter + Pro ; notez les names attendus
- file sans multipart — prise de conscience
- Phrase : type choisit le visage de l'input
Erreurs faciles
- text pour mots de passe
- radios avec names différents
- sans label
- attendre un upload file sans encodage
- croire que type remplace action/name
- input pour long texte au lieu de textarea
- confondre avec la leçon d'attributs
Résumé
- un input — plusieurs visages via type
- adaptez type aux données
- radios partagent name ; checkbox seule
- étiquetez toujours le visible
- éléments de formulaire et attributs d'input sont des couches séparées
- ensuite : attributs d'input
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut