Ułatwianie użytkownikom korzystania z formularza w preferowanej przeglądarce
Aby Twój formularz był dostępny dla jak największej liczby osób, użyj elementów stworzonych dla zadania: <input>, <textarea>, <select> i <button>. Jest to podstawa przydatnego formularza.
Domyślne style przeglądarki nie wyglądają dobrze. Zmieńmy to.
Zadbaj o to, aby elementy sterujące formularza były czytelne dla wszystkich
Domyślny rozmiar czcionki elementów sterujących formularza w większości przeglądarek jest za mały. Aby elementy sterujące formularza były czytelne, zmień rozmiar czcionki za pomocą CSS:
Zwiększ font-size i line-height, aby zwiększyć czytelność.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Pomóż użytkownikom poruszać się po formularzu
Następnym krokiem jest zmiana układu formularza i zwiększenie odstępów między jego elementami. Pomoże to użytkownikom zrozumieć, które elementy są ze sobą powiązane.
Właściwość CSS margin zwiększa odstęp między elementami, a właściwości padding – obszar wokół treści elementu.
W przypadku ogólnego układu użyj Flexbox lub Siatki. Dowiedz się więcej o metodach układu CSS.
Sprawdź, czy elementy sterujące formularza wyglądają jak elementy sterujące
Ułatw użytkownikom wypełnianie formularza, stosując dobrze zrozumiałe style elementów sterujących formularza.
Możesz na przykład wykorzystać jednolitą ramkę do elementów <input>.
input,
textarea {
border: 1px solid;
}
Pomóż użytkownikom przesłać formularz
Rozważ użycie elementu background w elemencie <button>, który będzie pasował do stylu witryny. Możesz też zastąpić lub usunąć domyślne style border.
Pomóż użytkownikom poznać bieżący stan
Przeglądarki stosują styl domyślny do :focus.
Możesz zastąpić style etykiety :focus, aby dopasować kolor do swojej marki.
button:focus {
outline: 4px solid green;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o stylizowaniu formularzy
Dlaczego w polu font-size warto używać jednostek względnych?
Jak zwiększyć odstępy między elementami sterującymi formularza?
padding.spacer.margin.boundary.