Jak projektować formy w CSS

Uczynienie formy estetycznie przystojnie jest znaczącym zadaniem, jeśli chcesz poprawić wrażenia użytkownika. Formularz HTML jest najczęściej składający się z niektórych pól wejściowych, menu i przycisku, dlatego możesz zastosować różne właściwości CSS, aby zwiększyć pojawienie się formularza. Zaprezentujemy Ci pewne sposoby, które można zastosować do upiększania form HTML.

Zacznijmy.

Ustaw szerokość pól wejściowych

Wszyscy wiemy, że pola wejściowe mają domyślnie pewną szerokość, jednak możemy zmienić szerokość zgodnie z naszym pragnieniem. Aby zmienić szerokość pola wejściowego, postępuj zgodnie z poniższym kodem.

Html

Wprowadź imię

Tutaj utworzyliśmy pole wejściowe.

CSS

wejście
Szerokość: 80%;

Przypisujemy pole wejściowe szerokość 80%.

Notatka: Szerokość pola wejściowego można określić w px, em, I odsetek.

Wyjście

Szerokość pola wejściowego została zmieniona zgodnie z naszym pragnieniem.

Dodaj miejsce wewnątrz pola wejściowego

Aby ulepszyć przestrzeń wewnątrz pola wejściowego, użyj właściwości wyściółki CSS. Ponadto, aby dodać przestrzeń poza polem wejściowym, gdy istnieje wiele pól wejściowych, dostosuj margines pola wejściowego.

CSS

wejście [type = tekst]
Szerokość: 80%;
Wyściółka: 15px 20px;
Margines: 9px 0px;

Oprócz podania pola wejściowego pewnej szerokości, którą daliśmy również trochę wyściółki i marginesów.

Wyjście

Przestrzeń została dodana wewnątrz i na zewnątrz pola wejściowego.

Jak widać w powyższym kodzie, użyliśmy typu = tekst do stylizacji pola wejściowego. Istnieją również inne typy, na podstawie których możesz stylizować pola wejściowe, takie jak type = hasło (to tylko pola hasła) lub typu = liczba (to tylko pola liczbowe stylu) itp.

Dodawanie granic do pól wejściowych

Możesz dostosować rozmiar i kolor pól wejściowych za pomocą właściwości granicznych CSS, aby dodać więcej styl.

CSS

wejście [type = tekst]
Szerokość: 80%;
Wyściółka: 15px 20px;
Margines: 9px 0px;
granica: 2px stały niebieski;
RADIUS BERDER: 5px;

W powyższym kodzie przypisujemy granicę 2px do pól wejściowych wraz z niebieskim kolorem. Ponadto, aby zakręty ustawiliśmy promieniowca granicznego na 5px.

Wyjście

Promień granic i granic pól został dostosowany zgodnie z pożądaniem.

Kolejną zabawną rzeczą, którą możesz zrobić, jest dodanie tylko dolnej granicy, używając takiej właściwości brzegowej.

CSS

wejście [type = tekst]
Szerokość: 80%;
Wyściółka: 15px 20px;
Margines: 9px 0px;
Border: Brak;
Bottom graniczny: 2px stały niebieski;

Tutaj ustawiliśmy granicę pól wejściowych na żaden i przypisaliśmy dolną granicę 2px.

Wyjście

Dolna granica została pomyślnie dodana.

Zauważyłeś jednak, że kontur pojawił się, gdy skupiliśmy się na polu wejściowym. Co jeśli chcemy to usunąć.

Jak usunąć kontur pola wejściowego za pomocą ostrości

Aby zmienić lub ustawić styl, gdy skupione jest pole wejściowe, możesz użyć „:centrum”Selektor i usuwanie konturu na polu wejściowym, możesz skorzystać z„zarys”Właściwość i ustaw wartość na„nic".

CSS

wejście [type = text]: focus
Zarys: Brak;

Wyjście

Zarys został pomyślnie usunięty.

