Pomóż użytkownikom wypełnić formularz w preferowanej przeglądarce
Aby mieć pewność, że formularz jest dostępny dla jak największej liczby osób, używaj elementów
zadanie: <input>
, <textarea>
, <select>
i <button>
. To jest punkt odniesienia dla użytego formularza.
Domyślne style przeglądarki nie wyglądają zbyt 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 mieć pewność, że elementy sterujące formularzem będą czytelne, zmień rozmiar czcionki za pomocą CSS:
Zwiększ wartości font-size
i line-height
, by poprawić czytelność.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Pomóż użytkownikom poruszać się po formularzu
Następnie zmień układ formularza i zwiększ odstępy między jego elementami, aby pomóc 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ść padding
zwiększa przestrzeń wokół zawartości elementu.
Aby wybrać ogólny układ, użyj Flexbox lub Siatka. Dowiedz się więcej o metodach układu CSS.
Sprawdź, czy elementy sterujące formularza wyglądają jak elementy sterujące formularzem
Ułatw użytkownikom wypełnianie formularza, używając dobrze zrozumiałych stylów elementów sterujących formularza.
Na przykład utwórz styl elementów <input>
z jednolitym obramowaniem.
input,
textarea {
border: 1px solid;
}
Pomóż użytkownikom przesłać formularz
Zastanów się, czy nie warto użyć background
w elemencie <button>
, aby pasował do stylu witryny.
i zastąp lub usuń domyślne style border
.
Pomóż użytkownikom zrozumieć bieżący stan
Przeglądarki stosują styl domyślny do elementu :focus
.
Możesz zastąpić style atrybutu :focus
, aby dopasować kolor do marki.
button:focus {
outline: 4px solid green;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat doboru formularzy
Dlaczego w funkcji font-size
należy używać jednostek względnych?
Jak zwiększyć odstępy między elementami sterującymi formularza?
margin
.spacer
.boundary
.padding
.