HTML <form> etikett

Definition och användning

<form> Taggen används för att skapa HTML-formulär för att ta emot användarinput.

<form> Element kan innehålla en eller flera formulärelement:

Se också:

HTML-lärbok:HTML formulär och inmatning

HTML DOM referenshandbok:Form-objekt

CSS-lärbok: Ställ in formulärstilar

Exempel

Exempel 1

HTML-formulär med två inmatningsfält och en submit-knapp:

<form action="/action_page.php" method="get">
  <label for="fname">Förnamn:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Efternamn:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Skicka">
</form>

Prova själv

Exempel 2

HTML-formulär med kryssrutor:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">Jag har ett cykel</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">Jag har ett bil</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">Jag har ett fartyg</label><br><br>
  <input type="submit" value="Skicka">
</form>

Prova själv

Exempel 3

HTML-formulär med radioknappar:

<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="Skicka">
</form>

Prova själv

Attribut

Attribut Värde Beskrivning
accept-charset Teckenuppsättning Definierar teckenuppsättningen som används vid formulärsändning.
action URL Definierar var formulärdata ska skickas vid formulärsändning.
autocomplete
  • on
  • off
 Definierar om automatisk färdigstavning ska vara aktiverad för formuläret.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Definierar hur formulärdata ska kódas när den skickas till servern.
method
  • get
  • post
 Definierar HTTP-metoden som används för att skicka formulärdata.
name text Definierar namnet på formuläret.
novalidate novalidate Definierar att formuläret inte ska valideras vid skickande av formuläret.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Definierar förhållandet mellan länkresursen och det aktuella dokumentet.
target
  • _blank
  • _self
  • _parent
  • _top
 Definierar var submit-svar efter att ha skickat in formuläret ska visas.

Globala attribut

<form> Taggar stöder också Globala attribut i HTML。

Evenhetsattribut

<form> Taggar stöder också Evenhetsattribut i HTML。

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <form> Element:

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

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd