• dom
  •  > 
  • Narzędzia
  •  > 
  • Co to jest formularz w HTML. Grupowanie elementów formularza

Co to jest formularz w HTML. Grupowanie elementów formularza

Często na stronach internetowych można znaleźć strony z umieszczonymi na nich formularzami HTML. Formularze internetowe – wygodnym sposobem pozyskiwanie informacji od osób odwiedzających Twoją witrynę. Przykładem tego jest -, - który zapewnia informację zwrotną odwiedzającym witrynę i programistom. Formularze są również wygodne dla twórców witryn podczas tworzenia systemu CMS, co pozwala im zachować główną właściwość witryny - trafność. Ten artykuł poświęcony jest podstawom tworzenia formularzy HTML, ich przetwarzaniu i sposobom przesyłania danych formularze ekranowe w skrypcie PHP.

1) Utwórz prosty formularz

Tagi

I
zdefiniuj początek i koniec formularza. Początkowy znacznik formularza
zawiera dwa atrybuty: działanie I metoda. Atrybut akcji zawiera Adres URL skrypt, który należy wywołać w celu przetworzenia skryptu. Atrybut metoda informuje przeglądarkę, jakiego rodzaju Żądanie HTTP należy użyć do przesłania formularza; możliwa wartość POST I DOSTAWAĆ.

Komentarz

Główną różnicą pomiędzy metodami POST i GET jest sposób przesyłania informacji. W metodzie POBIERZ parametry przesyłane poprzez pasek adresu, tj. zasadniczo w nagłówku żądania HTTP, podczas gdy w metodzie Parametry POSTu są przesyłane poprzez treść żądania HTTP i nie są w żaden sposób odzwierciedlane w pasku adresu.

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

Zadanie: Załóżmy, że musisz utworzyć listę rozwijaną zawierającą lata od 2000 do 2050.
Rozwiązanie: Musisz utworzyć formularz HTML z elementem SELECT i skryptem PHP do przetwarzania formularza.

Dyskusja:

Najpierw utwórzmy dwa pliki: formularz.html I 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 poprzez pętlę:

Jak widać, drugi przykład z pętlą jest bardziej zwarty. Myślę, że nie ma potrzeby podawania skryptu obsługi tego formularza, ponieważ jest on przetwarzany dokładnie tak samo jak pole tekstowe, tj. wartości list można pobrać z tablicy superglobalnej $_POST.

Opis:

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




Ten formularz HTML zawiera element przeglądać, które otwiera okno dialogowe umożliwiające wybranie pliku do przesłania na serwer. Po naciśnięciu przycisku „Prześlij plik”, plik jest przekazywany do skryptu obsługi.

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

if(isset($_FILES ["mójplik"])) // Jeśli plik istnieje
{
$katalog = "../obraz/" ; // Nasz katalog
if (is_dir($katalog)) // Jeśli taki katalog istnieje
{
$mójplik = $_FILES [ „mójplik” ][ „nazwa_tmp” ]; // Plik tymczasowy
$nazwa_mojego_pliku = $_FILES [ „mójplik” ][ „nazwa” ]; // Nazwa pliku
if(! copy ($mójplik, $katalog)) echo „Błąd kopiowania pliku”. $nazwa_mojego_pliku // Jeśli kopiowanie pliku nie powiodło się
}
else mkdir („./image/” ); // Jeżeli nie ma takiego katalogu, utworzymy go
}
?>

Komentarz

Jeśli ufasz użytkownikom, że przesyłają jakiekolwiek pliki na Twój serwer, musisz zachować szczególną ostrożność. Atakujący mogą osadzić „zły” kod w obrazie lub pliku i wysłać go na serwer. W takich przypadkach należy ściśle kontrolować pobieranie plików.

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

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


Niebieski
Czarny
Biały

if (!empty($_POST [ "mójkolor" ])) echo $_POST [ "mójkolor" ]; // Jeśli zaznaczony jest co najmniej 1 element
jeszcze echo "Wybierz wartość";
?>

Witam, drodzy czytelnicy bloga. Kontynuując nasze badanie, przechodzimy do rozważenia formularzy i tagów wejściowych wraz z ich atrybutami (), za pomocą których można tworzyć różnorodne formularze dla witryny.

