Style formularzy

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?

Aby mieć pewność, że rozmiar będzie odpowiadać preferencjom użytkownika.
🎉
Aby mieć pewność, że rozmiar odpowiada rozmiarowi poprzedniego elementu.
Spróbuj jeszcze raz.
Aby mieć pewność, że rozmiar będzie pasować do trybu ciemnego.
Spróbuj jeszcze raz.
Aby mieć pewność, że rozmiar odpowiada na zapytania o multimedia.
Spróbuj jeszcze raz.

Jak zwiększyć odstępy między elementami sterującymi formularza?

Za pomocą właściwości CSS padding.
Spróbuj jeszcze raz.
Za pomocą właściwości CSS spacer.
Spróbuj jeszcze raz.
Za pomocą właściwości CSS margin.
🎉
Za pomocą właściwości CSS boundary.
Spróbuj jeszcze raz.

Zasoby