• dom
  •  > 
  • Narzędzia
  •  > 
  • Wrażliwy formularz HTML. Wielokrotny wybór z menu rozwijanego

Wrażliwy formularz HTML. Wielokrotny wybór z menu rozwijanego

Formularze służą do przesyłania danych od użytkownika do serwera WWW. Formularze w formacie HTML mogą składać się z pól i obszarów tekstowych, pól wyboru i przycisków opcji oraz list rozwijanych. Wszystko to są elementy formy. Każdy element służy do przekazania pewnego znaczenia witrynie.
W swej istocie formularz HTML to strona internetowa, na której widoczne są obszary do wprowadzania informacji. Po wypełnieniu formularza i kliknięciu przycisku Wyślij informacje z formularza są pakowane i wysyłane do serwera WWW w celu przetworzenia przez skrypt po stronie serwera (plik obsługi). Po przetworzeniu w odpowiedzi zwracana jest kolejna strona internetowa. Poniższy rysunek wyraźnie pokazuje działanie formularza:

Nie ma nic trudnego w tworzeniu formularzy HTML. Najprostszym sposobem na zorientowanie się w formularzach jest przeanalizowanie małego kodu HTML i sprawdzenie, jak to działa. Poniższy przykład pokazuje składnię tworzenia prostego formularza HTML:

Przykład: prosty formularz HTML

  • Spróbuj sam "

Mój pierwszy formularz:
Nazwa:
Nazwisko:



Prosta forma

Mój pierwszy formularz:
Nazwa:
Nazwisko:


Element

Formularze wstawiane są na strony internetowe za pomocą elementu . Zapewnia kontener na całą zawartość formularza, w tym elementy takie jak pola tekstowe i przyciski, a także wszelkie inne znaczniki Język HTML. Nie może jednak zawierać innego elementu .
Aby wysłać formularz na serwer należy skorzystać z przycisku „Wyślij”, taki sam efekt uzyskamy wciskając w formularzu klawisz „Enter”. Jeżeli w formularzu nie ma przycisku „Wyślij”, do przesłania można użyć klawisza „Enter”.
Większość atrybutów elementu wpływają na przetwarzanie formularza, a nie na jego projekt. Najczęstsze z nich to działanie I metoda. Atrybut działanie zawiera adres URL, na który zostaną przesłane informacje zawarte w formularzu do przetworzenia przez serwer. Atrybut metoda to metoda HTTP, której przeglądarki muszą używać do przesyłania danych z formularzy.

Element

Prawie wszystkie pola formularza tworzone są przy użyciu tego elementu (z wejścia angielskiego - wejście). Wygląd element zmieniać się w zależności od wartości jego atrybutu typ:

Oto niektóre wartości atrybutów typ:

Wprowadzanie tekstu i hasła

Jeden z najbardziej proste typy elementy formularza to pole tekstowe przeznaczone do wprowadzania tekstu z jednej linii. Ten typ Domyślnie ustawione jest wprowadzanie tekstu, dlatego też jest to jednowierszowe pole, które zostanie wyświetlone w przypadku zapomnienia określenia atrybutu typ. Aby dodać do formularza jednowierszowe pole do wprowadzania tekstu, należy wejść do środka elementu zarejestruj atrybut typ z wartością tekstową:

Pole wprowadzania hasła jest zwykłym polem pole tekstowe. Obsługuje te same atrybuty, co jednowierszowe pole tekstowe. Atrybut nazwa ustawia nazwę pola do wpisania hasła, które zostanie wysłane do serwera wraz z hasłem wprowadzonym przez użytkownika. Aby utworzyć pole hasła, musisz ustawić atrybut hasła na typ(hasło (angielski) - hasło):

Przykład utworzenia formularza z polem na hasło:

Przykład: pole hasła

  • Spróbuj sam "

Twój login:

Hasło:




Twój login:

Hasło:


Możesz używać tego atrybutu w połączeniu z tym atrybutem maksymalna długość, którego wartość określa maksymalna ilość znaków, które można wprowadzić ta linia. Możesz także ustawić długość pola wejściowego za pomocą atrybutu rozmiar. Domyślnie większość przeglądarek ogranicza szerokość pola tekstowego do 20 znaków. Aby kontrolować szerokość nowych elementów formularza zamiast atrybutu rozmiar, zalecamy korzystanie z kaskadowych arkuszy stylów (CSS).
Atrybut wartość określa wartość, która domyślnie wyświetla się w polu tekstowym podczas ładowania formularza. Wpisując w polu domyślną wartość, możesz dokładnie wyjaśnić użytkownikowi, jakie dane i w jakim formacie chcesz, aby tutaj wprowadził. To jest jak próbka, ponieważ o wiele wygodniej jest użytkownikowi wypełnić formularz, widząc przed sobą przykład.

