Tworzenie formularzy HTML

Formularze HTML to elementy sterujące służące do zbierania informacji od odwiedzających witrynę.

Formularze internetowe składają się z zestawu pól tekstowych, przycisków, list i innych elementów sterujących, które są aktywowane kliknięciem myszy. Formularze technicznie przekazują dane od użytkownika do zdalnego serwera.

Do odbierania i przetwarzania danych z formularzy wykorzystywane są języki programowania internetowego, takie jak: PHP, Perl.

Przed pojawieniem się HTML5 formularze internetowe były zbiorem kilku elementów , kończąc na guziku . Stylizowanie formularzy w różnych przeglądarkach wymagało wiele wysiłku. Ponadto formularze wymagały użycia JavaScript do walidacji wprowadzonych danych, a także zostały pozbawione określonych typów pól wejściowych do określania codziennych informacji takich jak daty, adresy E-mail i adresy URL.

Formularze HTML5 rozwiązał większość tych typowych problemów dzięki obecności nowych atrybutów, zapewniających możliwość zmiany wygląd zewnętrzny elementy formularza ze względu na CSS3.

Ryż. 1. Ulepszone formularze internetowe z HTML5

Tworzenie formularza HTML5

1 przedmiot

Podstawą każdej formy jest żywioł .... Nie dostarcza danych wejściowych, ponieważ jest pojemnikiem, w którym znajdują się wszystkie kontrolki formularza - pola. Atrybuty tego elementu zawierają informacje, które są wspólne dla wszystkich pól formularza, dlatego pola, które są połączone logicznie, muszą być zawarte w jednym formularzu.

Tabela 1. Atrybuty tagów
Atrybut Znaczenie / opis
akceptuj zestaw znaków Wartość atrybutu jest oddzielona spacjami lista kodowań znaków, który posłuży do przesłania formularza, np. .
akcja Wymagany atrybut, który określa adres URL modułu obsługi formularzy na serwerze, do którego przesyłane są dane. Jest to plik (na przykład action.php), który opisuje, co zrobić z danymi formularza. Jeżeli wartość atrybutu nie zostanie podana, to po przeładowaniu strony elementy formularza przyjmą wartości domyślne.
Jeśli cała praca będzie wykonywana po stronie klienta przez skrypty JavaScript, to atrybut action można ustawić na # .
Możesz również upewnić się, że formularz wypełniony przez odwiedzającego dotrze na Twoją pocztę. Aby to zrobić, musisz dokonać następującego wpisu:
autouzupełnienie

enctype Używane do wskazania MIM- typ danych przesyłanych z formularzem, na przykład enctype="multipart/form-data" . Określone tylko wtedy, gdy method="post" .
application/x-www-form-urlencoded to domyślny typ zawartości, wskazujący, że przesłane dane to lista zmiennych formularza zakodowanych w adresie URL. Znaki spacji (ASCII 32) zostaną zakodowane jako + , a znaki specjalne, takie jak ! zostanie zakodowany w postaci szesnastkowej jako %21 .
multipart/form-data - służy do przesyłania formularzy zawierających pliki, dane spoza ASCII oraz dane binarne, składa się z kilku części, z których każda reprezentuje zawartość oddzielnego elementu formularza.
text/plain - wskazuje, że przesyłany jest zwykły tekst (nie HTML).
metoda Określa sposób przesyłania danych formularza.
Metoda get wysyła dane do serwera za pośrednictwem paska adresu przeglądarki. Podczas tworzenia żądania do serwera wszystkie zmienne i ich wartości tworzą sekwencję taką jak www.anysite.ru/form.php?var1=1&var2=2 . Czy po znaku są dodawane nazwy i wartości zmiennych do adresu serwera? i są oddzielone znakami & . Wszystko Symbole specjalne a litery inne niż łacińskie są zakodowane w formacie %nn , spacja jest zastępowana przez + . Ta metoda powinna być stosowana, jeśli nie przesyłasz dużych ilości informacji. Jeśli plik ma być przesłany wraz z formularzem, ta metoda nie zadziała.
Metoda pocztowa służy do przesyłania dużych ilości danych, a także poufnych informacji i haseł. Dane przesłane tą metodą nie są widoczne w nagłówku adresu URL, ponieważ znajdują się one w treści wiadomości.
nazwać Zestawy Nazwa formularza, który będzie używany do uzyskiwania dostępu do elementów formularza za pomocą skryptów, na przykład name="opros" .
nowalidat Wyłącza walidację w przycisku przesyłania formularza. Atrybut jest używany bez wartości
cel Określa okno, do którego zostaną wysłane informacje:
_blank - nowe okno
_ja to ta sama ramka
_parent - ramka nadrzędna (jeśli istnieje, jeśli nie, to do obecnej)
_górne okno Najwyższy poziom w odniesieniu do tej ramy. Jeśli wywołanie nie pochodzi z ramki podrzędnej, to do tej samej ramki.

2. Grupowanie elementów formularza

Element

...
służy do grupowania powiązanych ze sobą elementów, dzieląc w ten sposób formę na logiczne fragmenty.

Każdej grupie elementów można nadać nazwę za pomocą elementu , który pojawia się zaraz po tagu

. Nazwa grupy pojawia się po lewej stronie w górnej ramce
. Na przykład, jeśli element
dane kontaktowe są przechowywane:

Informacje kontaktowe


Ryż. 2. Grupowanie elementów formularza za pomocą

