Jak stylizować formularze za pomocą CSS: przewodnik dla początkujących

Aplikacje gromadzą dane głównie za pomocą formularzy. Weźmy ogólny formularz rejestracyjny, na przykład: istnieje kilka pól, w których użytkownicy mogą wprowadzić informacje, takie jak imię i nazwisko, adres e-mail itp.

W dawnych czasach strony internetowe miały zwykłe, nudne formularze HTML z brak stylów. To było zanim CSS wszystko zmienił. Teraz możemy tworzyć ciekawsze, bardziej żywe formularze, korzystając z najnowszych funkcji CSS.

Nie musisz wierzyć mi na słowo. Poniżej znajduje się typowy formularz HTML bez CSS.

Oto ten sam formularz, wzbogacony odrobiną CSS .

W tym samouczku pokażemy, jak odtworzyć powyższy formularz, a także kilka innych niesamowitych modyfikacje, które możesz zaimplementować, aby tworzyć atrakcyjne wizualnie, przyjazne dla użytkownika formularze.

W sześciu krokach pokażemy, jak stylizować formularze za pomocą CSS:

1. Ustawienie box-sizing
2. Selektory CSS dla elementów wejściowych
3. Podstawowe metody stylizacji pól tekstowych
4. Stylizowanie innych typów wprowadzania
5. Pseudoklasy interfejsu użytkownika
6. Dane wejściowe, których nie można dostosowywać

Zanim przejdziemy do tematu, ważne jest, aby zrozumieć, że nie ma określonego stylu dla formularzy. Możliwości ogranicza tylko Twoja wyobraźnia. Ten przewodnik ma na celu pomóc Ci rozpocząć drogę do tworzenia własnych unikalnych projektów za pomocą CSS.

Zaczynajmy!

Ustawianie rozmiaru pudełka

Zwykle ustawiam * {box-sizing:border-box;} nie tylko dla formularzy, ale także dla stron internetowych. Gdy to ustawisz, szerokość wszystkich elementów będzie zawierać dopełnienie.

Na przykład ustaw szerokość i dopełnienie w następujący sposób.

.some-class { width:200px; padding:20px;}

Element .some-class bez box-sizing:border-box będzie miał szerokość większą niż 200px, co może być problemem. Dlatego większość programistów używa border-box dla wszystkich elementów.

Poniżej znajduje się lepsza wersja kodu. Obsługuje również pseudoelementy :before i :after.

*, *:before, *:after { box-sizing: border-box;}

Wskazówka: selektor * wybiera wszystkie elementy w dokumencie.

Selektory CSS dla elementów wejściowych

Najłatwiejszy sposób zaznaczania elementy wejściowe mają używać selektorów atrybutów CSS.

Te selektory będą wybierać wszystkie elementy wejściowe w dokumencie. Jeśli chcesz określić selektory, musisz dodać klasy do elementów.

<input type="text" class="signup-text-input" />

Następnie:

