Pozdrowienia, drodzy czytelnicy bloga. Dzisiaj chcę porozmawiać o czymś takim jak formularze HTML. Niezależnie od silnika Twojej witryny (cms), na pewno będzie ona korzystała z formularzy w takiej czy innej formie, utworzonych przy użyciu tagów Form i input, a także atrybutów i parametrów Przycisk, Zaznaczone, Wartość, Pole wyboru, Radio, Pole wyboru, Prześlij.
Cóż, możesz także dodać do tego elementy do tworzenia list rozwijanych i pól tekstowych - Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda.
Po co potrzebne są formularze i jak działają na nowoczesnych stronach internetowych?
Za pomocą tych tagów tworzony jest ten sam ciąg wyszukiwania w witrynie (), a wyszukiwanie będzie wymagane w Twoim projekcie. Dlatego zrozumienie ich struktury i działania nie przeszkodzi Ci w pomyślnej pracy nad projektem i nie będzie zbędne, jeśli sam go będziesz promować.
Tak więc, uzasadniając potrzebę przestudiowania tych elementów, myślę, że nie powinno pojawiać się więcej pytań, więc czas przejść bezpośrednio do przestudiowania ich możliwych opcji.
Tak, chciałbym też przypomnieć, że przejrzeliśmy już wiele materiałów na temat hipertekstowego języka znaczników, na przykład trzy) i .
Formularze składają się zasadniczo z elementów, w celu utworzenia których wstawiane są różne znaczniki ze znaczników formularza znajdujących się w głównym kontenerze - Checked, Value, Checkbox, Radio, Checkbox, Submit itp. Musimy tylko umieścić jego kod w dowolnym dogodnym miejscu umieść w szablonie witryny, wskazując za pomocą tagów i ich atrybutów, jak ma to wyglądać.
Może to być pole tekstowe z przyciskiem umożliwiającym przesłanie wprowadzonego zapytania, selekcje za pomocą przycisków opcji (gdzie można pozostawić wciśnięty tylko jeden z podanych przycisków), wiele pól tekstowych z przyciskiem przesyłania() i wiele więcej.
Przykładowo w przypadku „szukaj” za pomocą atrybutu Wartość możesz określić, co dokładnie będzie napisane na przycisku znajdującym się obok pola do wpisania zapytania. Dane wprowadzone w formularzach muszą zostać w jakiś sposób poddane dalszemu przetwarzaniu.
Przykładowo w przypadku informacji zwrotnej użytkownik po wypełnieniu pola swoim imieniem i nazwiskiem, wpisaniu swojego adresu e-mail i treści wiadomości, a następnie kliknięciu przycisku wyślij będzie miał prawo mieć nadzieję, że dane z formularza zostaną przesłane na adres e-mail autora serwisu. Ale niestety nie można tego zaimplementować przy użyciu tylko jednego hipertekstowego języka znaczników ().
Do tych celów potrzebny będzie specjalny program procesorowy, który po kliknięciu przez użytkownika przycisku wysyłania pobierze wszystkie dane z pól opinii i wyśle je e-mailem do właściciela zasobu. Musisz określić, który program zrobi to samodzielnie, korzystając z atrybutu Akcja.
Zazwyczaj programem przetwarzającym jest skrypt napisany w języku PHP. Dlatego w atrybucie Action znacznika Form konieczne będzie podanie ścieżki do pliku tego skryptu znajdującego się na Twoim serwerze hostingowym. Podam przykład subskrypcji kanału RSS mojego bloga za pośrednictwem poczty elektronicznej:
Na początku może się to wydawać trochę niejasne, ale myślę, że wszystko stanie się jaśniejsze w miarę kontynuowania historii.
Tagi formularzy i danych wejściowych do tworzenia przycisków, pól wyboru i przycisków opcji
Każdy formularz musi być ujęty w znaczniki otwierające i zamykające Formularz. Jest to swego rodzaju pojemnik do ich tworzenia. Ten tag ma wiele wymaganych i opcjonalnych atrybutów:
- Nazwa – unikalna nazwa, którą należy podać, jeśli plik HTML, w którym coś robisz, będzie korzystał z kilku formularzy internetowych
- Akcja – wymagany atrybut wskazujący ścieżkę do skryptu, do którego dane z niego zostaną przesłane w celu dalszego przetwarzania
- Metoda – za jej pomocą możesz zmienić sposób przesyłania danych z tego formularza do skryptu pliku obsługi. Jeśli tego nie określisz, domyślnie zostanie zastosowana metoda Get, która tak naprawdę jest przeznaczona głównie do zmiennych i krótkich wiadomości, a także otwartego przesyłania danych przez pasek adresu przeglądarki. Aby przenieść dane z formularza do skryptu obsługi, nadal lepiej jest użyć Metoda POST, zaprojektowany specjalnie do przesyłania wiadomości tekstowych w sposób prywatny
Przyjrzyjmy się pozostałym tagom, które umożliwiają tworzenie różnorodnych formularzy internetowych. Najbardziej wszechstronny jest Wejście. Należy w nim zapisać atrybut Type, który określa jaki dokładnie będzie formularz HTML utworzony przy użyciu tego tagu.
Używając wprowadzania i typu, możesz utworzyć następujące elementy:
- jednowierszowe pola tekstowe (Type="Text")
- pola do wpisania hasła (Type="Password")
- pola wyboru (Type="Checkbox")
- przyciski opcji (Type="Radio")
- ukryte pola (Type="Ukryte")
- zwykłe przyciski (Type="Button")
- przyciski do wysyłania danych do handlera (Type="Submit")
- przyciski przywracające formularz internetowy do pierwotnego stanu (Type="Reset")
- pola do przesyłania plików na serwer (Type="File)
- przyciski z obrazkiem (Type="Image")
Dane wejściowe nie mają znacznika zamykającego. To, jak dokładnie będzie wyglądał formularz internetowy utworzony za jego pomocą, zależy całkowicie od parametru określonego w atrybucie Type. Jeśli Typ nie zostanie określony, domyślnie zostanie utworzone pole tekstowe.
Przykłady formularzy utworzonych na wejściu z różnymi wartościami Typu
Inne atrybuty znaczników wejściowych i przykłady ich użycia
Przyjrzyjmy się, do czego potrzebne są pozostałe atrybuty:
- Nazwa – jeśli dane mają zostać przesłane do skryptu programu obsługi, należy określić parametr dla atrybutu Nazwa. Pod tą nazwą dane przesłane z formularza pojawią się w programie przetwarzającym informacje.
- Rozmiar - służy do ustawienia rozmiaru pola tworzonego formularza internetowego. Wartość jest podana w liczbie znaków, które mieszczą się w tym polu. Jeśli rozmiar nie zostanie określony, szerokość będzie domyślnie wynosić 24 znaki
- Maxlength - domyślnie liczba znaków, które można wpisać w formularzu HTML nie jest ograniczona, ale używając Maxlength można ustawić to ograniczenie. Nie będziesz mógł wprowadzić większej liczby znaków niż jest to wskazane w polu.
- Wartość - możesz za jej pomocą określić, co dokładnie będzie domyślnie wpisane w polu lub na przycisku przesyłania danych
- Zaznaczony jest atrybut flagi, który można wstawić do wejścia dla przycisków opcji lub pól wyboru. W takim przypadku ten przycisk opcji lub pole wyboru będzie aktywne po załadowaniu strony z formularzem internetowym (będą już oznaczone znacznikiem wyboru)
Teraz spójrzmy na wszystko przykłady formularzy z wejściem. Wygląd pola tekstowego jest podobny do wyglądu pola do wpisania hasła, dlatego rozważmy tylko opcję utworzenia Tekstu, na przykład w celu wpisania adresu e-mail:
Przyjrzyjmy się teraz tworzeniu formularza internetowego z przyciskami opcji (Radio):
Zwróć uwagę, że w tym formularzu dwukrotnie użyto znacznika wejściowego, raz do utworzenia każdego z dwóch przycisków opcji. Ponadto każdy z nich zawiera atrybut Nazwa o tej samej wartości (resultat), a wartość Wartość jest różna (TAK i NIE).
Oznacza to, że przy jego przetwarzaniu, jeśli zostanie wybrany którykolwiek z przełączników, zostanie wysłana zmienna, której nazwa jest wpisana w polu Nazwa, ale wartość tej zmiennej będzie zależała od tego, który przełącznik został wybrany.
Spójrzmy na przykład tworzenia formularza internetowego z polami wyboru:
Pola wyboru różnią się od przycisków opcji tym, że umożliwiają jednoczesne wybranie wielu opcji. Nazwa służy do określenia w pliku obsługi, w którym polu wyboru znajdują się pola wyboru, a Wartość określa wartość, która zostanie wysłana do procedury obsługi (jeśli wartość nie zostanie określona, wówczas tekst znajdujący się obok tego pola wyboru zostanie wysłany do procedury obsługi ).
Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda — listy rozwijane, obszary tekstowe i inne elementy formularzy internetowych
Na początek chciałbym trochę przypomnieć, czym właściwie są formularze internetowe i dlaczego są potrzebne na stronach internetowych. Są przeznaczone przede wszystkim do replikowania elementów znajdujących się w dowolnym systemie operacyjnym w przyjaznej dla użytkownika formie: przycisków, pól wprowadzania tekstu, list rozwijanych, pól wyboru, przełączników i tym podobnych.
Wszyscy użytkownicy bez dodatkowych wyjaśnień rozumieją przeznaczenie tych elementów i jeśli widzą przycisk formularza HTML, rozumieją, że muszą w niego kliknąć.
Co więcej, wszystkie jego elementy składowe (takie jak Select, Option, Textarea, Label, Fieldset, Legend) są już gotowymi pustymi miejscami (kontenerami), aby je wstawić wystarczy użyć żądanego tagu z niezbędnymi atrybutami i parametrami.
Same przeglądarki wiedzą, jak wyświetlić ten lub inny element formularza internetowego. To prawda, że opcje wyświetlania tego samego elementu w różnych przeglądarkach mogą się nieznacznie różnić od siebie, ale z reguły nieznacznie.
To. okazuje się, że formularze internetowe w formacie HTML są próbą przekazania klucza elementy używane w dowolnym systemie operacyjnym, na strony serwisu. Ale dlaczego mogą być potrzebne na stronach witryny?
W zasadzie w tym samym celu, w jakim podobne elementy wykorzystywane są w systemach operacyjnych – przekazywaniu danych od użytkownika. W przypadku formularzy dane od użytkownika przekazywane są na serwer, gdzie są przetwarzane przez specjalny program (język znaczników hipertekstowych niestety nie pozwala na przetwarzanie danych).
Choć dane można przesłać nie tylko na serwer, ale także np. pocztą elektroniczną na adres podany w atrybucie Action znacznika Form. Wysyłając dane z HTML na pocztę e-mail, użytkownik wypełniając pola, po kliknięciu przycisku wysyłania danych, uruchomi domyślny program pocztowy używany na jego komputerze.
Tag otwierający Form w tym przypadku powinien wyglądać mniej więcej tak:
Jak widać, kliknięcie tekstu aktywującego ten element jest bezużyteczne - musisz kliknąć sam. Dokładnie taki stan rzeczy ma skorygować znacznik Etykieta. Pozwala na to, aby tekst obok elementu formularza internetowego był klikalny, co niewątpliwie jest poprawi użyteczność.
Ale jak połączyć element formularza HTML i tekst? W tym celu należy dodać do atrybutu identyfikator z unikalnym parametrem, a tekst otoczyć tagami otwierającymi i zamykającymi Label. A to jeszcze nie wszystko. W tagu otwierającym Label należy uwzględnić atrybut For, którego parametr musi być dokładnie taki sam, jak atrybut ID w tagu HTML elementu formularza. Okazuje się coś takiego:
Jak widać, teraz dzięki zastosowaniu Etykiety elementy formularza internetowego można aktywować nie tylko poprzez kliknięcie na niego, ale także na tekst znajdujący się obok niego.
Zestaw pól i legenda - rozbicie formularza na części
Zapewne często widziałeś, że duże formularze w HTML są podzielone na grupy (Fieldset), które są otoczone ramką i każda taka grupa ma swój własny tytuł (Legenda). Jest to realizowane przy użyciu tylko dwóch tagów: Fieldset i Legend. Są sparowane, tj. Muszą mieć otwór otwierający i zamykający.
Aby więc utworzyć grupę części składowych, należy ująć wszystkie te części w otwierających i zamykających znacznikach Fieldset. A żeby ustawić tytuł (Legendę) dla tej grupy, należy zaraz po otwarciu Fieldsetu napisać konstrukcję Legendy otwierającej i zamykającej, pomiędzy którymi należy wstawić tekst tytułu grupy.
Oto przykład tworzenia grup przy użyciu zestawu pól i legendy:
Powodzenia! Do zobaczenia wkrótce na stronach bloga
Możesz być zainteresowany
Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda - Tagi HTML dla postaci list rozwijanych i pól tekstowych
Listy w kodzie HTML - znaczniki UL, OL, LI i DL
MailTo - co to jest i jak utworzyć link w HTML, aby wysłać e-mail
Jak ustawiane są kolory w kodzie HTML i CSS, wybór odcieni RGB w tabelach, dane wyjściowe Yandex i inne programy
Co to jest hipertekstowy język znaczników Html i jak wyświetlić listę wszystkich tagów w walidatorze W3C
Jak wstawić link i obraz (zdjęcie) do znaczników HTML - IMG i A
Tabele w HTML - Tagi Table, Tr i Td oraz Colspan, Cellpadding, Cellspacing i Rowspan do ich tworzenia
Czcionka (twarz, rozmiar i kolor), cytaty blokowe i znaczniki wstępne — starsze formatowanie tekstu w czystym formacie HTML (bez użycia CSS)
Jak utworzyć hiperłącze (A, Href, Target blank), jak otworzyć je w nowym oknie na stronie, a także zrobić obrazek jako link w kodzie HTML
W ciągu ostatnich dwóch lat rozwój aplikacji internetowych (stron internetowych) bardzo się rozwinął i to, czego używaliśmy wcześniej do tworzenia stron internetowych, jest już przestarzałe lub pojawiły się nowsze metody.
Poprzednio, aby utworzyć listę rozwijaną w formacie HTML ( po angielsku. - upuścić), właśnie skorzystaliśmy
Specjalnie na potrzeby tego artykułu znalazłem 16 różnych przykładów, które mogą przydać się podczas tworzenia strony internetowej. A więc zacznijmy.
1. Lista niestandardowa
Szablon HTML, który pozwala dostosować własne kolory listy rozwijanej.
2. Wykonane w CSS3/JavaScript
Napisany w CSS3 i JavaScript. Zwykła lista rozwijana.
3. Styl: stacje metra
Przejrzysta lista rozwijana ze stylem stacji metra.
4. Kropla. Napisane w SCSS i jQuery
5. W przypadku długich list wydawniczych
Doskonałe rozwiązanie w przypadku długich menu rozwijanych.
Menu rozwijane napisane w czystym CSS, bez użycia jakichkolwiek skryptów.
Idealny do bocznych menu na stronie internetowej, aby wizualnie pokazać kategorie na stronie internetowej.
8. Stylowe menu ustawień użytkownika
9. Lista rozwijana CSS3
Wykonany w stylu UI, będzie pasował do stylu UI witryny.
12. Wybór flagi
Lista rozwijana w stylu wyboru kraju.
13. Zwykły HTML, rozwijane menu CSS
Mam nadzieję, że spodobał Ci się mój wybór. Zostaw komentarz, podziel się swoją opinią i nadsyłaj własne prace!
Jak zrobić listę rozwijaną w formacie HTML (wybór TOP 16) z bologera
Poziome menu rozwijane służy do organizowania struktury nawigacji witryny. Optymalna liczba poziomów zagnieżdżenia to jeden lub dwa. Im mniej poziomów załączników, tym łatwiej odwiedzającemu witrynę znaleźć potrzebne informacje. Sposób tworzenia zwykłego poziomego menu opisano szczegółowo w.
Jak zrobić poziome menu rozwijane
1. Znaczniki HTML i podstawowe style menu rozwijanego z jednym poziomem zagnieżdżenia
Znacznik HTML poziomego menu rozwijanego różni się od zwykłego menu tym, że prowadzi do żądanego elementu listy
- Lub<оl> .
Aby ustawić podmenu względem menu głównego, deklarowane są następujące style:
— dla elementu listy, w którym zagnieżdżona jest lista rozwijana: li (pozycja: względna;) ;
— dla menu rozwijanego ul (pozycja: absolutna;) , a także wartości lewej i górnej.
Dla przejrzystości i łatwości formatowania dodajmy górne menu klasy do menu głównego i podmenu do menu rozwijanego.
Istnieje kilka sposobów ukrycia menu rozwijanego:
1) wyświetlacz: brak;
2) widoczność: ukryta;
3) nieprzezroczystość: 0;
4) transformacja: skalaY(0);
5) korzystając z biblioteki jQuery.
Metoda 1. (wyświetlanie: brak;)
Menu rozwijane jest ukryte za pomocą .submenu (display: none;) , po najechaniu myszką jest wyświetlane za pomocą .topmenu li:hover .submenu (display: block;) .
Metoda 2. (widoczność: ukryta;)
Menu jest ukryte za pomocą .submenu (widoczność: ukryte;) , a pokazane za pomocą .topmenu li:hover .submenu (widoczność: widoczne;).
Metoda 3. (krycie: 0;)
Menu jest ukryte za pomocą .submenu (opacity: 0;) i pokazane za pomocą .topmenu li:hover .submenu (opacity: 1;) . Aby menu nie pojawiało się po najechaniu myszką na obszar, w którym się znajduje, dodaj widoczność: ukryta; , a po najechaniu zmień na widoczność: widoczny; .
Metoda 4. (przekształcenie: skalaY(0);)
Menu jest ukryte za pomocą .submenu (transformacja: skalaY(0);) i pokazane za pomocą .topmenu li:hover .submenu (transformacja: skalaY(1);). Ponieważ domyślna transformacja elementu następuje od środka, należy dodać for .submenu (transform-origin: 0 0;) , tj. z lewego górnego rogu.
Metoda 5: Korzystanie z jQuery
$(".pięć li ul").hide(); // ukryj menu rozwijane $(.five li:has(.submenu")).hover(function())( $(.five li ul").stop().fadeToggle(300) ;) /* wybierz element listy zawierający element z klasą .submenu i dodaj do niego funkcję najechania kursorem, która pokaże i ukryje menu rozwijane */);2. Rozwijane menu 3D
Ciekawe efekty można stworzyć stosując przekształcenia CSS3, np. wyświetlenie menu z głębi ekranu.
* ( rozmiar pudełka: obramowanie; ) treść ( margines: 0; tło: gradient promieniowy (#BFD6E2 1px, rgba(255,255,255,0) 2px); rozmiar tła: 10px 10px; ) nav ul (styl listy : brak; margines: 0; dopełnienie: 0; ) nav a (wyświetlanie: blok; dekoracja tekstu: brak; kontur: brak; przejście: .4s wysuwanie; ) .topmenu ( widoczność tylnej powierzchni: ukryta; tło : rgba(255,255,255,.8); ) .topmenu > li (wyświetlanie: blok inline; pozycja: względna; ) .topmenu > li > a (rodzina czcionek: „Exo 2”, bezszeryfowa; wysokość: 70 pikseli; wysokość linii: 70 pikseli; dopełnienie: 0 30 pikseli; grubość czcionki: pogrubiona; kolor: #003559; transformacja tekstu: wielkie litery; ) .down:after ( treść: "\f107"; margines po lewej stronie: 8 pikseli; rodzina czcionek : FontAwesome; ) .topmenu li a:hover ( kolor: #E6855F; ) .submenu ( tło: biały; obramowanie: 2px stałe #003559; pozycja: bezwzględna; lewa: 0; widoczność: ukryta; krycie: 0; indeks Z : 5; szerokość: 150px; transformacja: perspektywa(600px) obrótX(-90deg); pochodzenie transformacji: 0% 0%; przejście: wydłużenie .6 s; ) .topmenu > li:hover .submenu( widoczność: widoczny; nieprzezroczystość: 1; transformacja: perspektywa (600px) obrótX(0 stopni); ) .submenu li a ( kolor: #7f7f7f; rozmiar czcionki: 13px; wysokość linii: 36px; dopełnienie: 0 25px; rodzina czcionek: "Kurale", serif; )
3. Rozwijane menu rozwijane z logo
W tym przykładzie górna część strony zawiera logo i nawigację witryny. Logo może mieć postać obrazu lub tekstu. Menu rozwijane stopniowo rozwija się spod najwyższego elementu listy przy użyciu funkcji transformacji CSS3.
4. Rozwijane menu rozwijane
Inny przykład menu rozwijanego. Efekt powiększenia po pojawieniu się menu realizowany jest poprzez zmniejszenie początkowego rozmiaru.submenu (transformacja: skala(.8);) , po najechaniu kursorem rozmiar zwiększa się do.topmenu > li:hover .submenu (transformacja: skala(1);) .
* ( box-sizing: border-box; ) body ( margines: 0; tło: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( tło: biały; ) nav ul ( styl listy: brak; margines: 0; dopełnienie: 0; ) nav a ( dekoracja tekstu: brak; konspekt: brak; wyświetlanie: blok; przejście: .4s ułatwienie wyjścia; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; pozycja: względna; ) .topmenu > li:after ( treść: ""; pozycja: bezwzględna; prawa: 0; szerokość: 1px; wysokość: 12px; tło: #d2d2d2; góra: 16px; box-shadow: 4px -2px 0 #d2d2d2; transformacja: obrót(30deg); ) .topmenu > li:last-child:after ( tło: brak; pudełko -shadow: brak; ) .topmenu > li > a ( dopełnienie: 12px 26px; kolor: #767676; transformacja tekstu: wielkie litery; grubość czcionki: pogrubiona; odstępy między literami: 1px; rodzina czcionek: "Exo 2", bezszeryfowy; ) .topmenu li a:hover ( kolor: #c0a97a; ) .submenu ( pozycja: bezwzględna; lewa: 50%; górna: 100%; szerokość: 210px; lewy margines: -105px; tło: #fafafa ; obramowanie: 1px solidna #ededed; indeks Z: 5; widoczność: ukryta; nieprzezroczystość: 0; transformacja: skala(.8); przejście: 0,4 s swobodnego wejścia; ) .submenu li a ( dopełnienie: 10px 0; margines: 0 10px; obramowanie-dół: 1px solid #efefef; rozmiar czcionki: 12px; kolor: #484848; rodzina czcionek: "Kurale", serif; ) .topmenu > li:hover .submenu ( widoczność: widoczna; krycie: 1; transformacja: skala(1); )
5. Wysuwane menu rozwijane
Menu poziome z minianimacją: po najechaniu kursorem na linki górnego menu pojawia się małe kółko, które towarzyszy również pojawieniu się menu rozwijanego.
@import url("https://fonts.googleapis.com/css?.jpg); pozycja tła: środek w środku; powtórzenie tła: brak powtórzeń; rozmiar tła: okładka; wysokość: 100vh; pozycja: względna; ) body:before (treść: ""; pozycja: absolutna; lewa: 0; dół: 0; wysokość: 100%; szerokość: 100%; tło: gradient liniowy (45 stopni, rgba (0,0,0,0) , rgba(255,255,255,.8)); ) nav ( wyrównanie tekstu: środek; dopełnienie: 40px 0 0; ) nav ul ( styl listy: brak; margines: 0; dopełnienie: 0; ) nav a ( dekoracja tekstu : brak; wyświetlacz: blok; kolor: #222; ) .topmenu > li ( wyświetlacz: blok inline; pozycja: względna; ) .topmenu > li > a ( pozycja: względna; dopełnienie: 10px 15px; rodzina czcionek: " Kaushan Script", kursywa; rozmiar czcionki: 1,5 em; wysokość linii: 1; odstęp między literami: 3 piksele; ) .topmenu > li > a:before ( treść: ""; pozycja: bezwzględna; indeks Z: 5; po lewej: 50%; góra: 100%; szerokość: 10 pikseli; wysokość: 10 pikseli; tło: biały; promień obramowania: 50%; transformacja: tłumaczenie (-50%, 20 pikseli); krycie: 0; przejście: .3 s; ) .topmenu li:najedź a:przed ( transformacja: tłumacz(-50%, 0); nieprzezroczystość: 1; ) .submenu ( pozycja: bezwzględna; indeks Z: 4; lewa: 50%; góra: 100%; szerokość: 150px; dopełnienie: 15px 0 15px; górny margines: 5px; tło: biały; promień obramowania: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); rozmiar pudełka: border-box; widoczność: ukryta; krycie: 0; transformacja: tłumaczenie (-50%, 20px); przejście: .3s ; ) .topmenu > li:hover .submenu ( widoczność: widoczna; krycie: 1; transformacja: tłumaczenie(-50%, 0); ) .submenu a ( rodzina czcionek: „Libre Baskerville”, serif; rozmiar czcionki: 11px; odstęp między literami: 1px; dopełnienie: 5px 10px; przejście: .3s liniowe; ) .submenu a:hover (tło: #e8e8e8;)
W tym artykule przyjrzymy się elementom umożliwiającym tworzenie list rozwijanych, dowiemy się, jak tworzyć grupy na tych listach, przyjrzymy się, jak wyłączyć elementy, a nawet grupy list, zapoznamy się z elementem umożliwiającym tworzenie wieloliniowe pole tekstowe, które można później wykorzystać w formularzach HTML (element
Dodatkowo wewnątrz formularza umieściliśmy przycisk służący do wysłania formularza (element za pomocą przycisku wpisz „wyślij formularz”: wpisz = „wyślij” ).
Wynik naszego przykładu:
Etykietka obszaru tekstowego
Przyjrzymy się więc ostatniemu przykładowi i przejdziemy do praktycznego zadania artykułu w tym podręczniku.
Dzięki atrybutowi (tag HTML
Tekst podpowiedzi jest ukryty, gdy użytkownik wprowadzi wartość (dowolny znak) w polu tekstowym; jeśli zostanie usunięty, podpowiedź zostanie wyświetlona ponownie.
Spójrzmy na przykład użycia:
type = „prześlij” nazwa = „submitInfo” wartość = „prześlij" > !}
W tym przykładzie utworzyliśmy dwa obszary tekstowe (element
Należy pamiętać, że jeśli pole tekstowe jest tylko do odczytu, treści nie można zmienić, ale użytkownik nadal może nawigować, wybierać i kopiować zawartość.
Dodatkowo wewnątrz formularza umieściliśmy przycisk służący do wysłania formularza (element za pomocą przycisku wpisz „wyślij formularz”: wpisz = „wyślij” ).
Wynik naszego przykładu:
Pytania i zadania na ten temat
Zanim przejdziesz do następnego tematu, wykonaj zadanie praktyczne:
- Korzystając ze zdobytej wiedzy utwórz następujący formularz ogłoszenia o pracę:
Przed rozpoczęciem zadania otwórz przykład w nowym oknie i dokładnie przejrzyj formularz, aby powtórzyć wszystkie jego punkty. Do wykonania zadania będziesz potrzebować wiedzy z artykułu. Jeśli to przegapiłeś, wróć, aby to przestudiować.
Po wykonaniu ćwiczenia sprawdź kod strony otwierając przykład w osobnym oknie, aby upewnić się, że wszystko wykonałeś poprawnie.
Dziś chcę przedstawić mały „przepis” na utworzenie listy w CSS. Żadnego JQuery, żadnego CSS3 - po prostu stary, dobry CSS dla różnych przeglądarek. Przykład jest dość prosty, więc doświadczeni towarzysze mogą nie być zainteresowani. Wdrożymy listę rozwijaną z przyciskami społecznościowymi.
Więc nie rozmawiajmy długo, przejdźmy od razu do rzeczy
HTML
Podziel się tym postem
- Świergot
- Google Plus
- W kontakcie z
- RSS
Celowo pomijam kwestie ogólne, takie jak dołączanie stylów, aby kod się nie rozrastał. Na dole strony podam link do źródeł - jest tam wszystko.
W HTML mamy zwykłą listę i nietypowy nagłówek. Jego niezwykłość polega na tym, że jest on wykonany za pomocą hiperłącza, co pozwala na śledzenie zdarzenia :unosić się czyli wskazówki. Lista rozwijana będzie działać po najechaniu kursorem na tytuł.
CSS
Najpierw przyjrzyjmy się podstawowym stylom listy rozwijanej. Próbowałem skomentować każdą linię kodu, aby było jaśniej:
/*Zresetuj dopełnienie*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Podstawowe opakowanie*/ .droplink ( szerokość:200px; pozycja:absolutna; margines:10px 0 0 25px ) /*Styl bloku aktywowanego*/ .droplink:hover( wysokość:auto; kolor tła:#3E403D; border:solid 1px #3A3C39 ) /*Tytuł w normalnym stanie*/ .droplink h3 a(text-align:center ; szerokość: 100%; wyświetlacz: blok; dopełnienie: 12 pikseli 0 pikseli; kolor: # 999; dekoracja tekstu: brak ) .droplink h3 a img(border: brak) /*Styl tytułu po najechaniu*/ .droplink:hover h3 a ( kolor: #FFF; grubość czcionki: pogrubiona; pozycja: bezwzględna)
Nie ma tu nic specjalnego, wskazaliśmy rozmiar i styl bloku, styl nagłówka, a dla obu elementów ich styl po najechaniu kursorem. Zacząć robić:
/*Ukryj listę bez najechania*/ .droplink ul( list-style:none; display:none ) /*Wyświetl listę po najechaniu myszką*/ .droplink:hover ul( display:block; margines-top:40px ) .droplink li(wyświetlanie:blok)
Ten kod jest bardziej interesujący i pokazuje, jak się zachowuje Lista rozwijana podczas najechania kursorem. W normalnym stanie to kosztuje Nie wyświetla się, to znaczy, że nie jest wyświetlany. Po najechaniu kursorem pokazujemy go jako blok. To cały sekret. Teraz udekorujmy trochę elementy listy i wstawmy ikony:
/*Styl elementu listy*/ .droplink li a( dopełnienie: 5px 12px 4px 34px; margines:1px; kolor tła:#484A47; wyświetlacz:blok; kolor:#FFF; dekoracja-tekstu: brak; rozmiar czcionki:12px ; powtórzenie tła: brak powtórzeń; pozycja tła: 10 pikseli 3 piksele ) /*Styl najechania elementem*/ .droplink li a:hover( kolor tła:#999 ) /*Ikony*/ .facebook a (obraz tła: url("icons/facebook.png")) .twitter a (obraz tła:url("icons/twitter.png")) .vk a (obraz tła:url("icons/vk.png")) . rss a (obraz tła:url("icons/rss.png")) .gplus a (obraz tła:url("icons/gplus.png"))
Właściwie to wszystko. Lista rozwijana jest gotowa i wygląda całkiem nieźle. Możesz zaprojektować elementy według własnego uznania, dodać zaokrąglone rogi i inne bajery.
Jeśli chcesz, aby po najechaniu kursorem lista „nakładała się” na tekst znajdujący się pod nią, spójrz w bok indeks Z.
Jeśli coś jest niejasne lub nie działa, zapytaj w komentarzach lub użyj przycisku „Wyślij wiadomość”, wszystko tam jest —>