Etiqueta <form> HTML

Definicja i użycie

<form> Tagi służą do tworzenia formularzy HTML do odbierania danych od użytkownika.

<form> Element może zawierać jeden lub kilka z następujących elementów formularza:

Zobacz również:

HTML Tutorial:HTML Forms and Inputs

HTML DOM Reference Manual:Obiekt Form

CSS Tutorial: Ustawienie stylu formularza

Przykład

Przykład 1

HTML formularz z dwoma polami wejściowymi i przyciskiem wysyłania:

<form action="/action_page.php" method="get">
  <label for="fname">Imię:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nazwisko:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Zatwierdź">
</form>

Spróbuj sam

Przykład 2

HTML formularz z pól wyboru:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Rower">
  <label for="vehicle1">Mam rower</label><br>
  <input type="checkbox" name="vehicle2" value="Samochód">
  <label for="vehicle2">Mam samochód</label><br>
  <input type="checkbox" name="vehicle3" value="Łódź" checked>
  <label for="vehicle3">Mam łódź</label><br><br>
  <input type="submit" value="Zatwierdź">
</form>

Spróbuj sam

Przykład 3

HTML formularz z paskami wyboru:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Zatwierdź">
</form>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
accept-charset Zestaw znaków Określa kodowanie znaków używane do wysyłania formularza.
action URL Określa, gdzie wysłać dane formularza podczas wysyłania formularza.
autocomplete
  • on
  • off
 Określa, czy formularz powinien włączyć funkcję automatycznego uzupełniania.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Określa, jak kodować dane formularza podczas wysyłania do serwera.
method
  • get
  • post
 Określa metodę HTTP używaną do wysyłania danych formularza.
name tekst Określa nazwę formularza.
novalidate novalidate Określa, że formularz nie powinien być walidowany podczas wysyłania.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Określa relację między zasobem linku a bieżącym dokumentem.
target
  • _blank
  • _self
  • _parent
  • _top
 Określa, gdzie wyświetlić odpowiedź po wysłaniu formularza.

Globalne atrybuty

<form> Tagi wspierają również Globalne atrybuty HTML。

Atrybuty wydarzeń

<form> Tagi wspierają również Atrybuty wydarzeń w HTML。

Domyślne ustawienia CSS

Większość przeglądarek wyświetli wartości domyślne poniżej <form> Element:

form {
  display: block;
  margin-top: 0em;
}

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie