TextInput
Einzeiliges Feld für kurzen Text: ein Name, eine E-Mail-Adresse, ein Code.
Auf dieser Seite
Playground
Zustand
Hintergrund
<div class="feitio-field"><label class="feitio-label" for="pg-t">Name der Erinnerung</label><input class="feitio-input" id="pg-t" value="Pflanzen gießen"></div>Wann verwenden
- Für Antworten, die auf einer Zeile passen und die Person tippen muss.
Wann nicht verwenden
- Langer Text: Textarea.
- Zeit: TimeInput.
- Bekannte Optionen: Radios oder Select.
Beispiele
Code
Postal code
City
Reminder subject
Breiten
Die Breite zählt die Zeichen der Antwort (4, 10, 20, 40) plus Padding: die Größe des Feldes gibt der Person die Größe der Antwort.
Code anzeigen
<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">States
Disabled ist selten: gestrichelte Linie und gedämpfter Hintergrund. Wenn der Wert nie ändert, zeigen Sie ihn als Text, nicht als Feld.
Do and don't
Do
Verification code
Vier Ziffern, ein Feld für vier.
Don’t
Verification code
Ein riesiges Feld für vier Ziffern lässt die Person zweifelhaft sein, was sie schreiben soll.
Barrierefreiheit
- Verwenden Sie das richtige
typeundautocomplete(email,tel,one-time-code): Mobile zeigt die richtige Tastatur und der Browser füllt es ein. - Zahlen, die keine Mengen sind (Codes, Postleitzahlen), verwenden
inputmode="numeric", nichttype="number".
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-input" | erforderlich | Die Form des Feldes. |
data-width | "2", "4", "10", "20", "40" | Wie viele Zeichen die Antwort hat. Ohne es füllt es die Spalte. |
type, inputmode, autocomplete | diese der Antwort | Das richtige Tastaturlayout und das Autocomplete-Feld. |
aria-invalid="true" | ein Fehler | Die Weinzeile. |
disabled | — | Selten: den Wert als Text anzeigen. |