Atrybuty formularzy HTML

Rozdział ten wprowadza HTML <form> Różne atrybuty elementu.

Atrybut Action

action Atrybut definiuje operację wykonywaną podczas wysyłania formularza.

Zwykle, gdy użytkownik kliknie przycisk "Wyślij", dane formularza zostaną wysłane do pliku na serwerze.

W poniższym przykładzie, dane formularza są wysyłane do pliku o nazwie "action_page.php". Plik ten zawiera skrypt serwerowy przetwarzający dane formularza:

Przykład

Po wysłaniu, dane formularza zostaną wysłane do pliku "action_page.php":

<form action="/action_page.php">
  <label for="fname">Imię:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Imię:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Spróbuj sam

Uwaga:Jeśli pominąć atrybut action, ustawienie action zostanie ustawione na bieżącą stronę.

Atrybut Target

target Atrybut określa, gdzie wyświetlić odpowiedź po wysłaniu formularza.

target Atrybut może przyjąć jedną z następujących wartości:

Wartość Opis
_blank Odpowiedź wyświetlona w nowym oknie lub karcie.
_self Odpowiedź wyświetlona w bieżącym oknie.
_parent Odpowiedź wyświetlona w macierzystym ramie.
_top Odpowiedź wyświetlona w całym ciele okna.
framename Odpowiedź wyświetlona w nazwanym iframe.

Domyślną wartością jest _self, co oznacza, że odpowiedź zostanie otwarta w bieżącym oknie.

Przykład

W tym przypadku wynik zostanie otwarty w nowej karcie przeglądarki:

<form action="/action_page.php" target="_blank">

Spróbuj sam

Atrybut Method

Atrybut method określa metodę HTTP używaną do wysyłania danych formularza.

Dane formularza mogą być jako zmienne URL (używając method="get") lub jako transakcja HTTP POST (używając method="post") wysyłane.

Domyślną metodą HTTP używaną do wysyłania danych formularza jest GET.

Przykład

W tym przykładzie dane formularza są wysyłane za pomocą metody GET:

<form action="/action_page.php" method="get">

Spróbuj sam

Przykład

W tym przykładzie dane formularza są wysyłane za pomocą metody POST:

<form action="/action_page.php" method="post">

Spróbuj sam

Uwagi dotyczące GET:

  • Dodaj dane formularza w formie pary nazwa/wartość do URL
  • Nigdy nie używaj GET do wysyłania wrażliwych danych! (Wysyłane dane formularza będą widoczne w URL!)
  • Długość URL jest ograniczona (2048 znaków)
  • Dobrze nadaje się do formularzy, w których użytkownik chce dodać wynik jako zakładkę
  • GET jest stosowany do niebezpiecznych danych, takich jak ciąg zapytań w Google

Uwagi dotyczące POST:

  • Dodaj dane formularza do ciała żądania HTTP (dane wysyłane za pomocą formularza nie będą wyświetlane w URL)
  • POST nie ma ograniczeń dotyczących rozmiaru, można go używać do wysyłania dużych ilości danych.
  • Formularze z POST nie mogą dodać zakładki

Uwaga:Jeśli dane formularza zawierają wrażliwe informacje lub dane osobowe, koniecznie użyj POST!

Atrybut Autocomplete

autocomplete Atrybut określa, czy formularz powinien otworzyć funkcję automatycznego uzupełniania.

Po włączeniu funkcji automatycznego uzupełniania, przeglądarka będzie automatycznie wypełniać wartości na podstawie wcześniej wprowadzonych przez użytkownika wartości.

Przykład

Włącz formularz automatycznego wypełniania:

<form action="/action_page.php" autocomplete="on">

Spróbuj sam

Atrybut novalidate

novalidate Atrybut to atrybut logiczny.

Jeśli ustawiony, określa, że dane formularza nie powinny być walidowane przy złożeniu.

Przykład

Formularz bez ustawionego atrybutu novalidate:

<form action="/action_page.php" novalidate>

Spróbuj sam

Lista wszystkich atrybutów <form>

Atrybut Opis
accept-charset Określa kodowanie znaków używane do wysyłania danych formularza.
action Określa, gdzie wysłać dane formularza przy złożeniu formularza.
autocomplete Określa, czy formularz powinien otworzyć funkcję automatycznego uzupełniania (wypełniania).
enctype Określa, jak kodyfikować dane formularza wysyłane do serwera (tylko dla method="post").
method Określa metodę HTTP używaną do wysyłania danych formularza.
name Określa nazwę formularza.
novalidate Określa, że formularz nie powinien być walidowany przy złożeniu.
rel Określa relację między zasobem linku a bieżącym dokumentem.
target Określa, gdzie wyświetlić otrzymaną odpowiedź po złożeniu formularza.