Niezależnie od tematu i zawartości tego lub innego zasobu internetowego, najprawdopodobniej będzie on zawierał formularze w tej czy innej formie: pola tekstowe, menu rozwijane, różne przyciski lub przełączniki. Swoją drogą w jednej z publikacji wspominałam już o elementach pomagających urozmaicić formy.

Jaki jest praktyczny cel całej różnorodności możliwych form? Przede wszystkim potrzebne są do przesłania wprowadzonych przez użytkownika danych na serwer w celu dalszego przetwarzania za pomocą specjalnie stworzonego skryptu (handlera).

Formularze HTML - jak są tworzone za pomocą formularza i danych wejściowych

Jak mówiłem na początku, na każdej mniej lub bardziej rozwiniętej stronie internetowej musi znajdować się jakiś formularz internetowy, a nawet kilka naraz. Aby zrozumieć, jak ważne są one w świetle zgodności zasobu sieciowego ze współczesnymi wymaganiami, wystarczy od ręki podać trzy obiekty korzystające z formularzy opartych na tagach formularza i input, które już sama nazwa nie pozostawiają wątpliwości co do ich konieczność projektu w tym czy innym kierunku:

Jeśli podążysz np. linkiem do artykułu o stworzeniu informacja zwrotna(pozwalający wszystkim użytkownikom na wysyłanie wiadomości do administracji serwisu), wówczas prezentowany jest tam kod HTML z formularzem, który posiada otwarcie (

) i zamknięcie (
) Część:


Tutaj gra forma Istotną rolę, ponieważ inicjuje instalację formularza internetowego. Sam nie wyświetla obszaru na stronie internetowej, ale służy jako pojemnik zawierający inne znaczniki.

W naszym przypadku (patrz zrzut ekranu powyżej) jest ich kilka wejście(ten znacznik HTML jest pojedynczy, to znaczy nie ma komponentu zamykającego), a także obszar tekstowy, z różnymi zestawami atrybutów. Każdy z nich definiuje swój własny element zawarty w formularzu.

16. Autofokus(brak parametrów) to atrybut logiczny, który ustawia fokus na polu natychmiast po załadowaniu strony internetowej, dzięki czemu można wprowadzać dane bez klikania na nie. Nie można zastosować tylko do typ wejścia= „ukryty”.

17. Wyłączony(bez wartości) - wyłącza dla użytkownika element formularza, do którego został dodany. Najczęściej używany jest w połączeniu ze skryptami, gdzie określane są warunki, po spełnieniu których niedostępny element zostanie aktywowany.

18. Formularz— kojarzy element z formularzem, gdy znajduje się on poza kontenerem

. Aby połączyć, do znacznika formularza dodawany jest globalny atrybut id, a do znacznika wejściowego dodawany jest atrybut formularza, którego wartości są takie same (na przykład id="data" i form="data") .

19. Wiele(brak parametrów) - zestawy możliwość wielokrotny wybór dla użytkownika i jest używane tylko w połączeniu z type="file" i type="email".

Jeśli korzystasz z pola przesyłania plików, możesz wybrać kilka plików na raz ze swojego komputera za pomocą Klawisze Ctrl lub Shift. Jeśli wyświetli się pole do wpisania adresu E-mail(type="email"), wówczas adresy e-mail należy wpisać oddzielone przecinkami.

20. Wymagany(brak wartości) – aktywuje wymóg wprowadzenia przez użytkownika danych. W związku z tym przeglądarka blokuje przesłanie formularza internetowego w przypadku pozostawienia wymaganego pola pustego i wyświetla stosowny komunikat o konieczności jego wypełnienia.

Atrybut ten nie jest używany w przypadku przycisków graficznych i standardowych (type="button | image"), a także ukrytych pól wejściowych (type="hidden").

21. Rozmiar— określa szerokość pola tekstowego w znakach (odpowiednie tylko dla elementów typu z parametrami „email | hasło | szukaj | tel | tekst | url”). Wartość domyślna to 20 znaków.

Kolejne cztery atrybuty (22-25) dla tagu wejściowego mają prawie taką samą funkcjonalność jak dla , ale dla kompletności też je krótko wspomnę.

22. Maksymalna długość– nakłada ograniczenie maksymalna ilość znaków, które możesz wprowadzić podczas wypełniania pola tekstowego. Jeśli spróbujesz przekroczyć ten limit, dalsze wprowadzanie danych zostanie zablokowane. Ten atrybut ma zastosowanie tylko do elementów tekstowych z type="email | hasło | search | tel | tekst | url".

