Jak utworzyć formularz HTML (objaśnienie przykładów)

Formularze służą do zbierania danych od użytkowników, takich jak dane kontaktowe, lub w celu umożliwienia użytkownikom interakcji ze stroną internetową, takich jak publikowanie komentarzy lub przeprowadzanie wyszukiwania. W tym artykule dowiemy się, jak utworzyć podstawowy formularz za pomocą HTML.

Struktura formularza HTML

Formularz HTML jest tworzony za pomocą znacznika. W obrębie tego znacznika możesz umieścić wiele różnych elementów wejściowych, takich jak pola tekstowe, przyciski, pola wyboru, przyciski radiowe i inne.

elementy wejściowe idą tutaj

Elementy wejściowe

Pola tekstowe

Pola tekstowe są tworzone przy użyciu znacznika z atrybutem typ położony na tekst. Na przykład:

Nazwa:




Telefon

Element używany do pól wprowadzania numeru telefonu.

Telefon:


Data

Element służy do wybierania daty.

Data urodzenia:


Hasło

Element używany do pól wprowadzania hasła. Tekst wprowadzony w tym polu jest wyświetlany jako kropki, aby ukryć hasło.

Hasło:


Archiwum

Element służy do umożliwienia użytkownikowi wybrania pliku z lokalnego systemu plików.

Przesyłanie pliku:


Pole wyboru

Element używany do pól wejściowych, które umożliwiają użytkownikowi wybranie żadnej, jednej lub wielu opcji.

Akceptuję zasady i warunki

Radio

Element używany do pól wejściowych, które pozwalają użytkownikowi wybrać jedną opcję z zestawu opcji.

Płeć:

Człowiek

Kobiety

Numer

Element używany do numerycznych pól wejściowych.

Kwota:


Zakres

Element używany do pól wejściowych, które muszą zawierać wartość z zakresu wartości.

Tom:




guziki

Przyciski są tworzone za pomocą znacznika z atrybutem typ położony na składać. Naciśnięcie tego przycisku spowoduje przesłanie danych formularza. Na przykład:

Nazwa:




Obsługa wprowadzania formularzy

Po naciśnięciu przycisku wyślij dane formularza są przesyłane do przetwarzania. Odbywa się to za pomocą jednej z dwóch metod: GET lub POST, które są określone za pomocą atrybutu metoda w etykiecie .

metoda GET

Metoda GET przesyła dane formularza jako część adresu URL. Jest to przydatne w przypadku wyszukiwania, w którym dane formularza nie są poufne. Ta metoda ma jednak ograniczenia pod względem długości danych, które można przesłać.

elementy wejściowe idą tutaj

Metoda POST

Metoda POST przesyła dane formularza niezależnie od adresu URL. Jest to bezpieczniejsze i może obsłużyć znacznie większą ilość danych, dlatego jest używane do przesyłania formularzy kontaktowych lub logowania.

elementy wejściowe idą tutaj

W obu przypadkach atrybut działanie służy do określenia adresu URL skryptu po stronie serwera, który będzie przetwarzał dane formularza.

Przykład formularza HTML ze wszystkimi elementami 

Oto formularz, który wykorzystuje wszystkie elementy, które omówiliśmy w tym artykule:

Formularz rejestracyjny

Nazwa:



Nazwisko:



E-mail:



Telefon:



Data urodzenia:



Hasło:



Przesyłanie pliku:



Akceptuję zasady i warunki


Płeć:

Człowiek

Kobiety

Kwota:



Tom:




Ten formularz ma pola na imię, nazwisko, adres e-mail, telefon, datę urodzenia, hasło, pole do przesłania plik, pole wyboru dla warunków, radia do wyboru płci oraz pola liczbowe i zakresowe dla ilości i głośności, odpowiednio.

Przycisk „Prześlij” na końcu odpowiada za przesłanie formularza na adres URL określony w atrybucie działanie Z etykiety kształt (w tym przypadku „/submit_form”). Aby ten formularz działał na prawdziwej stronie internetowej, musisz mieć serwer skonfigurowany do odbierania i przetwarzania informacji z tego formularza w ścieżce „/submit_form”.