HTML formulär egenskaper

Detta kapitel introducerar HTML <form> Elementens olika egenskaper.

Action-egenskapen

action Egenskapen definierar vilken operation som ska utföras vid inlämning av formuläret.

Vanligtvis skickas formulärdata till en fil på servern när användaren klickar på "skicka"-knappen.

I följande exempel skickas formulärdata till en fil som heter "action_page.php". Denna fil innehåller en server-side skript som hanterar formulärdata:

Exempel

Efter att ha skickat in formuläret, skickas formulärdata till "action_page.php":

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

Prova själv

Tips:Om action-attributet utskrivs, sätts action till den aktuella sidan.

Target-egenskap

target Egenskapen definierar var svaret ska visas efter att formuläret har skickats.

target Egenskapen kan sätta en av följande värden:

Värdet Beskrivning
_blank Svaret visas i ett nytt fönster eller flik.
_self Svaret visas i det aktuella fönstret.
_parent Svaret visas i föräldrafacket.
_top Svaret visas i hela body:n i fönstret.
framename Svaret visas i det namngivna iframe:et.

Standardvärdet är _self, vilket innebär att svaret kommer att öppnas i det aktuella fönstret.

Exempel

Här kommer resultatet att öppnas i en ny webbläsartabell:

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

Prova själv

Method-egenskap

Egenskapen för method definierar den HTTP-metod som används för att skicka formulärdata.

Formulärdata kan användas som URL-variabler (använd method="get") eller som HTTP POST-transaktion (använd method="post") skicka.

Standard HTTP-metoden för att skicka formulärdata är GET.

Exempel

Detta exempel använder GET-metoden när formulärdata skickas:

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

Prova själv

Exempel

Detta exempel använder POST-metoden när formulärdata skickas:

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

Prova själv

Några saker att tänka på om GET:

  • Lägg till formulärdata i URL:en i form av namn/värde-par
  • Använd aldrig GET för att skicka känslig data! (Inmatade formulärdata synliga i URL!)
  • Längden på URL:en är begränsad (2048 tecken)
  • Mycket användbart för formulärsubmission där användaren vill lägga till resultat som bokmärke
  • GET används för osäkra data, till exempel söksträngar i Google

Några saker att tänka på om POST:

  • Lägg till formulärdata i HTTP-forespärrtexten (inte synliga i URL)
  • POST har ingen storleksbegränsning och kan användas för att skicka stora mängder data.
  • Formulär som skickas med POST kan inte lägga till bokmärken

Tips:Om formulärdatan innehåller känslig information eller personlig information, använd POST!

Autocomplete-egenskap

autocomplete Egenskapen definierar om formuläret ska öppna automatisk fyllning.

När automatisk fyllning är aktiverad, fyller webbläsaren automatiskt värden baserat på användarens tidigare inmatningar.

Exempel

Aktivera automatisk fyllning av formulär:

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

Prova själv

Novalidate egenskap

novalidate Egenskapen är en boolesk egenskap.

Om inställd, bestämmer den att formulärdatan inte ska valideras vid inlämning.

Exempel

Formulär utan inställd novalidate egenskap:

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

Prova själv

Listan över alla <form>-egenskaper

Egenskap Beskrivning
accept-charset Bestämmer den teckenkodning som används för att skicka formulärdatan.
action Bestämmer var formulärdatan ska skickas vid inlämning av formuläret.
autocomplete Bestämmer om formuläret ska öppna funktionen för automatiskt slutförande (fyllning).
enctype Bestämmer hur formulärdatan ska kodas när den skickas till servern (endast för method="post").
method Bestämmer den HTTP-metod som ska användas för att skicka formulärdatan.
name Bestämmer formulärets namn.
novalidate Bestämmer att formulärdatan inte ska valideras vid inlämning.
rel Bestämmer förhållandet mellan länkresursen och den aktuella dokumenten.
target Bestämmer var den mottagna responsen efter att formuläret har skickats in ska visas.