Attributs d'input en HTML
Les types d'input ont choisi le visage avec type. Les attributs d'input affinent le comportement sur la même balise : indices, obligatoire, plages, longueur, motifs, verrous. Catalogue d'aides quotidiennes — pas une seconde carte de types ni l'astuce form= suivante.
Pourquoi les attributs comptent
Un type correct laisse des trous : champs vides obligatoires, âges hors plage, codes trop longs. Les attributs ajoutent des contrôles légers. En prod, validez aussi côté serveur.
Réponse directe
1) Gardez name, id, value. 2) placeholder est un indice — pas un label. 3) required pour l'obligatoire. 4) min/max/step pour nombre/date ; maxlength pour le texte ; parfois pattern. 5) readonly visible et souvent envoyé ; disabled bloque et souvent n'envoie pas. 6) Les attributs affinent type — ne le remplacent pas ; distincts de form=.
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
Profil : obligatoire, indices, longueur
Petit formulaire : nom required avec placeholder, identifiant avec maxlength/pattern, ville optionnelle.
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
Lire la démo profil
- required sur nom et identifiant
- placeholder seulement si vide — le nom vient du label
- maxlength=12
- pattern lettres/chiffres/_
- ville sans required
- type=text déjà choisi ; attributs affinent
Réservation : plages et verrous
Nombre et date gagnent avec min/max/step. Code readonly visible et souvent envoyé ; promo disabled souvent omis.
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
Lire la démo réservation
- min/max/step invités et nuit
- value=2 départ modifiable
- readonly garde le code et envoie souvent
- disabled bloque l'édition et souvent l'envoi
- limites de date avec type=date
- suite : association form=id
Choisir les bons aides
- Doit être rempli : required
- Indice vide : placeholder (+ label)
- Bornes nombre/date : min max step
- Plafond de caractères : maxlength
- Format simple : pattern
- Voir sans éditer et envoyer : readonly
- Bloquer et souvent ne pas envoyer : disabled
- Câblage : name id value
- Ne pas retravailler type ici
Pratique — resserrer avec des attributs
- Profil ; retirez required puis remettez
- Videz placeholder ; gardez label
- maxlength à 20
- Invités hors min/max
- Alternez readonly sur le code
- Comparez envoi code vs promo
- Phrase : attributs affinent ; type a choisi le visage
Erreurs faciles
- placeholder à la place du label
- désactiver un champ à envoyer
- se fier seulement au navigateur
- min/max sur des types qui les ignorent
- pattern trop complexe
- confondre avec le catalogue type
- sauter trop tôt vers form=
Résumé
- Les attributs affinent après type
- Quotidien : required, placeholder, plages, maxlength, pattern
- readonly souvent envoyé ; disabled non
- placeholder suggère ; label nomme
- Gardez name/id/value
- Suite : attributs form de l'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