23. Minimalna długość— nakłada ograniczenie minimalnej liczby znaków, jakie należy wpisać w polu tekstowym. W przypadku próby przesłania danych zawierających mniejszą liczbę znaków pojawi się krótki komunikat informujący o konieczności uzupełnienia treści formularza oraz informacja o liczbie już wprowadzonych znaków. Zasady korzystania są dokładnie takie same jak w przypadku maxlength.

24. Symbol zastępczy— możesz umieścić podpowiedź (będzie ona parametrem) bezpośrednio w polu tekstowym, która zniknie w momencie, gdy użytkownik zacznie wpisywać znaki. Tylko dla pól utworzonych przy użyciu parametrów e-mail, hasło, wyszukiwanie, tekst, tel, adres URL atrybut type znacznika wejściowego.

25. Tylko czytać(brak parametrów) - oznacza, że ​​wprowadzony wcześniej w polu tekst jest dostępny jedynie do odczytu i kopiowania. Zwykle jest używany w połączeniu ze skryptami, w których określone są warunki, które po spełnieniu mogą aktywować ten element formularza.

I na koniec jeszcze kilka atrybutów uzupełniających funkcjonalność różne elementy formularze:

26. Wzór- w roli jego znaczenia odzwierciedla Wyrażenie regularne, na podstawie którego ustalane są zasady wprowadzania informacji. Zaleca się dodatkowo dodanie pliku global atrybut tytułu, którego parametrem jest dodanie tekstu objaśniającego, ułatwiającego użytkownikom wypełnienie pól. Wzorzec jest stosowany tylko do elementów e-mail, hasła, wyszukiwania, tekstu, telefonu i adresu URL. Rozumiemy to na przykładzie. Oto kod uproszczonego formularza rejestracyjnego (z ):

Zaloguj sie

Hasło

Zaloguj sie

Hasło

Dla pola logowania (type="text") jako wartość wzorca podaje się wyrażenie regularne (5,), co oznacza użycie znaków łacińskich i należy wpisać co najmniej pięć znaków.

W odniesieniu do obszaru tekstowego hasła (type="password") ustawiana jest wartość (8,), która określa w każdym przypadku wprowadzanie wyłącznie znaków łacińskich (duże i małe litery) oraz cyfr, przy czym łączna liczba wszystkich znaków nie powinna być mniejsza niż osiem.

W przypadku naruszenia dane warunki danych, przeglądarka nie pozwoli na przesyłanie danych i wyświetli odpowiednie ostrzeżenie:


27. Src— określa ścieżkę do obrazu (URL, czyli jego wartość) w celu wyświetlenia przycisku graficznego „obraz” (patrz tabela parametrów typu wejścia powyżej).

28. Krok— ustawia krok dla elementów wymagających selekcji wartości liczbowe(input type="data | datetime-local | miesiąc | numer | zakres | tel | godzina | tydzień..").

Może przyjąć dowolną liczbę całkowitą lub liczba ułamkowa. Domyślny krok="1". Aby ustawić ostateczny zakres wejściowy, możesz ponownie użyć atrybutów min i max wspomnianych powyżej. Dla przejrzystości w formularzu testowym umieścimy 2 elementy type="number". Dla pierwszego ustaw step="2", a dla drugiego step="0,1":

Wprowadź wartość od 0 do 1:

Wprowadź wartość od -10 do 10:

Wprowadź wartość od 0 do 1:

29. Wartość— ustawia wartość elementu formularza, który zostanie przekazany do procedury obsługi. Na serwer wysyłana jest para nazwa-parametr, gdzie nazwa jest określana na podstawie atrybutu name znacznika wejściowego, a parametr jest określany na podstawie atrybutu wartości. Ponadto dla różnych elementów formy wartość będzie odgrywać różne role:

  • for type="button | reset | Submit" - ustawia etykietę tekstową na przyciskach;
  • for type="checkbox | radio | image" - identyfikuje każde pole wyboru, przełącznik lub przycisk graficzny podczas wysyłania i przetwarzania danych na serwerze;
  • for type="hasło | tekst" - od razu po załadowaniu formularza wyświetla w polu wstępny tekst, który użytkownik może zmienić lub całkowicie usunąć;
  • for type="file" (przesyłanie pliku) nie ma zastosowania, ponieważ nie wpływa na ten element.

