HTML formularz

HTML formularz jest używany do zbierania różnych typów danych wejściowych użytkownika.

Element <form>

HTML formularz jest używany do zbierania danych wejściowych użytkownika.

Element <form> definiuje HTML formularz:

Przykład

<form>
 .
elementy formularza
 .
</form>

HTML formularz zawieraElementy formularza.

Elementy formularza to różne typy elementów <input>, pól wyboru, przycisków submit itp.

Elementy <input>

<input> Elementami najważniejszymiElementy formularza.

Element <input> ma wiele form, w zależności od różnych type Atrybuty.

To są typy używane w tym rozdziale:

Typ Opis
text Definiuje typowy wejściowy tekst.
radio Definiuje wejście przycisku radiowego (wybór jednej z wielu opcji)
submit Definiuje przycisk submit (wysyłanie formularza)

Uwaga:Dowiedz się więcej o typach wejścia, które nauczymy się w tym tutorialu.

Wejście tekstowe

<input type="text"> Definiuje używane doWejście tekstowePole wejścia wiersz pionowy:

Przykład

<form>
 Imię:<br>
<input type="text" name="firstname">
<br>
 Nazwisko:<br>
<input type="text" name="lastname">
</form>

Spróbuj sam

W przeglądarce wygląda to tak:

Imię:


Nazwisko:

Uwaga:Formularz sam w sobie jest niewidoczny. Należy również zauważyć, że domyślna szerokość pól tekstowych wynosi 20 znaków.

Przyciski radiowe wejścia

<input type="radio"> DefiniujePrzyciski radiowe.

Przyciski radiowe pozwalają użytkownikowi wybrać jedną z ograniczonej liczby opcji:

Przykład

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

Spróbuj sam

Przyciski radiowe w przeglądarce wyglądają tak:

Male

Female

Przycisk submit

<input type="submit"> Definiuje używane doProgram przetwarzający formularz（form-handler）SubmitPrzyciski formularza.

Program przetwarzający formularz to strona serwera zawierająca skrypty do przetwarzania danych wejściowych.

Program przetwarzający formularz znajduje się w action W atrybucie określono:

Przykład

<form action="action_page.php">
Imię:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nazwisko:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Spróbuj sam

W przeglądarce wygląda to tak:

Imię:


Nazwisko:


Atrybut Action

Atrybut actionDefiniuje działanie wykonywane przy wysyłaniu formularza.

Zwykłym sposobem wysyłania formularza do serwera jest użycie przycisku submit.

Zwykle formularze są wysyłane do strony internetowej na serwerze web.

W powyższym przykładzie określono skrypt serwera do przetwarzania przesyłanych formularzy:

<form action="action_page.php">

Jeśli pominie się atrybut action, wartość action zostanie ustawiona na bieżącą stronę.

Atrybut Method

Atrybut methodokreśla metodę HTTP używaną do wysyłania formularza.GET lub POST)

<form action="action_page.php" method="GET">

lub:

<form action="action_page.php" method="POST">

Kiedy używać GET?

Możesz użyć GET (domyślna metoda):

Jeśli formularz jest wysyłany w sposób pasywny (np. wyszukiwanie w wyszukiwarce) i nie zawiera danych wrażliwych.

Gdy używasz GET, dane formularza są widoczne w pasku adresu strony:

action_page.php?firstname=Mickey&lastname=Mouse

Uwaga:GET jest najbardziej odpowiedni do wysyłania małych ilości danych. Przeglądarka ustawia limit pojemności.

Kiedy używać POST?

Powinieneś użyć POST:

Jeśli formularz aktualizuje dane lub zawiera informacje wrażliwe (np. hasło).

POST jest bezpieczniejszy, ponieważ dane wysyłane w adresie URL strony są niewidoczne.

Atrybut Name

Aby poprawnie przesłać dane, każde pole wejściowe musi mieć ustawioną właściwość name.

W tym przykładzie zostanie przesłany tylko pole "Nazwisko":

Przykład

<form action="action_page.php">
Imię:<br>
<input type="text" value="Mickey">
<br>
Nazwisko:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Spróbuj sam

Użyj <fieldset> do łączenia danych formularza

<fieldset> Elementy łączą dane powiązane w formularzu

<legend> Element <fieldset> definiuje tytuł.

Przykład

<form action="action_page.php">
<fieldset>
<legend>Informacje osobiste:</legend>
Imię:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nazwisko:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Spróbuj sam

Powyższy kod HTML wygląda tak w przeglądarce:

Informacje osobiste:
Imię:


Nazwisko:


Atrybuty formularza HTML

Element <form> HTML, z ustawionymi wszystkimi możliwymi atrybutami, wygląda tak:

Przykład

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
elementy formularza
 .
</form>

Poniżej znajduje się lista atrybutów <form>:

Atrybuty Opis
accept-charset Określa zestaw znaków używany w wysyłanym formularzu (domyślnie: zestaw znaków strony).
action Określa adres URL, gdzie formularz zostanie wysłany (strona wysyłania).
autocomplete Określa, czy przeglądarka powinna automatycznie uzupełniać formularz (domyślnie: włączona).
enctype Określa kodowanie danych wysyłanych (domyślnie: url-encoded).
method Określa metodę HTTP używaną do wysyłania formularza (domyślnie: GET).
name Określa nazwę formularza, który jest rozpoznawany (dla DOM: document.forms.name).
novalidate Określa, że przeglądarka nie będzie weryfikować formularza.
target Określa adres docelowy atrybutu action (domyślnie: _self).

Uwaga:Dowiedzieć się więcej o atrybutach w poniższych rozdziałach.