Style formularzy

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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

Zasoby

• Poznaj CSS
• Metody układu CSS
• Projektowanie wskaźników ostrości
• Przywracam styl domyślny elementu <button>.