Przełączniki (radio)

Element typ radio tworzy przełączniki wykorzystujące logikę „OR”, pozwalającą na wybranie tylko jednej z kilku wartości: jeśli wybierzesz jedną pozycję, wszystkie pozostałe staną się nieaktywne. Podstawowa składnia elementu przełączającego jest następująca:

Atrybut nazwa dla przełączników jest wymagane i gra ważna rola w łączeniu kilku elementów przycisku radiowego w grupę. Aby połączyć przełączniki w grupę, należy ustawić ta sama wartość atrybut nazwa I inne znaczenie atrybut wartość. Atrybut wartość ustawia wartość wybranego przycisku radiowego, który ma zostać wysłany do serwera. Wartość każdego elementu przycisku radiowego musi być unikatowa w obrębie grupy, aby serwer wiedział, którą opcję odpowiedzi wybrał użytkownik.
Obecność atrybutu sprawdzony(z angielskiego - zainstalowany) przy elemencie przełącznika wskazuje, która z proponowanych opcji powinna być domyślnie wybrana podczas ładowania strony, jeśli to konieczne. Atrybut ten można ustawić tylko dla jednego elementu przycisku radiowego z grupy:

  • Spróbuj sam "

Ile masz lat?

  1. poniżej 18
  2. od 18 do 24
  3. od 25 do 35
  4. więcej niż 35




Ile masz lat?

  1. poniżej 18
  2. od 18 do 24
  3. od 25 do 35
  4. więcej niż 35

Pola wyboru

Element typ pole wyboru tworzy pola wyboru podobne do przycisków opcji, ponieważ dają użytkownikowi możliwość wyboru spośród dostarczonych opcji. Główna różnica w porównaniu z przyciskami opcji polega na tym, że odwiedzający może wybrać kilka opcji jednocześnie, a same flagi są oznaczone kwadratami, a nie okręgami. Podobnie jak w przypadku przycisków opcji, grupa pól wyboru jest tworzona poprzez przypisanie każdemu elementowi tej samej wartości atrybutu nazwa jednak każde pole wyboru ma swoje własne znaczenie. Podstawowa składnia pola wyboru jest następująca:

Atrybut sprawdzony, podobnie jak w przypadku przycisków opcji, określa, że ​​pole wyboru powinno być domyślnie zaznaczone podczas ładowania strony. Ten atrybut można ustawić jednocześnie dla kilku grupowych pól wyboru.
Poniższy przykład użycia pól wyboru ma kilka domyślnych możliwości odpowiedzi:

Przykład: Korzystanie z przycisków opcji

  • Spróbuj sam "
  1. Jazz
  2. Blues
  3. Głaz
  4. Chanson
  5. Kraj




Jakie gatunki muzyki lubisz?

  1. Jazz
  2. Blues
  3. Głaz
  4. Chanson
  5. Kraj

Przyciski Prześlij i Zresetuj

Element typ składać tworzy przycisk, który po kliknięciu wysyła przeglądarkę do skryptu serwera w celu przetworzenia danych wprowadzonych przez użytkownika do formularza. Jeżeli tworzymy przycisk służący do czyszczenia formularza, wówczas przypisujemy mu atrybut typ wartość „resetu”. element typ składać można przypisać opcjonalny atrybut nazwa. Atrybut wartość używany w tym elemencie do określenia tekstu wskazującego etykietę na przycisku. Domyślnie przeglądarki mają na przycisku napis „Wyślij”, jeżeli nie zadowala Cię ten napis, wprowadź go samodzielnie. Ponieważ style przycisków potwierdzających mogą się różnić w różnych przeglądarkach, lepiej samemu dostosować styl przycisku za pomocą narzędzi CSS lub użyć przycisków graficznych.
Tworzenie przycisków potwierdzających i kasujących:

Przykład: użycie przesyłania i resetowania

  • Spróbuj sam "

