Tworzenie formularza CSS. Formularze HTML

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ść formularzy, w tym elementy takie jak pola tekstowe i przyciski, a także wszelkie inne znaczniki 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 elementu 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

Jednym z najprostszych typów elementów formularza jest pole tekstowe, przeznaczone do wprowadzania tekstu w jednej linii. Ten typ wprowadzania tekstu jest ustawiony domyślnie i dlatego jest to jednoliniowe 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 rodzajem zwykłego pola tekstowego. 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 maksymalną liczbę znaków, jaką można wpisać w danym ciągu. 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 wymagany i odgrywa ważną rolę w łączeniu kilku elementów przełącznika w grupę. Aby połączyć przyciski radiowe w grupę, należy ustawić tę samą wartość atrybutu nazwa i inną wartość atrybutu 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 wykorzystywane do przesyłania poufnych danych, takich jak hasła, dane kart bankowych 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.

...zawartość formularza...

  • Zaraz wewnątrz elementu formularza powinny znajdować się kontrolki, których może być tyle, ile potrzeba.

    • Atrybuty formularza:

    • Atrybut akcja określa plik serwerowy ze skryptem odpowiedzialnym za główne przetwarzanie danych wysyłanych z formularza. Zazwyczaj kod tego pliku jest napisany w języku programowania po stronie serwera, na przykład w php Lub perł.
    • Atrybut enctype wskazuje rodzaj informacji przesyłanej do serwera, jeśli są to dane tekstowe - tekstowe/zwykłe, jeśli pliki przesyłane są z formularzem, należy określić dane wieloczęściowe/formularzowe.
    • Atrybut metody określa i definiuje formę przesyłania danych. Nie będziemy się nad tym szczegółowo rozwodzić, ale należy powiedzieć, że dla bardziej niezawodnej transmisji należy określić metodę pocztową.

    Elementy formularza HTML

      <typ wejścia = „tekst” nazwa = „login” rozmiar = „20” wartość = „Login" maxlength = "25" > !}

      Wynik:

      • Wartość atrybutu type - tekst - wskazuje, że jest to pole tekstowe
      • size — rozmiar pola tekstowego w znakach
      • maxlength — maksymalna liczba znaków, które zmieszczą się w polu
      • wartość - początkowy tekst w polu tekstowym
      • name — nazwa elementu, niezbędna do przetwarzania danych w pliku obsługi

      Wynik:


      Zamiast tekstu w polu wyświetlana jest maska ​​– gwiazdki lub kółka

      <typ wejścia = wartość „prześlij” = "Przesłać dane">

      Wynik:

      Przycisk Wyślij zbiera wszystkie dane wprowadzone przez użytkownika w formularzu i wysyła je na adres podany w atrybucie akcji formularza.

      <typ wejścia = wartość „reset” = „Wyczyść formularz" > !}

      Wynik:

      Przycisk przywraca stan wszystkich kontrolek do stanu pierwotnego (czyści formularz)

      <typ wejścia = „pole wyboru” nazwa = „asp” wartość = „tak" > !}ŻMIJA.<br> <typ wejścia = „pole wyboru” nazwa = „js” wartość = „tak" checked = "checked" > !} JavaScript<br> <typ wejścia = „pole wyboru” nazwa = „php” wartość = „tak" > !} PHP<br> <typ wejścia = „pole wyboru” nazwa = „html” wartość = „tak" checked = "checked" > !} HTML<br>

      ŻMIJA.
      JavaScript
      PHP
      HTML


      Wynik:

      ŻMIJA.
      JavaScript
      PHP
      HTML

      W HTML pole wyboru służy do organizowania wielokrotnego wyboru, tj. gdy jest to konieczne i możliwe, zaznaczenie kilku opcji odpowiedzi

      <typ wejścia = „radio” nazwa = „książka” wartość = „asp" > !}ŻMIJA.<br> <typ wejścia = „radio” nazwa = „książka” wartość = „js" > !} JavaScript<br> <typ wejścia = „radio” nazwa = „książka” wartość = „php" > !} PHP<br> <typ wejścia = „radio” nazwa = „książka” wartość = „html" checked = "checked" > !} HTML<br>

      ŻMIJA.
      JavaScript
      PHP
      HTML

      Wynik:

      ŻMIJA.
      JavaScript
      PHP
      HTML

      Przycisk radiowy html służy do pojedynczego wyboru z kilku opcji

      Sprawdzony atrybut natychmiast ustawia element jako zaznaczony

    Ważny: Dla elementów radio konieczne jest, aby wartość atrybutu nazwa wszystkie elementy w grupie były takie same: w tym przypadku elementy będą działać ze sobą połączone, gdy jeden element zostanie włączony, pozostałe zostaną wyłączone

    Lista rozwijana HTML

    Spójrzmy na przykład dodania listy rozwijanej:

    1 2 3 4 5 6 <wybierz nazwę = „książka” rozmiar = „1” > <wartość opcji = "asp" > !}ŻMIJA.</opcja> <wartość opcji = "js" > !} JavaScript</opcja> <wartość opcji = "php" > !} PHP</opcja> <wartość opcji = "html" selected = "selected" > !} HTML</opcja> </wybierz>

    Wynik:

    • Lista rozwijana składa się ze znacznika głównego - wybierz - który ma parę zamykającą, a każdy element listy jest znacznikiem opcji, wewnątrz którego wyświetlany jest tekst elementu
    • atrybut rozmiaru z wartością „1” wskazuje, że zwinięta lista wyświetla jedną pozycję, pozostałe otwiera się po kliknięciu strzałki menu
    • Wybrany atrybut elementu (opcja) wskazuje, że ten konkretny element będzie początkowo widoczny, a pozostałe elementy zostaną „zwinięte”

    W przypadku dużych i złożonych list dostępna jest opcja dodaj podtytuły— tag optgroup z atrybutem label:

    1 2 3 4 5 6 7 8 9 10 11 12 <wybierz nazwę = „książka” rozmiar = „1” > <etykieta optgroup = "angielski" > <wartość opcji = "asp" > !}ŻMIJA.</opcja> <wartość opcji = "js" > !} JavaScript</opcja> <wartość opcji = "php" > !} PHP</opcja> <wartość opcji = "html" selected = "selected" > !} HTML</opcja> </grupaopt> <etykieta optgroup = "Rosjanie" > <wartość opcji = "asp_rus" > !} ASP po rosyjsku</opcja> <wartość opcji = "js_rus" > !} JavaScript w języku rosyjskim</opcja> </grupaopt> </wybierz>


    Aby zapewnić możliwość wybierając kilka elementów na raz musisz dodać atrybut wielokrotny. Ale w tym przypadku atrybut size powinien być również ustawiony na wartość większą niż 1:

    Wynik:

    • Szerokość elementu zależy od atrybutu cols, który określa, ile znaków zmieści się w poziomie
    • Atrybut rows określa liczbę wierszy w elemencie

    Inne elementy

    Dodatkowe elementy i atrybuty

    • Do kontroli radio I pole wyboru Wygodne jest użycie dodatkowych elementów, które po pierwsze wiążą tekst z samym elementem radia lub pola wyboru, a po drugie dodają obrys po kliknięciu:
      • <typ wejścia = „pole wyboru” id = „książka 1” > <etykieta dla = "książka1" >ŻMIJA.</etykieta>

      W przykładzie utworzono napis (etykietę) dla elementu checkbox. Powiązanie odbywa się poprzez atrybut id, którego wartość jest podana w atrybucie for etykiety.

      Wynik:

    • Atrybut wyłączony umożliwia zablokowanie elementu, uniemożliwiając jego zmianę przez użytkownika:
      • <typ wejścia = „tekst” nazwa = „login” rozmiar = „20” wartość = „Login" maxlength = "25" disabled = "disabled" >!}
      <typ wejścia = „pole wyboru” nazwa = „asp” wartość = „tak" > !}ŻMIJA.<br> <typ wejścia = „pole wyboru” nazwa = „js” wartość = „tak" checked = "checked" disabled = "disabled" > !} JavaScript<br>


      ŻMIJA.
      JavaScript

    Formularze można znaleźć na niemal każdej stronie internetowej. Przykładowo, gdy podasz login i hasło na stronie internetowej, dane zostaną uzupełnione poprzez formularze i przesłane na serwer. Przykładem formularza są także różnego rodzaju ankiety.

    Składnia tagu

    ...

    Etykietka

    posiada bardzo ważny atrybut akcji, któremu przypisany jest adres (URL) skryptu, do którego przesyłane są do przetworzenia otrzymane informacje z formularza. Nie będziemy wdawać się w szczegóły tego, co dzieje się po wysłaniu danych, ponieważ problemy te są już rozwiązywane nie przez HTML, ale przez metody GET i POST w PHP.

    Przykład 1. Formularz HTML z przyciskami

    Będą to przyciski:
    Przycisk pierwszy
    Przycisk drugi
    Przycisk trzeci
    Będzie to pole tekstowe. Tutaj możesz na przykład wpisać swój login

    Będzie to duże pole tekstowe. Możesz na przykład wprowadzić tutaj informacje o sobie

    Po wykonaniu wszystkich powyższych czynności pojawi się przycisk OK

    Po kliknięciu OK strona się po prostu odświeży, bo... nie określiliśmy parametru akcji

    Konwertuje na następujący tekst na stronie:

    Wyjaśnienia np

    • action="" - wskazuje, że przetwarzanie danych będzie odbywać się na tej samej stronie.
    • - atrybut type="radio" wskazuje, że po tym kodzie należy wyświetlić tekst jako przycisk wyboru. Atrybut name i value w tym tagu odgrywają teraz dla nas niewielką rolę, ponieważ Nie uczymy się teraz php (zobacz lekcje php).
    • - atrybut type="text" wskazuje, że będzie to pole tekstowe. Istnieją tu również dwa ważne atrybuty: nazwa (dla php) i wartość (wartość domyślna).
    • - atrybut type="textarea" wskazuje, że będzie to duże pole tekstowe. Jedyną różnicą w stosunku do poprzedniego przypadku jest to, że pozwala na zapisanie dużej ilości tekstu.
    • - atrybut type="submit" wskazuje, że jest to przycisk. Atrybut value zawiera to, co zostanie zapisane na przycisku.

    Więcej o wszystkich tych elementach możesz przeczytać w lekcji 15: Elementy tagów

    , gdzie uwzględniane są przyciski opcji, listy, pola wyboru, pola tekstowe i przyciski.

    Przyjrzyjmy się teraz bliżej wszystkim atrybutom tagów .

    Atrybuty i właściwości znaczników

    1. Atrybut akceptować-charset="Kodowanie"- określa kodowanie, w jakim serwer może przyjmować i przetwarzać dane z formularzy. Może przyjmować różne wartości, na przykład CP1251, UTF-8 itp.

    2. Atrybut action="URL" to adres skryptu przetwarzającego dane przesłane z formularza. Jeżeli pozostawisz tę wartość pustą, dane będą przetwarzane w tym samym dokumencie, w którym znajduje się formularz.

    3. Atrybut autocomplete="on/off" - ustawia lub wyłącza autouzupełnianie formularza. Może przyjmować dwie wartości:

    • on - włącz autouzupełnianie;
    • off - wyłącz autouzupełnianie;

    4. Atrybut enctype="parametr" - określa sposób kodowania danych. Może przyjmować następujące wartości:

    • application/x-www-form-urlencoded- spacje są zastępowane przez +, znaki takie jak rosyjskie litery są kodowane za pomocą ich wartości szesnastkowych
    • multipart/form-data - dane nie są kodowane
    • tekst/zwykły - spacje są zastępowane znakiem +, litery i inne znaki nie są kodowane.

    5. Atrybut Method="POST/GET" - określa sposób wysyłki. Może przyjmować dwie wartości:

    • GET - transmisja danych w pasku adresu (istnieje ograniczenie ilości przesyłanych danych)
    • POST - wysyła dane do serwera w żądaniu przeglądarki (może wysłać dużą ilość danych, ponieważ nie ma ograniczenia objętości)

    6. Atrybut name="name" - ustawia nazwę formularza. Najczęściej używane, gdy istnieje wiele formularzy, dzięki czemu można uzyskać dostęp do określonego formularza za pomocą skryptu.

    7. Atrybut novalidate - anuluje wbudowane sprawdzanie danych formularza pod kątem poprawności wprowadzonych danych.

    8. Atrybut target="parametr" to nazwa okna lub ramki, w której procedura obsługi załaduje zwrócony wynik. Może przyjmować następujące wartości:

    • _blank - ładuje stronę do nowego okna przeglądarki
    • _self - ładuje stronę do bieżącego okna
    • _parent - ładuje stronę do ramki nadrzędnej
    • _top - anuluje wszystkie ramki i ładuje stronę w pełnym oknie przeglądarki

    Drogi czytelniku, teraz dowiedziałeś się znacznie więcej o znaczniku formularza HTML. Teraz radzę ci przejść do następnej lekcji.

    Biorąc pod uwagę podstawowe znaczniki HTML, nie sposób nie wspomnieć o tak ważnym elemencie, jakim są formularze. Na stronach internetowych często potrzebna jest opinia. Na przykład wypełnienie formularza na stronie, rejestracja, autoryzacja, komentarze itp. We wszystkich tych przypadkach użytkownik wypełnia na stronie specjalne obszary (pola formularza), po czym dane przesyłane są na serwer. Formularze służą do tworzenia opinii. Formularz to fragment dokumentu HTML przeznaczony do wprowadzania danych przez użytkownika.

    Na rysunku przedstawiono formularz rejestracji studenta znajdujący się na stronie internetowej instytucji edukacyjnej.

    Kontener służy do tworzenia formularza

    z atrybutem akcja, który określa stronę na serwerze, która będzie przetwarzać dane przesyłane przez formularz.

    Struktura w najprostszej postaci:


    elementy formy...

    Każdy formularz musi posiadać również przycisk przesyłania umożliwiający przesłanie danych po wypełnieniu formularza.

    Struktura przycisku:

    Tak więc, aby zapisać prawie wszystkie elementy formularza, używany jest tag z atrybutem type. Aby utworzyć przycisk resetujący wszystkie dane z formularzy stosuje się następującą strukturę:

    Aby utworzyć pole tekstowe, dostępny jest parametr tekstowy. Stosowane są następujące parametry: nazwa – nazwa pola; rozmiar – dla pola w symbolach; maxlength – maksymalna możliwa liczba znaków w polu; wartość – informacja domyślnie wyświetlana w formularzu

    Przykład wpisu formularza z dwoma polami tekstowymi:


    Wpisz swoje imię:



    Wpisz nazwisko:





    Wynik formularza pokazano na rysunku.

    Jeżeli potrzebujesz wpisać w pole tekstowe dużą ilość informacji, np. komentarz, skorzystaj z formularza obszaru tekstowego, który tworzony jest za pomocą tagu

    Wynik działania kodu z obszarem tekstowym pokazano na rysunku.

    Kolejnym elementem formularzy są listy umożliwiające dokonanie wyboru z prezentowanego zestawu wartości. Tagi umożliwiają utworzenie formularza listy

    Aby element był podświetlony podczas ładowania strony, jest to konieczne w tagu

    Podobną metodą selekcji są elementy formularza wyboru i przycisku radiowego. Różnica pomiędzy tymi elementami polega na tym, że pole wyboru pozwala na dokonanie wielokrotnego wyboru, natomiast przycisk radiowy umożliwia tylko jeden wybór.

    Struktura pola wyboru i wpisu przycisku radiowego:

    tekst

    Przycisk radiowy:

    tekst

    W elementach określonych w konstrukcji atrybut zaznaczony domyślnie służy do podświetlania pola wyboru i przycisku radiowego. Przykład użycia pola wyboru, przycisku radiowego i kodu HTML pokazano na rysunku.

    Kolejnym elementem formularza jest przycisk, określony za pomocą atrybutu znacznika type za pomocą przycisku wartości:

    W określonym kodzie służącym do tworzenia przycisku znajduje się parametr onclick, który zwykle określa kod w języku programowania wykonujący określoną akcję po kliknięciu tego przycisku:

    Aby wyświetlić komunikat w specjalnym oknie, użyj polecenia JavaScript – aler. Wynik przykładu pokazano na rysunku.

    Aby wstawić obraz do przycisku, użyj kodu pokazanego w poniższym przykładzie:

    Podczas rejestracji i logowania do serwisów wykorzystywane jest pole z ukrytym testem, wyświetlane w postaci gwiazdek. To jest element formularza hasła:

    Rejestracja w serwisie często podzielona jest na kilka stron i każda kolejna musi zawierać informacje z poprzedniej. W celu ukrycia przesyłanych informacji stosuje się ukryty element formularza:

    Ukryty element formularza będzie niewidoczny w oknie przeglądarki.

    Aby przesłać pliki na serwer, formularze zawierają element pliku. Poniżej przedstawiono przykładowy kod umożliwiający wgranie plików na serwer:

    Dlatego w tym temacie przyjrzeliśmy się elementom formularzy do tworzenia różnych stron HTML, które wraz z procedurami obsługi skryptów na komputerze lub serwerze pozwalają na tworzenie pełnoprawnych aplikacji internetowych.

    Obecnie prawie żadna strona internetowa nie może obejść się bez elementów interfejsu, takich jak pola do wprowadzania tekstu, przyciski, przełączniki i pola wyboru. Są niezbędne do interakcji użytkownika, aby mógł on przeszukiwać witrynę za pomocą słów kluczowych, pisać komentarze, odpowiadać na ankiety, dołączać zdjęcia i wykonywać wiele innych podobnych czynności. To właśnie formularze dają pewność, że dane od użytkownika zostaną odebrane i przesłane na serwer, gdzie zostaną już poddane analizie i przetworzeniu. Jeśli więc planujesz zrobić coś podobnego na stronie, bez formularzy nie uda Ci się tego zrealizować.

    Sam formularz tworzony jest za pomocą tagu

    , który może zawierać dowolne niezbędne tagi i charakteryzuje się następującymi opcjonalnymi parametrami:

    1. adres programu na serwerze WWW, który będzie przetwarzał zawartość danych formularza;
    2. elementy formularza, które są standardowymi polami do wprowadzania danych przez użytkownika;
    3. przycisk służący do wysyłania danych na serwer.

    Dopuszcza się użycie kilku formularzy na stronie, jednak nie należy ich zagnieżdżać jeden w drugim (przykład 1).

    Przykład 1: Błędne użycie formularzy

    HTML5 IE Cr na Fx

    Formularze

    Przeglądarka przed wysłaniem danych przygotowuje informację w postaci pary nazwa=wartość, gdzie nazwa jest określana na podstawie atrybutu name tagu lub inny ważny tag w formularzu, a wartość jest wprowadzana przez użytkownika lub ustawiana w domyślnym polu formularza. Po kliknięciu przez użytkownika przycisku Wyślij wywoływana jest procedura obsługi formularza, która odbiera wprowadzone w formularzu informacje, a następnie robi z nimi to, co zamierzył programista. Moduł obsługi formularza to zwykle program określony przez atrybut akcji znacznika.

    . Program można napisać w dowolnym języku po stronie serwera, takim jak PHP, Python, C# itp.

    Często zdarza się, że bieżąca strona napisana, powiedzmy, w PHP, sama jest obsługą formularzy; w tym przypadku możesz podać pustą wartość atrybutu akcji lub całkowicie ją pominąć. W najprostszym przypadku tag nie zawiera żadnych atrybutów i jest przedstawiony w przykładzie 2.

    Przykład 2. Prosta forma

    HTML5 IE Cr na Fx

    Formularze

    Możesz także określić adres e-mail jako wartość atrybutu akcji, zaczynając od słowa kluczowego mailto:. Po przesłaniu formularza zostanie uruchomiony domyślny program pocztowy. Ze względów bezpieczeństwa przeglądarka jest ustawiona tak, aby informacje wprowadzone w formularzu nie zostały przesłane w sposób dyskretny pocztą. Aby poprawnie zinterpretować dane, użyj atrybutu enctype z wartością tekstową/zwykłą w tagu

    (przykład 3).

    Przykład 3: Wysłanie formularza pocztą

    HTML5 IE Cr na Fx

    Formularze

    Przeglądarki mają problemy z pracą z tym kodem. Firefox zaoferuje listę odpowiednich aplikacji do wysyłania poczty (rys. 1), Internet Explorer wyświetli ostrzeżenie (rys. 2) i spróbuje uruchomić program powiązany z pocztą, Opera, podobnie jak Firefox, zaoferuje listę odpowiednich opcji do wysyłania poczty (ryc. 3).

    Ryż. 1. Uruchom aplikację w przeglądarce Firefox

    Ryż. 2. Ostrzeżenie dotyczące przeglądarki Internet Explorer

    Ryż. 3. Wybór programu w Operze