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 "Zatwierdź", dane formularza są wysył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 są wysył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">Nazwisko:</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, ustawia się action 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ź jest wyświetlana w nowym oknie lub karcie.
_self Odpowiedź jest wyświetlana w bieżącym oknie.
_parent Odpowiedź jest wyświetlana w nadrzędnym ramce.
_top Odpowiedź jest wyświetlana w całym ciele okna.
framename Odpowiedź jest wyświetlana w oznaczonym 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ć używane jako zmienne URL (używając method="get") lub jako transakcja HTTP POST (używając method="post") wysyłane.

Domyślną metodą HTTP 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 par nazwa/wartość do URL
  • Nigdy nie używaj GET do wysyłania wrażliwych danych! (Dane formularza są widoczne w URL!)
  • Długość URL jest ograniczona (2048 znaków)
  • Dobrze nadaje się do formularzy, gdzie użytkownik chce dodać wynik jako zakładkę
  • GET jest odpowiedni dla nieszkodliwych danych, takich jak ciąg zapytań w Google

Uwagi dotyczące POST:

  • Dołącz dane formularza do ciała żądania HTTP (dane formularza nie są wyświetlane w URL)
  • POST nie ma ograniczeń dotyczących rozmiaru, można go używać do wysyłania dużej ilości danych.
  • Formularze z POST nie mogą być dodane jako 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 automatycznie wypełni wartości na podstawie wcześniejszych wpisów użytkownika.

Przykład

Włącz formularz z automatycznym wypełnianiem:

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

Spróbuj sam

Atrybut Novalidate

novalidate Atrybut jest atrybutem logicznym.

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>

Atrybuty Opis
accept-charset Określa kodowanie znaków używane do złożenia 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 kodować 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ć odebrane odpowiedzi po złożeniu formularza.