Kliknięcie przycisku Resetuj powoduje zresetowanie wszelkich danych wprowadzonych przez użytkownika.





Atrybut akcji.

Główny dla elementu

jest atrybutem działanie, który określa procedurę obsługi danych dla formularza. Procedura obsługi danych to plik opisujący, co zrobić z danymi formularza. Wynikiem tego przetwarzania jest nowa strona HTML, która jest zwracana do przeglądarki. Inaczej mówiąc, w atrybucie działanie określa ścieżkę URL do pliku obsługi na serwerze (czasami nazywanego stroną skryptu) w celu przetworzenia formularza. Składnia jest następująca:

…

Plik przetwarzający znajduje się na serwerze mytestserver.com w folderze folder nazw oraz nazwę skryptu serwera, który będzie przetwarzał dane - obrabotchik.php. Wszystkie dane, które wpisałeś w formularzu na stronie zostaną do niego przesłane. Rozszerzenie .php wskazuje, że określony formularz jest przetwarzany przez skrypt napisany w PHP. Sam moduł obsługi może być napisany w innym języku, na przykład może to być język skryptowy Python, Ruby itp.
Wskazane jest, aby zawsze ustawiać wartość atrybutu działanie. Jeśli formularz ma przekazywać wartości na tę samą stronę, na której się znajduje, jako wartość atrybutu akcji podaj pusty ciąg znaków: akcja="".

atrybut metody

Atrybut metoda określa sposób przesyłania informacji na serwer. Wybór sposobu przesłania formularza zależy od danych, które chcesz przesłać za pomocą formularza. Istotną rolę odgrywa tu ilość tych danych. Najpopularniejsze są dwie metody przesyłania danych źródłowych formularza z przeglądarki na serwer: DOSTAWAĆ I POST. Metodę można ustawić na dowolną, a jeśli jej nie określisz, zostanie użyta metoda domyślna DOSTAWAĆ. Rozważmy zastosowanie każdego z nich.

Metoda POST

metoda POST pakuje dane z formularza i wysyła je na serwer bez wiedzy użytkownika, ponieważ dane zawarte są w treści wiadomości. Przeglądarka internetowa, w przypadku korzystania z metody POST wysyła do serwera żądanie składające się ze specjalnych nagłówków, po których następują dane formularza. Ponieważ treść tego żądania jest dostępna tylko dla serwera, metoda POST służy do przesyłania poufnych danych, takich jak hasła, szczegóły karty bankowe i inne dane osobowe użytkowników. metoda POST nadaje się również do wysyłania dużych ilości informacji, ponieważ w przeciwieństwie do tej metody DOSTAWAĆ, nie ma ograniczeń co do liczby przesyłanych znaków.

Metoda POBIERZ

Jak już wiesz, głównym zadaniem przeglądarki jest odbieranie stron internetowych z serwera. Więc kiedy używasz tej metody DOSTAWAĆ, Twoja przeglądarka po prostu pobierze stronę internetową, tak jak zawsze. metoda DOSTAWAĆ również zawija dane formularza, ale dołącza je na końcu adresu URL przed wysłaniem żądania do serwera. Aby zrozumieć, jak działa ta metoda DOSTAWAĆ, zobaczmy to w akcji. Otwórz pierwszy przykład z tej lekcji (Przykład: prosty formularz HTML) w Notatniku (na przykład Notepad++) i dokonaj niewielkiej zmiany w kodzie HTML:

te. zastępować POST NA DOSTAWAĆ.
Zapisz plik pod nazwą nazwa_pliku.html i odśwież stronę przeglądarki (F5), a następnie wypełnij formularz np Wasia Pupkin i kliknij przycisk „Prześlij”. W pasku adresu przeglądarki zobaczysz coś takiego:

File_name.html?firstname=Wasia&nazwisko=Pupkin

Teraz możesz zobaczyć nazwę każdego elementu formularza, a także jego wartość, tutaj, w adresie URL.
Adres URL jest oddzielony od reszty danych formularza znakiem zapytania, a nazwy i wartości zmiennych oddzielane są ampersandem (&) .
Tej metody należy używać, jeśli nie przesyłasz dużych ilości informacji.
Ta metoda nie zadziała, jeśli dane w formularzu są poufne, np. przechowują numer karty bankowej lub hasło.
Poza tym metoda DOSTAWAĆ nie nadaje się, jeśli razem z formularzem chcesz przesyłać pliki na serwer.

