TextInput
Un champ à une ligne pour un court texte : un nom, une adresse e-mail, un code.
Sur cette page
Playground
État
Fond
<div class="feitio-field"><label class="feitio-label" for="pg-t">Nom du rappel</label><input class="feitio-input" id="pg-t" value="Arroser les plantes"></div>Quand l'utiliser
- Pour des réponses qui tiennent sur une seule ligne et où la personne doit taper.
Quand ne pas l'utiliser
- Texte long : Textarea.
- Heure : TimeInput.
- Options connues : Radios ou Select.
Exemples
Code
Postal code
City
Reminder subject
Largeurs
La largeur compte les caractères de la réponse (4, 10, 20, 40), plus l'espace de remplissage : la taille du champ indique à la personne la taille de la réponse.
Afficher le code
<input class="feitio-input" data-width="4" inputmode="numeric" autocomplete="one-time-code">
<input class="feitio-input" data-width="10" autocomplete="postal-code">
<input class="feitio-input" data-width="20">
<input class="feitio-input" data-width="40">États
Désactivé est rare : ligne pointillée et fond atténué. Si la valeur ne change jamais, affichez-la en texte, pas en champ.
Faire et ne pas faire
Do
Verification code
Quatre chiffres, un champ pour quatre.
Don’t
Verification code
Un champ énorme pour quatre chiffres incite la personne à douter de ce qu'elle doit écrire.
Accessibilité
- Utilisez le bon
typeetautocomplete(email,tel,one-time-code) : le mobile affiche le clavier approprié et le navigateur complète automatiquement. - Les nombres qui ne sont pas des quantités (codes, codes postaux) utilisent
inputmode="numeric", pastype="number".
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-input" | obligatoire | La forme du champ. |
data-width | "2", "4", "10", "20", "40" | Combien de caractères a la réponse. Sans cela, elle remplit la colonne. |
type, inputmode, autocomplete | ceux de la réponse | Le clavier et le remplissage automatique à droite. |
aria-invalid="true" | avec une erreur | Ligne de vin. |
disabled | — | Rare : préférer afficher la valeur sous forme de texte. |