Przykładowe zastosowanie każdej z powyższych opcji:

Wybierz CMS-a: W.P. Joomla

Wybierz CMS-a: W.P. Joomla

Tutaj wartość wartość atrybutu definiuje następujące elementy każdego elementu: wyświetla fragment tekstu dla pola type="text" („Twoje imię”), identyfikuje każdy z przycisków opcji („1” i „2”) ustawionych za pomocą type="radio", a także aktywuje napis na przycisku („Wyślij”).

Przykład stworzenia pięknego formularza HTML

Następnie postaram się przedstawić Państwu przykładowy formularz internetowy, którego kod zawiera nie tylko kombinacje typu wejściowego z różne znaczenia, tworzące standardowe pola tekstowe i przyciski, ale także, które pozwalają na przykład zainicjować skupienie się na elemencie nie tylko poprzez bezpośrednie kliknięcie myszką, ale także poprzez kliknięcie w tekst.

Należy pamiętać, aby uzyskać niepowtarzalny projekt Poszczególne komponenty w których umieszczone są formularze, każdy z zestawami:

Tył (maksymalna szerokość: 350 pikseli; margines: 50 pikseli auto 0; dopełnienie: 20 pikseli; tło: #f3ebe1; rodzina czcionek: „Oswald”, bezszeryfowa;) .form-1, .form-2, .form-3 , .form-4 (dopełnienie: 15px; obramowanie: 4px double #909090) .form-1, .form-2, .form-3 (border-bottom:brak) .form-1 wejście (wyświetlanie:blok; margines- dół: 10 pikseli; szerokość: 100%).in (dopełnienie po lewej stronie: 40 pikseli) .in wejście (szerokość: 100%) ..png) brak powtórzeń; pozycja tła: 10 pikseli 10 pikseli) ..png) brak powtórzeń; położenie tła: 10px 10px) wejście .form-4 (wyświetlacz: blok; wysokość: 50 pikseli; rozmiar czcionki: 24 piksele; szerokość: 100%; kursor: wskaźnik)

W rezultacie taki formularz internetowy przyjmuje następujący zarys:

Więcej pełna informacja na którym chcesz utworzyć ten konkretny formularz ta strona(przy okazji, można tam nie tylko sprawdzić funkcjonalność poszczególnych pól tekstowych wpisując do nich dane, ale także poeksperymentować z formularzem internetowym edytując kod HTML i/lub Właściwości CSS, całkowicie lub częściowo zmieniając jego wygląd).

Moim celem było zapoznanie Cię z algorytmem użycia różne znaczenia typ atrybutu i znacznik formularza do tworzenia różnych formularzy HTML na stronie. Mam nadzieję, że zadanie zostało wykonane. W każdym razie podziel się swoimi przemyśleniami na ten różnorodny temat w komentarzach.

Naturalnie w kolejnych publikacjach będę kontynuował opisywanie głównych tagów znaczniki hipertekstowe, więc nie zapomnij subskrybować aktualizacji bloga za pośrednictwem poczty e-mail. Aby to wzmocnić, spójrz na inną lekcję Jewgienija Popowa na temat tworzenia formularza kontaktowego.

Przeglądając strony internetowe, użytkownik przeważnie po prostu klika spinki do mankietów do poruszania się po stronach internetowych.

Ale jasne jest, że użytkownik czasami musi zapewnić własne pola wejściowe. Do tego typu interakcji zaliczają się:

  • rejestracja i logowanie na stronach internetowych;
  • wprowadzenie danych osobowych (imię i nazwisko, adres, dane karta kredytowa itd.);
  • filtrowanie treści (za pomocą list rozwijanych, checkboxów itp.);
  • przeprowadzanie wyszukiwania;
  • pobieranie plików.

Aby sprostać tym potrzebom, HTML oferuje rozwiązania interaktywne sterownica formularze:

  • pola tekstowe (dla jednej lub większej liczby linii);
  • przełączniki;
  • pola wyboru;
  • listy rozwijane;
  • widżety do pobrania;
  • przesłać przyciski.

Kontrole te obejmują różne tagi HTML, ale większość z nich używa tagu . Ponieważ jest to element samozamykający się, o typie pola decyduje jego atrybut type:

Element

Jest element blokowy, co definiuje interaktywny część strony internetowej. W rezultacie wszystkie elementy sterujące (takie jak ,