Zdarzenia rozwijane html php css. Tworzymy stylowe listy rozwijane. Zwykły HTML, lista rozwijana CSS

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:

  1. Nazwa – unikalna nazwa, którą należy podać, jeśli plik HTML, w którym coś robisz, będzie korzystał z kilku formularzy internetowych
  2. Akcja – wymagany atrybut wskazujący ścieżkę do skryptu, do którego dane z niego zostaną przesłane w celu dalszego przetwarzania
  3. 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:

  1. jednowierszowe pola tekstowe (Type="Text")
  2. pola do wpisania hasła (Type="Password")
  3. pola wyboru (Type="Checkbox")
  4. przyciski opcji (Type="Radio")
  5. ukryte pola (Type="Ukryte")
  6. zwykłe przyciski (Type="Button")
  7. przyciski do wysyłania danych do handlera (Type="Submit")
  8. przyciski przywracające formularz internetowy do pierwotnego stanu (Type="Reset")
  9. pola do przesyłania plików na serwer (Type="File)
  10. 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:

  1. 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.
  2. 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
  3. 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.
  4. Wartość - możesz za jej pomocą określić, co dokładnie będzie domyślnie wpisane w polu lub na przycisku przesyłania danych
  5. 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:

Wybierz i Opcja - znaczniki listy rozwijanej

Wszystkie elementy formularzy internetowych tworzące pola list rozwijanych tworzone są w ten sam sposób. Najpierw ustawiany jest kontener pola kombi za pomocą otwierającego i zamykającego znacznika HTML Select. Następnie wewnątrz tego kontenera tworzone są osobne kontenery z pozycjami (elementami) tej listy. Odbywa się to za pomocą otwierających i zamykających znaczników opcji.

Okazuje się coś takiego:

Ale jest to uproszczony projekt, ponieważ Wybierz i Opcja mają wiele atrybutów, które definiują właściwości i wygląd utworzonego pola listy rozwijanej.

  1. Nazwa — należy określić unikalną nazwę tego elementu formularza internetowego utworzonego za pomocą opcji Wybierz. Nazwa ta zostanie przekazana do serwera do programu obsługi danych jako nazwa zmiennej. Wartość tej zmiennej będzie wartością atrybutu Value (ustawionego w Opcjach dla każdej pozycji) pozycji listy rozwijanej wybranej przez użytkownika.
  2. Rozmiar — za jego pomocą możesz ustawić liczbę wyświetlanych elementów. Innymi słowy, za pomocą opcji Rozmiar możesz ustawić wysokość listy mierzoną liczbą wyświetlanych linii. Jeśli w tagu Select nie określisz jawnie wartości Rozmiar, zostanie użyta domyślna wysokość listy rozwijanej, która będzie inna, jeśli atrybutu Select nie będzie lub będzie on obecny w atrybucie Select:
    1. Jeśli w opcji Select występuje opcja Multiple, wówczas wysokość listy rozwijanej w formularzu internetowym będzie domyślnie równa liczbie jej elementów. Te. Wyświetlone zostaną wszystkie elementy listy rozwijanej wielokrotnego wyboru. Zobacz przykład liczby mnogiej poniżej. Jeśli atrybut Rozmiar w Wybierz jest ustawiony na mniej niż liczba elementów, po prawej stronie pojawi się pasek przewijania.
    2. Jeśli w polu Wybierz nie ma opcji Wiele, wysokość listy rozwijanej w formularzu internetowym będzie domyślnie wynosić jeden wiersz. Te. Widoczna będzie tylko jedna linia, a dostęp do pozostałych pozycji będzie możliwy jedynie po naciśnięciu przycisku windy (po prawej). Zobacz przykład poniżej
  3. Wielokrotne - przypisanie tego atrybutu do tagu Select umożliwi utworzenie listy rozwijanej z możliwością jednoczesnego zaznaczenia kilku pozycji. Przeczytaj więcej o tym atrybucie poniżej.

Formularze z listami rozwijanymi można podzielić na dwie opcje. W pierwszym wariancie można wybrać tylko jeden element (linię) pola z listą rozwijaną, w drugim wariancie przytrzymując klawisz Ctrl lub Shift można zaznaczyć jednocześnie kilka dostępnych elementów.

W tym przypadku w drugiej opcji dane o wszystkich wybranych pozycjach zostaną przesłane na serwer. To, która lista rozwijana zostanie utworzona, zależy od obecności lub braku atrybutu Wiele w znaczniku Wybierz.

Wiele jest określone w Wybierz bez parametru, ponieważ Jest napisane po prostu Wielokrotność i to wszystko. Jeśli jest obecny, zostanie utworzony formularz internetowy z listą rozwijaną z wieloma możliwościami wyboru (przytrzymanie klawisza Ctrl lub Shift).

Wariant pola z rozwijaną listą, w której się znajdzie możliwość wielokrotnego wyboru, będzie wyglądać mniej więcej tak:

Po prawej stronie znajduje się przykład formularza internetowego z możliwością wielokrotnego wyboru, opartego na powyższym kodzie. Jak widać, przytrzymując klawisz Ctrl lub Shift, można zaznaczyć kilka elementów jednocześnie.

Jeśli w znaczniku Select nie ma atrybutu Multiple, wówczas można wybrać tylko jeden element tej listy rozwijanej (wiersz).

Przykład, w którym można wybrać tylko jeden element, można zobaczyć tutaj:

Etykieta Wybierz wybraną witrynę ED Legenda

Atrybuty znacznika opcji


Na utworzonej liście rozwijanej (za pomocą opcji Select i Option) możesz dodać coś w rodzaju separatorów z nagłówkami grup, które będą różnić się od pozostałych pozycji menu stylem czcionki.

Aby utworzyć grupę z pozycji listy rozwijanej należy ująć je w tagach otwierającym i zamykającym formularza Optgroup, a w tagu otwierającym Optgroup dodać atrybut Label, jako parametr którego należy wpisać żądaną nazwę grupy.

Na przykład tak:

Etykieta Wybierz
Wybrana legenda witryny ED

Textarea - utworzenie pola tekstowego na formularzu

Jest jeszcze jeden element formularzy internetowych, którego nie uwzględniliśmy - Textarea (pole z możliwością wpisania tekstu wielowierszowego). Tworzony jest przy użyciu sparowanego tagu HTML Textarea. Co więcej, możesz zawinąć w nim tekst do nowej linii, a zostanie on przesłany na serwer z uwzględnieniem wykonanych tłumaczeń.

Aby więc utworzyć wielowierszowe pole tekstowe, należy określić otwierający i zamykający obszar tekstowy, a pomiędzy nimi można dodać tekst, który będzie widoczny po załadowaniu strony z formularzem internetowym. Użytkownik może następnie usunąć ten tekst i napisać własny.

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

W tym przykładzie tagujemy

W przeglądarce wygląda to tak:

Grupowanie pozycji menu

Przyjrzyjmy się poniższemu tagowi , który służy do grupowania powiązanych danych na liście rozwijanej nazwa = "czarno-biały" > label = "Biała lista" >

W tym przykładzie wyróżniliśmy 2 grupy tagiem . Atrybut label elementu określa nazwę wybranej grupy, zapisaną pogrubioną czcionką:

W poniższym przykładzie, używając wyłączonego atrybutu logicznego, wyłączymy jedną grupę („ Grupa B"):

</span> Przykład użycia wyłączonego atrybutu tagu HTML <optgroup><span>

Wynik naszego przykładu:

Wyłącz listę i wybór wielokrotny

</span> Wyłączone i wielokrotne atrybuty tagów <select><span>

W tym przykładzie utworzyliśmy dwie listy rozwijane. Dla pierwszej listy użyliśmy atrybutu wyłączonego, który uniemożliwia interakcję z listą (wyłącza ją).

W przypadku drugiej listy zastosowaliśmy atrybut multiple, który wskazuje, że istnieje możliwość wybrania kilku opcji na liście jednocześnie (poprzez klawisz kontrolny w systemie Windows i przez Komenda na Macu).

W przeglądarce wygląda to tak:

Obszar tekstowy

Wynik naszego przykładu:

Wyłączanie obszaru tekstowego

Analogicznie do omówionych wcześniej elementów tagów



type = „prześlij” nazwa = „submitInfo” wartość = „prześlij" > !}

W tym przykładzie utworzyliśmy dwa obszary tekstowe (element