Przebieg walidacjiLink do sekcji Przebieg walidacji
Przed pisaniem
Podaj zasady w opisie, na przykład „Do 40 znaków”, aby nikt nie uczył się ich z błędu.
Podczas pisania
Zachowaj ciszę. Błąd przy polu, które czytelnik jeszcze wypełnia, jest szumem.
Po opuszczeniu zmienionego pola
Sprawdź to pole i pokaż jego błąd przy nim. Pól nietkniętych nie ruszaj.
Przy wysłaniu
Sprawdź wszystko. Pokaż każdy błąd pod jego polem i FormErrorSummary na górze, które przejmuje fokus i linkuje do każdego pola.
Podczas poprawiania
Aktualizuj każdy błąd przy polu w trakcie pisania. Podsumowanie zostaje takie, jakie było, do następnego wysłania, więc fokus nigdy nie skacze.
Po sukcesie
Powiedz, co się stało, obok przycisku przez FormActions, w toaście albo jako komunikat flash na następnej stronie.
<form noValidate onSubmit={submit}>
{summary.length > 0 && <FormErrorSummary title={t('form.problems', { count: summary.length })} errors={summary} />}
<TextField id="email" label={t('email')} type="email" autoComplete="email" isRequired
onBlur={check('email')} isInvalid={!!errors.email} errorMessage={errors.email} />
<FormActions status={status}>
<Button type="submit" isPending={sending} pendingLabel={t('sending')}>{t('send')}</Button>
</FormActions>
</form>Etykiety, podpowiedzi i oznaczeniaLink do sekcji Etykiety, podpowiedzi i oznaczenia
- Każde pole ma widoczną etykietę nad sobą. Tekst zastępczy jest przykładem, nigdy etykietą: znika podczas pisania.
- Oznacz mniejszą grupę. Gdy większość pól jest wymagana, oznaczaj opcjonalne przez
optionalLabel; w przeciwnym razie oznaczaj wymagane.requiredLabelzastępuje gwiazdkę słowem. - Zasady umieszczaj w
description. Jest powiązany z polem, więc czytnik ekranu odczytuje go po etykiecie. - Użyj
statusdla dobrych wiadomości i podpowiedzi, które pojawiają się podczas pisania, takich jak „Nazwa jest wolna”, w tonie ok, info lub warn.
Typy i autocompleteLink do sekcji Typy i autocomplete
Właściwy typ daje właściwą klawiaturę na telefonach, a autocomplete pozwala przeglądarkom i menedżerom haseł wypełnić pole, czego WCAG wymaga dla danych osobowych.
| Pole | type | autoComplete |
|---|---|---|
| Imię i nazwisko | text | name |
email | email | |
| Telefon | tel | tel |
| Obecne hasło | password | current-password |
| Nowe hasło | password | new-password |
| Kod jednorazowy | text, inputMode="numeric" | one-time-code |
| Organizacja | text | organization |
| Kod pocztowy | text | postal-code |
Układ od 320 pxLink do sekcji Układ od 320 px
- Jedna kolumna, co najwyżej około 32 rem szerokości. Oko porusza się w dół, a nie zygzakiem.
- Dwa pola dzielą rząd tylko wtedy, gdy należą do siebie i są krótkie, na przykład kod pocztowy i miasto, i tylko od breakpointu
smw górę. - Grupuj powiązane pola w
fieldsetzlegendalbo użyj CheckboxGroup i RadioGroup, które robią to za ciebie. - FormActions stawia główny przycisk na końcu na szerokich ekranach, a na wąskich układa przyciski w stos na pełną szerokość, z głównym na górze.
- Długi formularz trzyma swoje przyciski w widoku przez
sticky.
Gęstość w formularzachLink do sekcji Gęstość w formularzach
Formularze w sieci zachowują standardową gęstość: kontrolki 36 px i miejsce między polami. Zwarta gęstość jest dla narzędzi desktopowych, gdzie wiele ustawień mieści się na jednym ekranie. Obie utrzymują cele powyżej 24 px, a tekst pól zostaje na 16 px na telefonach, aby iOS nie powiększał widoku.