Field

Ein Felds Label, Hinweis, Steuerung und Fehler, immer in derselben Reihenfolge und Abstand.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-name">Name der Erinnerung</label><input class="feitio-input" id="pg-name"></div>

Wann verwenden

• Um jedes Formularfeld: TextInput, Textarea, Select, TimeInput.

Wann nicht verwenden

• Für eine Gruppe von Optionen (Radios, Checkbox): die Gruppe verwendet Fieldset, mit der Überschrift im legend.

Beispiele

<div class="feitio-field">
  <label class="feitio-label" for="nome">Nome do lembrete</label>
  <span class="feitio-hint" id="nome-dica">Aparece na notificação</span>
  <input class="feitio-input" id="nome" aria-describedby="nome-dica nome-erro" aria-invalid="true">
  <span class="feitio-error-message" id="nome-erro">…Escreva um nome</span>
</div>

Platzhaltertext

• Erlaubt als kurzes zusätzliches Beispiel, unter einem Label, das bleibt.
• Niemals anstelle des Labels oder Hinweises: es verschwindet, wenn die Person tippt.
• Niemals mit benötigten Informationen: das geht in den Hinweis, der bleibt.

Anatomie

Schreiben

• Label: ein kurzes Substantiv oder eine direkte Frage, ohne Doppelpunkt.
• Hinweis: nur wenn es beim ersten Mal hilft, richtig zu sein.
• Optional: "(optional)" am Ende des Labels.

Barrierefreiheit

• Das Label ist ein echtes <label for>: damit klicken Sie das Feld fokussieren.
• Hinweis und Fehler gehen in aria-describedby; Screenreader lesen sie mit dem Label.

Attribute