HTML-formulär

HTML-formulär används för att samla in olika typer av användarinput.

<form>-element

HTML-formulär används för att samla in användarinput.

<form>-element definierar HTML-formulär:

Exempel

<form>
 .
form elements
 .
</form>

HTML-formulär innehållerFormulärelement.

Formulärelement innebär olika typer av input-element, kryssrutor, radioknappar, skicka-knappar och så vidare.

Elementet <input>

<input> Element är det viktigasteFormulärelement.

Elementet <input> har många former, beroende på olika type Attribut.

Detta är de typer som används i detta kapitel:

Typ Beskrivning
text Definiera vanlig textinmatning.
radio Definiera radioknapp-input (välj ett av flera alternativ)
submit Definiera skicka-knappen (skicka formulär)

Kommentar:Du kommer att lära dig mer om inmatningstyperna senare i denna kurs.

Textinmatning

<input type="text"> Definiera användning förTextinmatningEn radinmatningsfält:

Exempel

<form>
 Förnamn:<br>
<input type="text" name="firstname">
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

Så ser det ut i webbläsaren:

Förnamn:


Efternamn:

Kommentar:Formuläret är självt inte synligt.Observera också att standardbredden för textfält är 20 tecken.

Radioknapp-input

<input type="radio"> DefinieraRadioknapp.

Radioknapparna låter användaren välja en av ett begränsat antal alternativ:

Exempel

<form>
<input type="radio" name="sex" value="male" checked>Man
<br>
<input type="radio" name="sex" value="female">Kvinna
</form>

Prova själv

Radioknapparna ser ut så här i webbläsaren:

Man

Kvinna

Skicka-knapp

<input type="submit"> Definiera användning förFormulärhanterare（form-handlare）SkickaFormulärbekvämligheter

Formulärhanteraren är vanligtvis en server-sida som innehåller skript för att hantera inmatningsdata.

Formulärhanteraren i formuläret action Specificera i attributen:

Exempel

<form action="action_page.php">
Förnamn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternamn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Prova själv

Så ser det ut i webbläsaren:

Förnamn:


Efternamn:


Action-attribut

action-attributDefiniera åtgärden som ska utföras vid inskickning av formuläret.

Det vanliga sättet att skicka ett formulär till en server är att använda en submit-knapp.

Normalt skickas formulär till en webbserver på en webbsida.

I ovanstående exempel har en viss server-skript specificerats för att hantera inkomna formulär:

<form action="action_page.php">

Om action-attributet utelämnas sätts action till den aktuella sidan.

Method-attribut

method-attributspecificerar den HTTP-metod som används vid inlämning av formulär (GET eller POST)

<form action="action_page.php" method="GET">

eller:

<form action="action_page.php" method="POST">

När ska du använda GET?

Du kan använda GET (standardmetod):

om formulärsändningen är passiv (t.ex. sökmotorfrågor) och inte innehåller känslig information.

När du använder GET är formulärdatan synlig i adressfältet på sidan:

action_page.php?firstname=Mickey&lastname=Mouse

Kommentar:GET är bäst för att skicka små mängder data. Browsrarna sätter kapacitetsgränser.

När ska du använda POST?

Du bör använda POST:

om formuläret uppdaterar data eller innehåller känslig information (t.ex. lösenord).

POST är säkrare eftersom data som skickas in i adressfältet på sidan inte är synliga.

Name-egenskap

För att korrekt kunna skickas in måste varje inmatningsfält ha en name-egenskap.

I detta exempel kommer endast "Last name"-inmatningsfältet att skickas in:

Exempel

<form action="action_page.php">
Förnamn:<br>
<input type="text" value="Mickey">
<br>
Efternamn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Prova själv

Använd <fieldset> för att kombinera formulärdata

<fieldset> Element kombinerar relaterade data i formuläret.

<legend> Elementet <fieldset> definierar rubriken för elementet.

Exempel

<form action="action_page.php">
<fieldset>
<legend>Personlig information:</legend>
Förnamn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternamn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Prova själv

Ovanstående HTML-kod ser ut så här i webbläsaren:

Personlig information:
Förnamn:


Efternamn:


HTML Form-egenskaper

HTML <form>-elementet, med alla möjliga egenskaper, ser ut så här:

Exempel

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Här är en lista över <form>-egenskaper:

Egenskap Beskrivning
accept-charset Definiera teckenuppsättningen som används i det inlämna formuläret (standard: sidans teckenuppsättning).
action Definiera adressen (URL) där formuläret ska skickas (skickas till sidan).
autocomplete Definiera om webbläsaren ska automatiskt slutföra formuläret (standard: aktiverat).
enctype Definiera koden för att koda inskickade data (standard: url-encoded).
method Definiera den HTTP-metod som används vid inlämning av formuläret (standard: GET).
name Definiera namnet på formuläret som ska identifieras (för DOM används: document.forms.name).
novalidate Definiera att webbläsaren inte ska validera formuläret.
target Definiera målet för adressen i action-egenskapen (standard: _self).

Kommentar:Du kommer att lära dig mer om egenskaper i följande kapitel.