Grupowanie elementów formularza

Elementy formularza powiązane ze sobą znaczeniem można grupować pomiędzy znacznikami

I
. Wyświetli się przeglądarka
w formie ramki wokół grupy elementów formy. Wygląd ramki można zmienić za pomocą kaskadowych arkuszy stylów (CSS).
Aby dodać tytuł dla każdej grupy, będziesz potrzebować elementu , który określa tekst tytułu grupy, który ma zostać osadzony w ramce.

Etykietka (z angielskiego formularz- formularz) instaluje formularz na stronie internetowej.

Formularz przeznaczony jest do wymiany danych pomiędzy użytkownikiem a serwerem. Zakres zastosowania formularzy nie ogranicza się do przesłania danych na serwer, za pomocą skryptów klienta można uzyskać dostęp do dowolnego elementu formularza, zmienić go i zastosować według własnego uznania.

Dokument może zawierać dowolną liczbę formularzy, ale jednocześnie na serwer można przesłać tylko jeden formularz. Z tego powodu dane formularza muszą być od siebie niezależne.

Aby przesłać formularz na serwer należy skorzystać z przycisku Wyślij, to samo można osiągnąć wciskając klawisz Enter w obrębie formularza. Jeżeli na formularzu nie ma przycisku Wyślij, klawisz Enter symuluje jego użycie.

Po przesłaniu formularza na serwer kontrola nad danymi przekazywana jest do programu określonego przez atrybut akcji elementu . Przeglądarka najpierw przygotowuje informację w postaci pary „nazwa=wartość”, gdzie nazwa jest określana na podstawie atrybutu name elementu , a wartość jest wprowadzana przez użytkownika lub ustawiana w domyślnym polu formularza. Jeżeli do przesyłania danych wykorzystywana jest metoda GET, pasek adresu może przyjąć następującą postać.

Http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametry są wymienione po znak zapytania, podane po adresie programu serwera i oddzielone znakiem ampersand (&). Litery rosyjskie są konwertowane do postaci szesnastkowej (w postaci %HH, gdzie HH jest kodem szesnastkowym wartości znaku ASCII), spację zastępuje się plusem (+).

Dozwolone w pojemniku umieść inne elementy, natomiast sam formularz nie jest w żaden sposób wyświetlany na stronie internetowej, widoczne są jedynie elementy znajdujące się w jego wnętrzu.

Składnia

...

Znacznik zamykający jest wymagany.

CZEKAJ ARIA

Domyślna wartość roli: formularz

Prawidłowe wartości roli:

  • nic
  • prezentacja
  • szukaj

Atrybuty

  • Accept-charset - Ustawia kodowanie, w jakim serwer może akceptować i przetwarzać dane.
  • akcja - Adres programu lub dokumentu przetwarzającego dane formularza.
  • autouzupełnianie - Włącza autouzupełnianie pól formularza.
  • enctype — sposób kodowania danych formularza.
  • metoda - metoda protokołu HTTP.
  • name - nazwa formularza.
  • novalidate - Anuluje wbudowaną walidację danych formularza pod kątem poprawności wprowadzonych danych.
  • target — Nazwa okna lub ramki, do której moduł obsługi załaduje zwrócony wynik.

akceptowanie-charset

Ustawia kodowanie, w jakim serwer może akceptować i przetwarzać dane z formularzy.

Składnia

...

Wartości

Nazwa kodowania, na przykład Windows-1251, UTF-8 itp.

Domyślna wartość

Zestaw kodowania strony.

działanie

Określa procedurę obsługi, za pomocą której uzyskiwany jest dostęp do danych formularza po ich przesłaniu na serwer. Programem obsługi może być program serwera lub dokument HTML zawierający skrypty serwera (na przykład Parser). Gdy procedura obsługi wykona akcje na danych formularza, zwraca nowy dokument HTML.

Jeśli brakuje atrybutu akcji, bieżąca strona zostanie przeładowana, przywracając wszystkim elementom formularza wartości domyślne.

Składnia

...

Wartości

Wartość przyjmuje się jako pełną lub względna ścieżka dostępu do pliku serwera.

Domyślna wartość

autouzupełnienie

Kontroluje automatyczne wypełnianie pól formularza. Wartość można zastąpić atrybutem autouzupełniania określone elementy formy.

