Formularze - jedna z najważniejszych części każdej witryny. Służy do tworzenia formularzy rejestracji, opinii. Na takich stronach jak mail.ru, "Vkontakte" i inne można było zobaczyć pola rejestracyjne, w których należy wprowadzić nie tylko login i hasło, ale także dane osobowe. Może to być płeć, wiek, osobiste preferencje i poglądy, i tak dalej. Wybierając podłogę otrzymują dwie opcje: męską i żeńską. Są one przedstawione jako pola do wyboru. Te pola są tworzone przy użyciu znacznika HTML. Pola w kodzie HTML nie zawsze pasują do projektu witryny, więc muszą być modyfikowane. W tym artykule omówimy, jak zrobić pole wyboru stylizacji w CSS.
Co to jest pole wyboru?
Jest to wartość wejściowego atrybutu tagu zawartego w formularzu tagu. Najczęściej używany do wskazania danych osobowych użytkownika, takich jak osobiste preferencje. Różnica polega na tym, że umożliwia wybór wielu pól jednocześnie.
Utwórz pole wyboru. HTML
Aby umieścić pola wyboru w witrynie, konieczne jest utworzenie formularza. Odbywa się to za pomocą sparowanego tagu formularza. Zawiera 2 atrybuty - akcję i metodę. Pierwsza wskazuje na obsługę formularza, a druga na metodę indeksowania i na przetwarzanie wynikowych wartości.
Tak więc stworzyliśmy formularz, teraz konieczne jest umieszczenie samych pól wyboru. Aby to zrobić, użyj pojedynczego tagu wejściowego. Jest to uniwersalny znacznik używany do tworzenia wszystkich pól formularza. Potrzebujemy tylko pól wyboru. Aby je utworzyć, określ atrybut typedla znacznika wejściowego z polem wyboru wartości. Mamy puste pola wyboru, musimy dodać notację. Możesz wprowadzić je po tagu wejściowym. Aby pole wyboru działało poprawnie, podaj wartość atrybutu i nazwę. Nazwa - wymagana dla programu obsługi, należy podać wartość równą nazwie pola. Wartość jest atrybutem opcjonalnym, ale lepiej jest go używać dla wygody. Istnieje inny atrybut - zaznaczony. Nie ma żadnych wartości użytych do wybrania pola startowego. Oznacza to, że jeśli zaznaczysz pole wyboru dla tego atrybutu, zostanie ono wybrane domyślnie. Oto przykład tworzenia pól wyboru:
Tworzenie pola wyboru. CSS
Standardowe pola wyboru mogą nie być odpowiednie dla twojego projektu. Teraz porozmawiamy o tym, jak stworzyć projekt dla checkbox w CSS. Dzięki zastosowaniu standardowych i prostych metod, oprócz lokalizacji i pozycjonowania, nic nie można zmienić. Aby zmienić lokalizację pola wyboru w CSS, użyj właściwości margin. Z jego pomocą sprawimy, że nasze pola wyboru znajdą się w centrum strony internetowej, w niewielkiej odległości od siebie. Przed rozpoczęciem zmiany właściwości pola wyboru w dokumencie CSS, musimy poprawić nasz kod HTML. Dodaj klasy, identyfikatory i tagi etykiet. Wszystko to jest niezbędne do stylizacji. Utwórz 3 znaczniki tagów dla 3 znaczników wejściowych. Każda etykieta musi znajdować się przed polem wprowadzania. Jest to sparowany tag, który ma atrybut obowiązkowy dla atrybutu. Wymagane jest powiązanie tego znacznika z polem formularza. Tworzymy 3 identyfikatory dla naszych pól: check1 check2 check3. Użytkownik określa tę samą wartość w atrybucie for. Teraz są przywiązani do pól wyboru. Dalej dla każdego wejściaokreślamy jedną klasę - sprawdzanie. Będzie służyć jako wskaźnik do pracy przy kasie checkbox w CSS. Teraz dodaj swój kod CSS, aby wyglądał tak:
Oto kilka stylów, które nie należą do samych pól wyboru, ale jest to konieczne do ogólnego układu strony.
Jeśli zrobiłeś wszystko dobrze, teraz twój formularz z polami wyboru będzie miał normalny wygląd.