Tabela 2. Atrybuty tagów
Atrybut Znaczenie / opis
niepełnosprawny Jeśli atrybut jest obecny, to grupa powiązane przedmioty formularze wewnątrz pojemnika
, wyłączone do wypełniania i edycji. Służy do ograniczania dostępu do niektórych pól formularza zawierających wcześniej wprowadzone dane. Atrybut jest używany bez określenia wartości −
.
Formularz
w tym samym dokumencie. Wskazuje co najmniej jeden formularz, do którego należy ta grupa elementów. Na ten moment atrybut nie jest obsługiwany przez żadną przeglądarkę.
nazwać Definiuje nazwać, który będzie używany do odwoływania się do elementów w JavaScript lub do odwoływania się do danych formularza po wypełnieniu i przesłaniu formularza. Jest analogiczny do atrybutu id.

3. Utwórz pola formularza

Element tworzy większość pól formularza. Atrybuty elementu różnią się w zależności od typu pola, które element jest używany do tworzenia.

Dzięki stylom CSS możesz zmienić rozmiar czcionki, typ czcionki, kolor i inne właściwości tekstu, a także dodać obramowanie, kolor tła i zdjęcie w tle. Szerokość pola jest ustawiana przez właściwość width.

Tabela 3. Atrybuty tagów
Atrybut Znaczenie / opis
zaakceptować Określa typ pliku, który może zostać wysłany na serwer. Określone tylko dla . Możliwa wartość:
file_extension - umożliwia wgrywanie plików z określonym rozszerzeniem, np. accept=".gif" , accept=".pdf" , accept=".doc"
audio/* - umożliwia pobieranie plików audio
video/* - umożliwia pobieranie plików wideo
image/* - pozwala na wgrywanie obrazków
media_type - wskazuje typ mediów przesyłanych plików.
Alt Definiuje alternatywny tekst dla obrazów, wskazane tylko dla .
autouzupełnienie Odpowiedzialny za zapamiętywanie wartości wprowadzonych w polu tekstowym i automatyczne podstawianie ich do późniejszego wprowadzania:
on - oznacza, że ​​pole nie jest chronione, a jego wartość można zapisać i pobrać,
off - wyłącza autouzupełnianie pól formularza.
autofokus Umożliwia upewnienie się, że w ładowanym formularzu jedno lub inne pole wejściowe ma już fokus (zostało wybrane), jest gotowe do wprowadzenia wartości.
sprawdzony Atrybut sprawdza, czy pole wyboru jest domyślnie zaznaczone podczas ładowania strony dla pól typu type="checkbox" i type="radio" .
niepełnosprawny
Formularz Wartość atrybutu musi być równa atrybutowi identyfikatora elementu w tym samym dokumencie. Określa jeden lub więcej formularzy, do których należy to pole formularza.
formacja Określa adres URL pliku, który będzie przetwarzał dane wprowadzone w polach podczas przesyłania formularza. Ustaw tylko dla pól typu type="submit" i type="image" . Atrybut zastępuje wartość atrybutu akcji samego formularza.
formenctyp Określa, w jaki sposób dane pól formularza będą kodowane po wysłaniu na serwer. Zastępuje wartość atrybutu enctype formularza. Ustaw tylko dla pól typu type="submit" i type="image" . Opcje:
application/-x-www-form-urlencoded to wartość domyślna. Wszystkie znaki są kodowane przed wysłaniem (spacje są zastępowane znakiem +, znaki specjalne są konwertowane na wartości ASCII HEX)
multipart/form-data - znaki nie są kodowane
text/plain - spacje są zastępowane znakiem +, a znaki specjalne nie są kodowane.
forma Atrybut określa metodę, której przeglądarka użyje do przesłania danych formularza na serwer. Ustaw tylko dla pól typu type="submit" i type="image" . Zastępuje wartość atrybutu metody formularza. Opcje:
get jest wartością domyślną. Dane z formularza (para nazwa/wartość) są dodawane do adresu url i wysyłane na serwer: URL?nazwa=wartość&nazwa=wartość
post - dane formularza wysyłane są jako żądanie http.
formnowalidat Określa, że ​​dane pola formularza nie powinny być sprawdzane podczas przesyłania formularza. Zastępuje wartość atrybutu novalidate formularza. Może być używany bez określania wartości atrybutu.
formacja docelowa Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Ustaw tylko dla pól typu type="submit" i type="image" . Zastępuje wartość atrybutu target formularza.


_parent — Wczytuje odpowiedź do ramki nadrzędnej
_top - ładuje odpowiedź na pełnym ekranie
framename — ładuje odpowiedź do ramki o określonej nazwie.
Wysokość Wartość atrybutu zawiera liczbę pikseli bez określania jednostki. Ustawia wysokość pola formularza, np. type="image" , np. . Zaleca się jednoczesne ustawienie wysokości i szerokości pola.
lista Jest odniesieniem do elementu , zawiera swój identyfikator .Pozwala użytkownikowi mieć wiele opcji do wyboru, gdy zaczyna wpisywać wartość w odpowiednim polu.
maks Pozwala ograniczyć dozwolone wprowadzanie danych liczbowych do wartości maksymalnej, wartość atrybutu może zawierać liczbę całkowitą lub ułamkową. Zaleca się, aby ten atrybut był używany w połączeniu z atrybutem min. Działa z następującymi typami pól: number , range , date , datetime , datetime-local , month , time and week .
maksymalna długość Atrybut określa maksymalną liczbę znaków wprowadzanych w polu. Wartość domyślna to 524288 znaków.
min Umożliwia ograniczenie dozwolonych danych liczbowych do wartości minimalnej.
wiele Umożliwia użytkownikowi wprowadzenie wielu wartości atrybutów oddzielonych przecinkiem. Dotyczy plików i adresów e-mail. Określone bez wartości atrybutu.
nazwać Określa nazwę, która ma być używana do uzyskania dostępu do elementu , na przykład w tabelach style css. Jest analogiczny do atrybutu id.
wzór Pozwala zdefiniować za pomocą Wyrażenie regularne składnia danych, które powinny być dozwolone w określonym polu. Na przykład pattern="(3)-(3)" - nawiasy kwadratowe określają zakres poprawnych znaków, w tym przypadku - any małe litery, liczba w nawiasach klamrowych wskazuje, że chcesz trzy małe litery, po których następuje myślnik, a następnie trzy cyfry z zakresu od 0 do 9.
symbol zastępczy Zawiera tekst, który jest wyświetlany w polu wejściowym aż do jego wypełnienia (najczęściej jest to wskazówka).
tylko czytać Nie pozwala użytkownikowi na zmianę wartości elementów formularza, istnieje możliwość zaznaczania i kopiowania tekstu. Określone bez wartości atrybutu.
wymagany Wyświetla komunikat informujący, że pole jest wymagane. Jeśli użytkownik spróbuje przesłać formularz bez wpisania wymaganej wartości w tym polu, na ekranie zostanie wyświetlony komunikat ostrzegawczy. Określone bez wartości atrybutu.
rozmiar Określa widoczną szerokość pola w znakach. Wartość domyślna to 20. Działa z następującymi typami pól: text , search , tel , url , email i password .
src Określa adres URL obrazu, który ma być używany jako przycisk przesyłania danych formularza. Określone tylko dla pola .
krok Wykorzystywany dla elementów akceptujących wprowadzanie numeryczne, wskazuje wielkość zwiększenia lub zmniejszenia wartości podczas regulacji zakresu (kroku).
rodzaj button - tworzy przycisk.
checkbox - zamienia pole wejściowe w pole wyboru, które można zaznaczyć lub wyczyścić, np.
mam samochód
kolor — Generuje selektory kolorów w obsługiwanych przeglądarkach, umożliwiając użytkownikom wybieranie wartości kolorów w formacie szesnastkowym.
data - umożliwia wprowadzenie daty w formacie dd.mm.rrrr.
Urodziny:
datetime-local — umożliwia wprowadzenie daty i godziny oddzielone wielką angielską literą T przy użyciu wzorca dd.mm.rrrr gg:mm.
Urodziny - dzień i godzina:
email — przeglądarki obsługujące ten atrybut będą oczekiwać od użytkownika wprowadzenia danych zgodnych ze składnią adresów e-mail.
E-mail:
plik - umożliwia wgranie plików z komputera użytkownika.
Wybierz plik:
ukryty — ukrywa kontrolkę, która nie jest wyświetlana przez przeglądarkę, i uniemożliwia użytkownikowi zmianę wartości domyślnych.
image - tworzy przycisk, który pozwala wstawić na przycisk obrazek zamiast tekstu.
miesiąc — umożliwia użytkownikowi wprowadzenie numeru roku i miesiąca przy użyciu wzoru rrrr-mm.
number - przeznaczony do wprowadzania wartości całkowitych. Jego atrybuty min , max i step ustawiają odpowiednio górną, dolną i krok między wartościami. Te atrybuty są zakładane dla wszystkich elementów, które mają wskaźniki liczbowe. Ich domyślne wartości zależą od typu elementu.
Określ ilość (od 1 do 5):
hasło - tworzy pola tekstowe w formularzu, a wpisywane przez użytkownika znaki są zastępowane gwiazdkami, punktorami lub innymi, zainstalowany przez przeglądarkę ikony.
Wprowadź hasło:
radio — tworzy przycisk radiowy — kontrolkę w postaci małego okręgu, którą można włączyć lub wyłączyć.
Wegetariański:
zakres - pozwoli na stworzenie elementu interfejsu takiego jak suwak min/max - pozwoli na ustawienie zakresu zaznaczenia
reset — tworzy przycisk, który czyści pola formularza z danych wprowadzonych przez użytkownika.
search - oznacza pole wyszukiwania, domyślnie pole wejściowe ma kształt prostokąta.
Szukaj:
prześlij - tworzy standardowy przycisk, który jest aktywowany kliknięciem myszy. Przycisk zbiera informacje z formularza i przekazuje je do przetworzenia.
tekst — tworzy pola tekstowe w formularzu, wyświetlając jednowierszowe pole tekstowe do wprowadzania tekstu.
czas — umożliwia wprowadzenie czasu w formacie 24-godzinnym przy użyciu wzorca hh:mm. W obsługiwanych przeglądarkach pojawia się jako numeryczna kontrolka wejściowa z wartością, którą można regulować za pomocą myszy, i akceptuje tylko sygnatury czasowe.
Określ czas:
url - pole przeznaczone do określenia adresów URL.
Strona główna:
tydzień — odpowiednie narzędzie indeksu pozwala użytkownikowi wybrać jeden tydzień w roku, po którym nastąpi wprowadzenie danych w formacie nn-rrrr. W zależności od roku liczba tygodni może wynosić 52 lub 53.
Określ tydzień:
wartość Określa tekst wyświetlany na przycisku, polu lub skojarzonym tekście. Nie określono dla pól pliku typu.
szerokość Wartość atrybutu zawiera liczbę pikseli. Umożliwia ustawienie szerokości pól formularza.

4. Pola wprowadzania tekstu

Element używany zamiast elementu kiedy musisz utworzyć duże pola tekstowe. Tekst wyświetlany jako oryginalna wartość jest umieszczany wewnątrz znacznika. Wymiary pól ustala się za pomocą atrybutów cols - wymiary poziome, wiersze - wymiary pionowe. Wysokość pola można ustawić za pomocą właściwości height. Wszystkie rozmiary są obliczane na podstawie rozmiaru jednego znaku w czcionce o stałej szerokości.

Tabela 4. Atrybuty tagów

7. Przyciski

Element tworzy klikalne przyciski. W przeciwieństwie do utworzonych przycisków ( , , , ), wewnątrz elementu .

Przyciski umożliwiają użytkownikom przesłanie danych do formularza, wyczyszczenie zawartości formularza lub wykonanie innej czynności. Możesz tworzyć obramowania, zmieniać tło i wyrównywać tekst na przycisku.

Tabela 9. Atrybuty tagów
Atrybut Znaczenie / opis
autofokus Ustawia fokus na przycisk podczas wczytywania strony.
niepełnosprawny Wyłącza przycisk, dzięki czemu nie można go kliknąć.
Formularz Wskazuje co najmniej jeden formularz, do którego należy ten przycisk. Wartość atrybutu jest identyfikatorem odpowiedniego formularza.
formacja Wartość atrybutu zawiera adres url procedury obsługi danych formularza wysyłanej po kliknięciu przycisku. Tylko dla przycisku typu type="submit" . Zastępuje wartość atrybutu akcji określonego dla elementu .
formenctyp Ustawia typ kodowania danych formularza przed wysłaniem ich na serwer po kliknięciu przycisków typu type="submit" . Zastępuje wartość atrybutu enctype określonego dla elementu . Możliwa wartość:
application/x-www-form-urlencoded to wartość domyślna. Wszystkie znaki zostaną zakodowane przed wysłaniem.
multipart/form-data — znaki nie są kodowane. Jest używany, gdy pliki są przesyłane za pomocą formularza.
text/plain - znaki nie są kodowane, a spacje są zastępowane znakiem +.
forma Atrybut określa metodę, której przeglądarka użyje do przesłania formularza. Zastępuje wartość atrybutu metody określonego dla elementu . Określone tylko dla przycisków typu type="submit" . Możliwa wartość:
get - dane z formularza (para nazwa/wartość) są dodawane do adresu url i wysyłane na serwer. Ta metoda ma ograniczenia dotyczące rozmiaru przesyłanych danych i nie nadaje się do przesyłania haseł i informacji poufnych.
post - dane z formularza są dodawane jako żądanie http. Metoda jest bardziej niezawodna i bezpieczna niż get i nie ma limitu rozmiaru.
formnowalidat Atrybut określa, że ​​dane formularza nie powinny być sprawdzane podczas przesyłania. Określone tylko dla przycisków typu type="submit" .
formacja docelowa Atrybut określa, w którym oknie ma być wyświetlany wynik po przesłaniu formularza. Określone tylko dla przycisków typu type="submit" . Zastępuje wartość atrybutu docelowego określonego dla elementu .
_blank — ładuje odpowiedź do nowego okna/karty
_self - ładuje odpowiedź w tym samym oknie (domyślnie)
_parent - ładuje odpowiedź do ramki nadrzędnej
_top - ładuje odpowiedź na pełnym ekranie
framename — ładuje odpowiedź do ramki o określonej nazwie.
nazwać Ustawia nazwę przycisku, wartością atrybutu jest tekst. Używany do odwoływania się do danych formularza po przesłaniu formularza lub do odwoływania się do danego przycisku (przycisków) w JavaScript.
rodzaj Określa typ przycisku. Możliwa wartość:
przycisk - klikalny przycisk
reset - przycisk resetowania, zwraca oryginalną wartość
Prześlij to przycisk służący do przesyłania danych formularza.
wartość Ustawia domyślną wartość wysyłaną po kliknięciu przycisku.

8. Pola wyboru i przyciski radiowe w formularzach

Pola wyboru w formularzach są ustawiane za pomocą konstrukcji , a przełącznik - za pomocą .

Pola wyboru, w przeciwieństwie do przycisków opcji, mogą mieć wiele pól wyboru w jednym formularzu. Jeśli zaznaczony atrybut jest określony dla pól wyboru, to po załadowaniu strony odpowiednie pola formularza będą już miały zaznaczone pola wyboru.

Element

Formularze można znaleźć w Internecie na prawie każdej stronie. Np. po wpisaniu na stronie loginu i hasła dane są uzupełniane za pomocą formularzy i przesyłane na serwer. Również różne ankiety są przykładem formularza.

Składnia tagów

...

Etykietka

posiada bardzo ważny atrybut action , któremu przypisywany jest adres (URL) skryptu, do którego przekazywane są do przetworzenia otrzymane informacje z formularza. Nie będziemy zagłębiać się w szczegóły tego, co dzieje się po wysłaniu danych, ponieważ te problemy 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






Po naciśnięciu przycisku OK strona po prostu się odświeży, ponieważ. nie napisaliśmy parametru akcji

Przekształca się na stronie do następującego:

Będą to przyciski:
przycisk pierwszy
Przycisk drugi
Przycisk trzeci
A to będzie pole tekstowe. Na przykład tutaj możesz wpisać login

I będzie to duże pole tekstowe. Na przykład tutaj możesz wprowadzić informacje o sobie

Po wszystkim powyżej pojawi się przycisk OK.

Po naciśnięciu przycisku OK strona po prostu się odświeży, ponieważ. nie napisaliśmy parametru akcji

Wyjaśnienia na przykład

  • action="" - wskazuje, że przetwarzanie danych będzie odbywać się na tej samej stronie.
  • - atrybut type="radio" mówi, aby wyświetlić tekst po tym kodzie jako przycisk wyboru. Nazwa i wartość atrybutu 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. Są 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 nagrać dużą ilość tekstu.
  • - atrybut type="submit" wskazuje, że jest to przycisk. Atrybut value zawiera to, co zostanie napisane na przycisku.

Możesz przeczytać więcej o wszystkich tych elementach w lekcji 15: tagowanie elementów

, gdzie brane są pod uwagę przyciski radiowe, listy, pola wyboru, pola tekstowe, przyciski.

Przyjrzyjmy się teraz szczegółowo wszystkim atrybutom tagów. .

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

1. Atrybut accept-charset="Zestaw znaków"- 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" - adres skryptu przetwarzającego dane przesłane z formularza. Jeśli 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:

  • włączony - 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- zamiast spacji wstawiamy +, kodowane są przez nie znaki, takie jak rosyjskie litery wartości szesnastkowe
  • multipart/form-data - dane nie są kodowane
  • text/plain - spacje są zastępowane znakiem +, litery i inne znaki nie są kodowane.

5. Atrybut method="POST/GET" - ustawia metodę wysyłania. Może przyjmować dwie wartości:

  • GET - prześlij dane do pasek adresu(istnieje limit ilości przesyłanych danych)
  • POST - wysyła dane na serwer w żądaniu przeglądarki (może wysłać dużą ilość danych, ponieważ nie ma limitu ilościowego)

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

7. Novalidate atrybutu - anuluje wbudowaną walidację danych formularza pod kątem prawidłowego wprowadzenia.

8. Atrybut target="parametr" - nazwa okna lub ramki, do której handler 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 wczytuje stronę w pełnym oknie przeglądarki

Drogi Czytelniku, teraz dowiedziałeś się o wiele więcej tag html Formularz. Teraz radzę przejść do następnej lekcji.

Dzień dobry miłośnikom tworzenia stron internetowych i tym, którzy chcą stworzyć własną stronę internetową. Wcześniej wszystkie moje publikacje były poświęcone głównym elementom języka, tworzeniu różnych obiektów treści, ich formatowaniu, strukturyzacji itp. Po opanowaniu poprzednich tematów możesz już stworzyć całkiem dobrą witrynę. Byłoby jednak niepełne bez dzisiejszego tematu: „Tworzenie formularzy w html”.

Ta sekcja języka jest bardzo ważna. Dlatego zwróć szczególną uwagę na jego przestudiowanie, w przeciwnym razie utworzony zasób sieciowy nie zostanie wprowadzony do produkcji. Dzięki temu po przeczytaniu artykułu dowiesz się, dlaczego musisz korzystać z formularzy, jakimi tagami są one tworzone, a także będziesz mógł wypróbować konkretne przykłady w praktyce. Zacznijmy!

Czym jest forma i jak działa

Forma- to jeden z ważniejszych obiektów, który służy do wymiany danych informacyjnych między serwerem a użytkownikiem.

Mówiąc najprościej, jeśli chcesz stworzyć sklep internetowy z możliwością zamawiania produktów na stronie, poproś o rejestrację w zasobie sieciowym i pracę z kontami lub udostępnij klientom informacja zwrotna z menedżerami firmy nie można obejść się bez formularzy.

Formularz jest ustawiany za pomocą specjalnego elementu języka html .

Zauważ, że dokument z kodem może zawierać kilka deklaracji znaczników , jednak do serwera w celu przetworzenia danych można wysłać tylko jedno żądanie. Dlatego informacje, które użytkownik wprowadza w pola do tego zarezerwowane i odnoszą się do różnych formularzy, nie powinny być zależne. Niedozwolone jest również zagnieżdżanie formularzy w sobie.

Dla niecierpliwych i chętnych do szybkiego spojrzenia na widok kodu załączam prosty przykład wykorzystania panelu z polem tekstowym na hasło z przyciskiem:

1 2 3 4 5 6 7 8 9 10 11 12 Przykład

Przykład

Może nie jest teraz bardzo jasne, co i jak współdziała w tym małym programie, ale gwarantuję, że po przeczytaniu całego artykułu będziesz w stanie tworzyć aplikacje wielokrotnie trudniejsze.

Wysyłanie danych po stronie serwera

W celu wysłania wpisanej (lub wybranej) informacji w oknie dialogowym należy skorzystać ze standardowego mechanizmu - Przycisk Prześlij.

Kod tej metody wygląda tak:

Po uruchomieniu prezentowanej linii zostanie wyświetlony przycisk z napisem: „Prześlij”.

Innym sposobem wysyłania danych po stronie serwera jest naciśnięcie klawisza Enter w oknie dialogowym.

Po potwierdzeniu wysłania określonej informacji nie jest ona od razu wysyłana na serwer. Najpierw jest przetwarzany przez przeglądarkę, co prowadzi do postaci „nazwa = wartość”.

Za nazwę odpowiada parametr atrybutu rodzaj etykietka , a dla wartości - dane wprowadzone przez użytkownika. Następnie przekonwertowany ciąg jest przekazywany do modułu obsługi, który najczęściej jest ustawiany w atrybucie akcja element

.

Sam parametr akcji nie jest wymagany, aw niektórych przypadkach w ogóle nie jest potrzebny. Na przykład, jeśli strona witryny jest napisana przy użyciu php lub js, przetwarzanie odbywa się na bieżącej stronie i linki nie są potrzebne.

Dla lepszego zrozumienia całego obrazu funkcjonowania serwisu dodam, że na serwerze praca z danymi odbywa się już w innych językach. Tak więc języki serwera to: Python, php, języki podobne do C (C#, C itp.), Java i inne.

Teraz chciałbym się zatrzymać i porozmawiać o żywiole . Jeśli wyjaśnisz zwykły język, następnie potrzebne do tworzenia pól tekstowych, przycisków radiowych, różnych przycisków, ukrytych pól, pól wyboru i innych obiektów.

Tag nie musi być sparowany z Jeśli jednak musisz przetworzyć rekordy użytkowników lub wprowadzić je na przykład do bazy danych, nie możesz obejść się bez kontenera.

Główne atrybuty tego hipertekstowego elementu języka znaczników to:

  • Tekst- tworzy pole tekstowe;
  • Składać– tworzy przycisk do przesyłania danych na serwer;
  • Obraz- odpowiedzialny za przycisk ze zdjęciem;
  • Resetowanie– ustawia przycisk do wyczyszczenia formularza;
  • Hasło– ustawia pole tekstowe przeznaczone specjalnie na hasła;
  • pole wyboru– odpowiedzialny za pola z flagami;
  • Radio– odpowiada za pola z wyborem jednego elementu;
  • przycisk- tworzy przycisk;
  • Ukryty– używane do ukrytych pól;
  • plik– ustawia pole odpowiedzialne za wysyłanie plików.

Metody przekazywania informacji

Istnieją 2 sposoby przekazania danych użytkownika po stronie serwera: Otrzymać oraz Poczta. Metody te wykonują to samo działanie, ale znacznie się od siebie różnią. Dlatego przed wskazaniem któregokolwiek z nich zapoznajmy się z ich cechami.

Poczta Otrzymać
Rozmiar przesyłanych dokumentów Ograniczone do strony serwera. Maksymalnie - 4 KB.
Jak wyświetlić wysłane informacje? Dostępne tylko podczas przeglądania za pośrednictwem rozszerzeń przeglądarki lub innego specjalnego oprogramowania. Natychmiast dostępne dla każdego.
Korzystanie z zakładek Brak opcji dodawania zakładek, ponieważ żądania nie są powtarzane (wszystkie strony prowadzą do tego samego adresu). Każdą stronę z żądaniem można dodać do zakładek i przejść do niej po chwili.
buforowanie Na podstawie poprzedniego akapitu wszystkie wnioski znajdują się na jednej stronie. Każdą stronę można buforować osobno.
zamiar Używane do spedycji duże pliki(książki, obrazy, filmy itp.), wiadomości, komentarze. Świetne do wyszukiwania żądanych wartości w zasobie sieciowym lub do wysyłania krótkich wiadomości tekstowych.

Aby określić, która z dwóch metod przesyłania danych ma współpracować z przeglądarką, w elemencie użyj podanego parametru metoda(Na przykład, metoda="post").

Rozważmy drugi przykład. Stwórzmy formularz, w którym musisz podać swoje dane osobowe (imię i nazwisko, datę urodzenia) oraz wymyślić hasło. Po tym wszystkim jest to wysyłane na serwer za pomocą metody Poczta.

Metoda POST

Podaj swoje dane osobowe!

Na przykład, aby wprowadzić datę, dostępne są przełączniki dla numeru każdego z parametrów (dzień, miesiąc i rok), a także rozwijany panel z samym kalendarzem dla wygody.

Tworzenie panelu rejestracyjnego

Omówiono główne tagi i atrybuty. Dlatego nadszedł czas na stworzenie pełnoprawnego formularza rejestracyjnego z wykorzystaniem znaczników w stylu css i walidacji danych wejściowych. Oczywiście nie będziemy mogli zobaczyć, jak serwer działa z nimi, ale zapewnimy projekt i ważne szczegóły.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Rejestracja
rejestracja na stronie

Nazwać:

Nazwisko:

E-mail:

Hasło:

Powtórz hasło:

Rejestracja

rejestracja na stronie

W celu późniejszej poprawnej pracy w naszym serwisie prosimy o podanie prawdziwych danych!

Nazwać:

Nazwisko:

E-mail:

Hasło:

Powtórz hasło:

Radzę zapisać ten kod programu w dokumencie z rozszerzeniem .html i kodowaniem utf-8 i otworzyć ten ostatni w oknie przeglądarki. Zanim pojawisz się w całej okazałości panel do rejestracji z polami do wpisania imienia, nazwiska, e-mail i hasła z powtórzeniem. Zwróć uwagę, że po uruchomieniu strony kursor jest natychmiast umieszczany w pierwszym polu tekstowym. Ta technika jest osiągana poprzez atrybut autofokus.

Zacznij wypełniać pola, pozostawiając jedno bez zmian i kliknij przycisk „Zarejestruj się”. Jak już zauważyłeś, formularz nie zostanie przesłany, ponieważ każdy element ma < wejście> określony atrybut wymagany. Ustawia zaznaczone pola jako pola wymagane.

Innym ciekawym punktem jest wskazanie typu type="e-mail", który ukazał się w . W przypadku korzystania z tego typu pola, wprowadzone informacje są automatycznie sprawdzane pod kątem poprawności. W przypadku błędów formularz nie jest wysyłany na serwer.

Na tym post się kończy. Starałem się w nim zebrać jak najwięcej ważnej i istotnej wiedzy na temat formularzy. Mam nadzieję, że ci się przydało! Byłbym bardzo wdzięczny za dołączenie do grona moich subskrybentów i opowiedzenie o blogu znajomym.

PA pa!

Z poważaniem, Roman Chueshov

Czytać: 333 razy

Często w witrynach sieci Web można znaleźć strony z umieszczonymi na nich formularzami HTML. Formularze internetowe to wygodny sposób na uzyskanie informacji od odwiedzających witrynę. Przykładem tego jest -, -, który zapewnia informacje zwrotne odwiedzającym i twórcom witryn. Formularze są również wygodne dla programistów witryn podczas opracowywania CMS, co pozwala zachować główną właściwość witryny - trafność. W tym artykule omówiono podstawy tworzenia formularzy HTML, ich przetwarzania oraz przekazywania danych z formularzy ekranowych do skryptów PHP.

1) Tworzenie prostego formularza

tagi

oraz
ustaw początek i koniec formularza. Tag początkowy formularza
zawiera dwa atrybuty: akcja oraz metoda. Atrybut action zawiera adres URL skryptu, który powinien zostać wywołany w celu przetworzenia skryptu. Atrybut metoda informuje przeglądarkę, jakiego rodzaju żądanie HTTP ma zostać użyte do przesłania formularza; możliwa wartość POCZTA oraz DOSTAWAĆ.

Komentarz

Główną różnicą między metodami POST i GET jest sposób przesyłania informacji. W metodzie GET parametry są przekazywane przez pasek adresu, tj. w rzeczywistości w nagłówku HTTP żądania, natomiast w metodzie POST parametry są przekazywane przez treść żądania HTTP i nie są w żaden sposób odzwierciedlone w postaci paska adresu.

$tekst = nl2br($_POST["mój tekst"]);
?>

Zadanie: Załóżmy, że chcemy utworzyć listę rozwijaną z latami od 2000 do 2050.
Decyzja: Trzeba stworzyć Formularze HTML z elementem SELECT i PHP - skryptem do przetwarzania formularza.

Dyskusja:

Zacznijmy od stworzenia dwóch plików: formularz.html oraz akcja.php. W pliku formularz.html będzie zawierać formularz html z rozwijaną listą. Ponadto wartości na liście można określić na dwa sposoby:

I. Ręczne wprowadzanie danych:

II. Wprowadzanie danych przez pętlę:

Jak widać, drugi przykład z pętlą jest bardziej zwarty. Myślę, że nie warto dawać skryptu obsługi formularzy, ponieważ jest on przetwarzany tak jak pole tekstowe, tj. wartości listy można pobrać z tablicy superglobalnej $_POST.

Opis:

Stwórzmy formularz HTML, aby wysłać plik na serwer.




Ten formularz html ma element Przeglądaj, który otwiera okno dialogowe wyboru pliku do przesłania na serwer. Naciskając przycisk "Prześlij plik", plik jest przekazywany do skryptu obsługi.

Następnie musisz napisać obsługę skryptów akcja.php. Przed napisaniem handlera musisz zdecydować, do którego katalogu skopiujemy plik:

if(isset($_FILES [ "mojplik" ])) // Jeśli plik istnieje
{
$katalog = "../obraz/" ; // Nasz katalog
if (is_dir ($katalog )) // Jeśli istnieje taki katalog
{
$myfile = $_FILES [ "mój plik" ][ "nazwa_tmp" ]; // plik tymczasowy
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Nazwa pliku
if(! copy ($myfile , $catalog )) echo "Błąd kopiowania pliku". $myfile_name // Jeśli kopiowanie pliku nie powiodło się
}
w przeciwnym razie mkdir("../obraz/"); // Jeśli nie ma takiego katalogu, utworzymy go
}
?>

Komentarz

Jeśli ufasz użytkownikom, że będą przesyłać dowolne pliki na Twój serwer, musisz być bardzo ostrożny. Atakujący mogą wstrzyknąć „zły” kod do obrazu lub pliku i wysłać go na serwer. W takich przypadkach musisz ściśle kontrolować pobieranie plików.

Ten przykład demonstruje tworzenie katalogu i kopiowanie pliku do tego katalogu na serwerze.

Chciałbym również zademonstrować przykład z elementem pole wyboru. Ten element różni się nieco od innych elementów tym, że jeśli nie jest jednym z elementów pole wyboru'a nie jest wybrane, to zmienna superglobalna' $_POST zwróci pustą wartość:


Niebieski
Czarny
Biały

if (!empty($_POST [ "mójkolor" ])) echo $_POST [ "mójkolor" ]; // Jeśli wybrano co najmniej 1 przedmiot
Echo "Wybierz wartość";
?>

Etykietka FORMULARZ konfiguruje formularz na stronie internetowej. Formularz przeznaczony jest do wymiany danych pomiędzy użytkownikiem a serwerem. Zakres formularzy nie ogranicza się do przesyłania danych na serwer, za pomocą skryptów klienckich można uzyskać dostęp do dowolnego elementu formularza, zmodyfikować go i zastosować według własnego uznania.

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

Gdy formularz jest przesyłany na serwer, kontrola nad danymi jest przekazywana do programu CGI określonego przez parametr action znacznika FORM. Przeglądarka wcześniej przygotowuje informację w postaci pary „nazwa=wartość”, gdzie nazwę określa parametr name znacznika INPUT, a wartość wpisuje użytkownik lub ustawia w domyślnym polu formularza. Jeżeli do przesyłania danych wykorzystywana jest metoda GET, to pasek adresu może przybrać następującą postać.

http://www..cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametry są wymienione po znaku zapytania po adresie programu CGI i są oddzielone znakiem ampersand (&). Znaki inne niż łacińskie są konwertowane na ich reprezentację szesnastkową (w postaci %HH, gdzie HH jest kodem szesnastkowym dla wartości znaku ASCII), a spacja jest zastępowana plusem (+).

Składnia


...

Zamykający tag
Wymagany.

Opcje
akcja to adres programu lub dokumentu CGI, który przetwarza dane formularza.
enctype - typ MIME informacji formularza.
metoda - metoda protokołu HTTP.
nazwa - nazwa formularza.
target - nazwa okna lub ramki, do której handler załaduje zwrócony wynik.

Przykład 1: Korzystanie ze znacznika FORM



Jak myślisz, co oznacza skrót „OS”?

Oficerowie

System operacyjny

Duże muchy w paski


Opis parametrów tagu FORM

parametr DZIAŁANIA

Opis
Określa procedurę obsługi, która umożliwia dostęp do danych formularza po przesłaniu ich na serwer. Programem obsługi może być program CGI lub dokument HTML, który zawiera skrypty po stronie serwera (na przykład Parser). Po wykonaniu akcji przez program obsługi na danych formularza, zwraca nowy dokument HTML.

Jeśli nie ma parametru akcji, bieżąca strona jest ponownie ładowana, przywracając wszystkie elementy formularza do ich wartości domyślnych.

Składnia

...

Argumenty
Wartość akceptuje pełną lub względną ścieżkę do pliku serwera (URL).

Domyślna wartość
Nie.

Przykład 2: Dodawanie obsługi formularza




...


Możesz określić adres e-mail jako moduł obsługi, zaczynając od słowa kluczowego mailto. Po przesłaniu formularza zostanie on uruchomiony program pocztowy ustawione domyślnie. Ze względów bezpieczeństwa przeglądarka jest ustawiona tak, aby nie przesyłać dyskretnie informacji wprowadzonych w formularzu pocztą. W celu poprawnej interpretacji danych użyj parametru enctype="text/plain" w znaczniku FORM.

Przykład 3: Korzystanie z adresu e-mail




...


parametr ENCTYPE

Opis
Ustawia typ MIME dla danych wysyłanych z formularzem. Zazwyczaj ustawienie wartości parametru enctype nie jest wymagane, dane są dość poprawnie rozumiane po stronie serwera. Jeśli jednak używasz pola do wysłania pliku (INPUT type=file), musisz określić parametr enctype jako multipart/form-data.

Składnia

...

Argumenty
W każdym razie nazwa typu MIME. Dozwolone jest ustawienie kilku wartości naraz, oddzielając je przecinkami.

Domyślna wartość
application/x-www-form-urlencoded

Przykład 4: Zmiana typu danych



...


METODA parametr

Opis
Metoda informuje serwer o celu żądania. Istnieją dwie główne metody: GET i POST. Istnieją inne metody, ale nadal są one rzadko używane.

Składnia

...

Argumenty
Wartość parametru metody nie uwzględnia wielkości liter i należy ją określić bez cudzysłowów. Istnieją dwie metody - GET i POST.

DOSTAWAĆ
Ta metoda jest jedną z najczęstszych i ma na celu uzyskanie wymaganych informacji i przesłanie danych w pasku adresu. W tym przypadku pary nazwa=wartość są dołączane do adresu po znaku zapytania i oddzielane znakiem & (symbol &). Wygoda korzystania z metody GET polega na tym, że adres ze wszystkimi parametrami można wykorzystywać wielokrotnie, zapisując go np. w „Ulubionych” przeglądarki, a także zmieniając wartości parametrów bezpośrednio w pasek adresu.

POCZTA
Metoda POST wysyła dane do serwera w żądaniu przeglądarki. Pozwala to na przesłanie większej ilości danych niż jest dostępne dla metody GET, ponieważ ma ona limit 4 KB. Na forach wykorzystywane są duże ilości danych, usługi pocztowe, wypełnianie bazy danych itp.

Domyślna wartość
DOSTAWAĆ

Przykład 5: Metoda składania formularza




...


NAZWA parametr

Opis
Określa unikalną nazwę formularza. Zazwyczaj nazwa formularza służy do uzyskiwania dostępu do jego elementów za pomocą skryptów.

Składnia

...

Argumenty
Nazwa to zestaw znaków, w tym cyfry i litery. W JavaScript rozróżniana jest wielkość liter, więc używaj tej samej pisowni, co parametr name, gdy odwołujesz się do formularza po nazwie za pomocą skryptów.

Domyślna wartość
Nie.

Przykład 6: Używanie nazwy formularza







Имя:



Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

...

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

Blank - загружает страницу в новое окно браузера.
_self - загружает страницу в текущее окно.
_parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы




...


Powiązana zawartość:

  1. Kreator kolaży
  2. Najlepsze programy do tworzenia i nagrywania muzyki
  3. Trzy narzędzia do dodawania kart do Eksploratora Dodawanie paska narzędzi do Eksploratora
  4. Adblock Plus - jak usunąć reklamy z przeglądarki