Autouzupełniania dokonuje przeglądarka, która zapamiętuje wartości zapisane przy pierwszym wpisaniu, a następnie podstawia je przy ponownym wpisaniu w pola formularza. W takim przypadku autouzupełnianie można wyłączyć w ustawieniach przeglądarki i nie można go w tym przypadku zmienić za pomocą atrybutu autouzupełniania.

Po wpisaniu pierwszych liter tekstu wyświetli się lista zapisanych wcześniej wartości, z której możesz wybrać to, czego potrzebujesz.

Składnia

...

Wartości

  • on - Włącza automatyczne wypełnianie formularzy.
  • off - Wyłącza autouzupełnianie. Ta wartość jest zwykle używana, aby uniemożliwić przeglądarce zapisywanie ważnych danych (hasła, numery kart bankowych), a także rzadko wprowadzanych lub unikalnych danych (captcha).

Domyślna wartość

typ en

Określa sposób kodowania danych formularza po ich przesłaniu na serwer. Zwykle nie ma potrzeby ustawiania atrybutu enctype, dane są rozumiane po stronie serwera całkiem poprawnie. Jeśli jednak używasz pola przesyłania pliku (input type="file"), powinieneś zdefiniować atrybut enctype jako multipart/form-data .

Składnia

...

Wartości

  • application/x-www-form-urlencoded - Spacje są zastępowane przez +, znaki takie jak rosyjskie litery są kodowane przy użyciu ich wartości szesnastkowych (na przykład %D0%90%D0%BD%D1%8F zamiast Anya).
  • multipart/form-data - Dane nie są kodowane. Ta wartość jest używana podczas wysyłania plików.
  • tekst/zwykły - Spacje są zastępowane znakiem +, litery i inne znaki nie są kodowane.

Domyślna wartość

application/x-www-form-urlencoded

metoda

Atrybut metody informuje serwer o metodzie żądania.

Składnia

...

Wartości

Wartość atrybutu metody nie uwzględnia wielkości liter. Istnieją dwie metody - pobierz i opublikuj.

  • get - Ta metoda jest jedną z najpopularniejszych i ma na celu uzyskanie wymaganych informacji i przesłanie danych w pasku adresu. Pary nazwa=wartość są następnie dołączane do adresu po znaku zapytania i oddzielane ampersandem (symbolem &). Wygoda stosowania metody get polega na tym, że adresu wraz ze wszystkimi parametrami można używać wielokrotnie, zapisując go np. w zakładkach przeglądarki, a także można zmieniać wartości parametrów bezpośrednio w pasku adresu.
  • post - Metoda post wysyła dane do serwera w żądaniu przeglądarki. Dzięki temu możesz wysłać duża ilość danych niż jest dostępna dla metody get, ponieważ post nie ma limitu 4 KB. Duże objętości dane są wykorzystywane na forach, w usługach pocztowych, przy wypełnianiu bazy danych, podczas wysyłania plików itp.

Domyślna wartość

nazwa

Definiuje unikalna nazwa formy. Zwykle nazwa formularza służy do uzyskiwania dostępu do jego elementów za pomocą skryptów.

Składnia

...

Wartości

Nazwa to zbiór znaków, w tym cyfr i liter. W języku JavaScript rozróżniana jest wielkość liter, więc uzyskując dostęp do formularza po nazwie za pomocą skryptów, należy używać tej samej pisowni, co atrybut name.

Domyślna wartość

nowalidat

Anuluje wbudowaną weryfikację poprawności danych wprowadzonych przez użytkownika w formularzu. Sprawdzenie to odbywa się automatycznie przez przeglądarkę w momencie przesłania formularza na serwer i dotyczy pól , , a także czy istnieje wzorzec lub wymagany atrybut.

Składnia

...

Wartości

Domyślna wartość

Domyślnie ten atrybut jest wyłączony.

cel

Gdy moduł obsługi formularza odbierze dane, zwraca wynik w postaci dokumentu HTML. Możesz zdefiniować ramkę, do której będzie ładowana wynikowa strona internetowa. Aby to zrobić, użyj atrybutu target, jako jego wartość podana jest nazwa ramki. Jeśli cel nie jest ustawiony, zwrócony wynik zostanie wyświetlony w bieżącej zakładce.

Składnia

...

Wartości

Wartością jest nazwa ramki określona przez atrybut name elementu