.signup-text-input { // styles here}

Podstawowe metody stylizacji jednowierszowych pól tekstowych

Jednowierszowe pola są najczęściej używanymi polami wejściowymi w formularzach. Zwykle jednowierszowe wprowadzenie tekstu to proste pole z obramowaniem (zależy to od przeglądarki).

Oto znacznik HTML dla pola jednowierszowego z symbolem zastępczym.

<input type="text" placeholder="Name" />

Będzie to wyglądać tak:

Możesz użyć następującego Właściwości CSS, aby uatrakcyjnić to pole wejściowe.

• Dopełnienie (aby dodać odstępy wewnętrzne)
• Margines (aby dodać margines wokół pola wejściowego)
• Obramowanie
• Cień ramki
• Promień obramowania
• Szerokość
• Czcionka

Powiększmy w każdej z tych właściwości.

Dopełnienie

Dodanie wewnętrznej spacji do pola wejściowego może poprawić przejrzystość. Możesz to osiągnąć za pomocą właściwości padding.

input { padding: 10px;}

Margines

Jeśli w pobliżu pola wejściowego znajdują się inne elementy, możesz dodać margines wokół niego, aby zapobiec klastrowaniu.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Obramowanie

W większości przeglądarek pola wprowadzania tekstu mają obramowanie, które można dostosować.

.border-customized-input { border: 2px solid #eee;}

Możesz także całkowicie usunąć obramowanie.

.border-removed-input { border: 0;}

Wskazówka: upewnij się, że aby dodać kolor tła lub box-shadow po usunięciu obramowania. W przeciwnym razie użytkownicy nie zobaczą danych wejściowych.

Niektórzy projektanci stron internetowych wolą wyświetlać tylko dolną krawędź, ponieważ przypomina to trochę pisanie w wierszu w notatniku.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Cień ramki

Możesz użyć właściwości CSS box-shadow, aby dodać cień. Możesz osiągnąć szereg efektów, bawiąc się pięcioma wartościami właściwości.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Promień obramowania

Właściwość border-radius może mieć ogromny wpływ na dotyk twoich formularzy. Zakrzywiając krawędzie pól, możesz znacząco zmienić wygląd pól wejściowych.

.rounded-input { padding:10px; border-radius:10px;}

Możesz uzyskać zupełnie inny wygląd i styl, używając razem box-shadow i border-radius.

Szerokość

Użyj właściwości width, aby ustaw szerokość danych wejściowych.

input { width:100%;}

Czcionki

Większość przeglądarek używa innej rodziny czcionek i rozmiaru elementów formularza. W razie potrzeby możemy odziedziczyć czcionkę z dokumentu.

input, textarea { font-family:inherit; font-size: inherit;}

Nadawanie stylu innym typom wprowadzania

Możesz stylizować inne typy wprowadzania, takie jak obszar tekstowy, przycisk opcji, pole wyboru i nie tylko. Przyjrzyjmy się bliżej.

Obszary tekstowe

Obszary tekstowe są podobne do pól tekstowych, z tym wyjątkiem, że pozwalają na wprowadzanie wielowierszowe. Zwykle używasz ich, gdy chcesz zebrać od użytkowników dane o dłuższej formie, takie jak komentarze, wiadomości itp. Możesz użyć wszystkich podstawowych właściwości CSS, które omówiliśmy wcześniej, aby stylizować obszary tekstowe.

Właściwość resize jest również bardzo przydatna w obszarach tekstowych. W większości przeglądarek można domyślnie zmieniać rozmiar obszarów tekstowych wzdłuż osi X i Y (wartość: both). Możesz ustawić go na both, horizontal lub vertical.

Sprawdź ten obszar tekstowy, który nadałem stylowi:

Zobacz pióro
dyomzez autorstwa Supun Kavinda (@SupunKavinda)
na CodePen.

W tym przykładzie użyłem resize:vertical, aby umożliwić tylko zmianę rozmiaru w pionie. Ta praktyka jest stosowana w większości formularzy, ponieważ zapobiega irytującym poziomym paskom przewijania.

Uwaga: jeśli chcesz utworzyć obszary tekstowe z automatyczną zmianą rozmiaru, musisz zastosować podejście JavaScript, które wykracza poza zakres tego artykułu.

Pola wyboru i przyciski opcji

Domyślne pole wyboru i przyciski opcji są trudne do stylizacji i wymagają bardziej złożonego CSS (i HTML).

Aby nadać styl pole wyboru, użyj następującego kodu HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Kilka rzeczy do zapamiętania:

• Ponieważ używamy <label>, aby zawinąć <input>, jeśli klikniesz dowolny element wewnątrz <``label``>, <input> zostanie kliknięty
• Ukryjemy <input>, ponieważ przeglądarki nie pozwalają nam go zbytnio modyfikować
• <span> tworzy niestandardowe pole wyboru
• Użyjemy selektora pseudoklasy input:checked, aby uzyskać status zaznaczenia i styl niestandardowego pola wyboru

Oto niestandardowe pole wyboru (więcej wyjaśnień można znaleźć w komentarzach w CSS):

Zobacz pióro
yLNKQBo autorstwa Supun Kavinda ( @SupunKavinda)
na CodePen.

Oto niestandardowy przycisk opcji:

Zobacz pióro
eYNMQNM autorstwa Supun Kavinda (@SupunKavinda)
w CodePen.

Użyliśmy tej samej koncepcji (input:checked) do stworzenia niestandardowych elementów w obu przykładach.

W przeglądarkach pola wyboru mają kształt prostokątów, a przyciski opcji są okrągłe. Najlepiej zachować tę konwencję we wprowadzaniu niestandardowym, aby uniknąć dezorientacji użytkownika.

Wybierz menu

Wybierz menu, aby użytkownicy mogli wybrać jedną z wielu opcji.

Możesz stylizować element <select>, aby wyglądał bardziej angażująco.

select { width: 100%; padding:10px; border-radius:10px;}

Nie można jednak stylizować listy rozwijanej (ani elementów <option>), ponieważ są one stylizowane domyślnie w zależności od systemu operacyjnego. Jedynym sposobem nadania stylu tym elementom jest użycie niestandardowych list rozwijanych w JavaScript.

Przyciski

Podobnie jak większość elementów, przyciski mają style domyślne.

<button>Click Me</button>

Doprawmy to trochę.

Pseudoklasy interfejsu użytkownika

Poniżej znajdują się niektóre pseudoklasy interfejsu użytkownika, które są powszechnie używane z elementami formularzy.

Można ich używać do wyświetlania powiadomień na podstawie atrybutów elementu:

• :required
• :valid i :invalid
• :checked (już tego używaliśmy)

Można ich użyć aby stworzyć efekty dla każdego stanu:

• :hover
• :focus
• :active

Wygenerowano wiadomości z: wymagane

Aby wyświetlić wiadomość, której wprowadzenie jest wymagane:

Jeśli usuniesz z JavaScriptem, wiadomość "Required" zostanie automatycznie usunięta.

Możemy zrobić to samo z :valid i :invalid pseudoklasy.

: hover and: focus

:hover zaznacza element, gdy wskaźnik myszy znajduje się nad nim. :focus wybiera element, gdy jest aktywny.

Te pseudoklasy są często używane do tworzenia przejść i niewielkich zmian wizualnych. Na przykład możesz zmienić szerokość, kolor tła, kolor obramowania, siłę cienia itp.Użycie właściwości transition z tymi właściwościami sprawia, że zmiany są znacznie płynniejsze.

Oto kilka efektów po najechaniu kursorem na elementy formularza (spróbuj najechać kursorem na elementy).

Zobacz pióro
yLNKZqg autorstwa Supun Kavinda (@SupunKavinda)
w CodePen.

Gdy użytkownicy widzą, że elementy zmieniają się nieznacznie, gdy unoszą się nad nimi, mają poczucie, że element można wykonać. Jest to ważna kwestia podczas projektowania elementów formularza.

Czy zauważyłeś (aś), że (w niektórych przeglądarkach) podczas skupiania się na elementach formularza pojawia się niebieski kontur? Możesz użyć pseudoklasy :focus, aby ją usunąć i dodać więcej efektów, gdy element jest fokus.

Poniższy kod usuwa kontur fokusa dla wszystkich elementów.

*:focus {outline:none !important}

Aby dodać zarys fokusu:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Czy widziałeś wejścia wyszukiwania, które skalować, gdy jest skoncentrowany? Spróbuj tego wejścia.

Zobacz pióro
KKpoJJa autorstwa Supun Kavinda (@SupunKavinda)
w CodePen.

Dane wejściowe, których nie można dostosowywać

W przeszłości stylizowanie elementów formularzy było trudne. Istnieją elementy formularza, nad którymi nie mamy dużej kontroli nad stylami. Na przykład:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Te elementy są dostarczane przez przeglądarkę i stylizowane na podstawie systemu operacyjnego. Jedynym sposobem nadania stylu tym elementom jest użycie niestandardowych elementów sterujących, które są tworzone przy użyciu elementów HTML z możliwością stylizacji, takich jak div, span itp.

Na przykład podczas nadawania stylu <input type="file"> możemy ukryć domyślne dane wejściowe i użyć przycisku niestandardowego.

Niestandardowe kontrolki dla elementów formularza to opracowany dla większości głównych bibliotek JavaScript. Możesz je znaleźć na GitHub.

Podsumowanie

Powinieneś teraz zrozumieć, jak stylizować proste elementy formularza i jak używać niestandardowych kontrolek, gdy pola wejściowe przeglądarki są trudne do stylizacji. Jak powiedziałem na początku tego postu, są to tylko podstawowe elementy składowe stylizacji formularzy CSS. Powinieneś wykorzystać te wskazówki jako podstawę, aby uwolnić swoją wyobraźnię.

Na koniec pamiętaj, aby wszystkie formularze były responsywne.

Szukasz więcej inspiracji do projektowania formularzy? Sprawdź tę kolekcję CodePen.