Dodaj kolor do pól wejściowych

Po prostu używając właściwości kolorów, takich jak kolor i kolor tła, możesz dodać kolor do tekstu i tła pól wejściowych.

CSS

wejście [type = tekst]
Szerokość: 80%;
Wyściółka: 15px 20px;
Margines: 9px 0px;
kolor tła: bisque;
kolor niebieski;

W powyższym kodzie zapewniamy kolor bisque do tła pól wejściowych i niebieskiego koloru do tekstu.

Wyjście

Z powodzeniem dostarczyliśmy trochę koloru tła i tekstu.

Jak dodać styl na skupienie się na polach wejściowych

Możesz dodać kolor graniczny lub tła lub dowolny styl CSS do pola wejściowego na fokus za pomocą: Focus State, więc za każdym razem, gdy użytkownik kliknie na polu, otrzymuje określony styl.

CSS

wejście [type = text]: focus
kolor tła: SkyBlue;

Kolor tła pola wejściowego zmieni się na SkyBlue, gdy użytkownik go kliknie.

Wyjście

Niestandardowy styl na skupieniu jest pomyślnie dodawany do pola wejściowego.

Dodanie obrazu lub ikony w polu wejściowym

Aby Twoje pola wejściowe są bardziej interesujące, możesz dodać do nich obrazy lub ikony. Oto jak to robisz.

CSS

wejście [type = tekst]
Image w tle: URL („E-mail.png ');
Pozycja tła: 10px 6px;
Rozmiar tła: 30px;
Powtórzenie tła: bez powtórzenia;
Wyściółka: 12px 20px 12px 40px;

W powyższym kodzie najpierw dodaliśmy ikonę e -mail i dostosowaliśmy jej rozmiar i pozycję w polu wejściowym za pomocą różnych właściwości CSS.

Wyjście

Ikona e -mail została pomyślnie dodana w polu wejściowym.

Dodaj styl do menu

Często musimy dodawać menu w formach HTML, dlatego też ich stylowanie jest również konieczne. Można to zrobić za pomocą niektórych podstawowych właściwości CSS. Oto przykład.

Html

Piłka nożna
Krykiet
Hokej

W powyższym kodzie utworzyliśmy bardzo podstawowe menu.

CSS

wybierać
Szerokość: 80%;
Wyściółka: 20px;
Border: Brak;
RADIUS BERDER: 5px;
kolor tła: światła;

opcja
Styl czcionki: Kursywa;
Rozmiar czcionki: 20px;

Korzystając z podstawowych właściwości CSS, takich jak granica, promień graniczny i kolor tła. Co więcej, daliśmy również styl opcjom.

Wyjście

Menu zostało stylizowane.

Dodawanie stylu do przycisków

Przyciski są kluczową częścią formy i można je zaprojektować za pomocą właściwości CSS. Oto przykład.

Html

Tutaj po prostu utworzyliśmy pole wejściowe typu przesyłania.

CSS

wejście [type = prześlij]
kolor tła: różowy;
Font-Weight: Bold;
Border: Brak;
Wyściółka: 20px 25px;
Dekoracja tekstu: Brak;
Margines: 6px 4px;

Korzystając z różnych właściwości CSS, takich jak kolor tła, masa czcionki i wyściółka, zaprojektowaliśmy przycisk.

Wyjście

Przycisk został stylizowany.

Wniosek

Uczynienie formy HTML jest atrakcyjna jest absolutnie konieczna i możesz to zrobić, dając styl różnych elementach, które są częścią formy, takiej jak pola wejściowe, menu lub przyciski. Możesz użyć różnych właściwości CSS do stylizacji tych elementów, takich jak; szerokość, kolor tła, kolor, granica, promieniowanie graniczne i wiele innych. Ponadto możesz dodawać ikony lub obrazy w polach wejściowych. Wszystko to i wiele więcej o formularzach stylizacji w CSS jest podkreślone w tym poście.