HTML formulär

Formulär används i HTML för att låta användaren fylla i och skicka information.

Exempel:

Skriv ditt namn i rutan!

Formulär interagerar med webbservern

När en webbsida visas så medverkar två datorer.

• Klienten är den dator där webbläsaren körs.
• Servern är den dator som på förfrågan från klienten skickar en webbsida.

I exemplet ovan sparade formuläret textrutans innehåll till variabeln ”dittnamn”. Denna variabel skickades sedan från klientens dator till webbsidan ”hej.php” på servern där en php-script skriver ut variabeln på sidan som sedan skickas tillbaka klienten.

Elementet <form>

Ett formulär definieras med elementet <form>. Mellan <form> taggarna kan olika formulärobjekt finnas. Dessa definieras med elementet <input>

Formuläret i exemplet ovan skapas med följande HTML kod:

HTML kod

<form action="exempel/hej.php" method="get">
   <input type="text" name="dittnamn">
   <input type="submit" />
</form>

För att skicka informationen i formuläret används attributen ”action” och ”method”.

• ”action” – anger till vilken URL som informationen från formuläret skickas till.
• ”method” – anger på vilket sätt informationen ska skickas från klienten till servern. Läs mer här!

Elementet <input>

Elementet <input> skapar ett formulärobjekt i ett formulär. I stort sett alla formulärobjekt måste ha attributen ”type” och ”name”

• ”type” – anger typ av formulärobjekt.
• ”name” – alla formulärobjekt utom ”submit” kräver attributet ”name”. Värdet på ”name” blir det variabelnamn som skickas till servern.

Det finns nio olika typer av formulärobjekt som bestämms av attributet ”type”. Dessa är: textrutor, lösenordsrutor, radioknappar, kryssrutor, kommandoknappar, bildknapp, återställningsknapp, gömt fält och filöverföring

Textrutor

Textrutor används till att skriva in bokstäver och siffror i ett formulär. En textruta anges genom att ge attributet type värdet ”text”.

HTML kod

<form>
Namn:
<input type="text" name="namn">
<br>
Ålder:
<input type="text" name="alder">
</form>

Resultat:

Namn:

Ålder:

I de flesta webbläsare så är textrutan som standard 20 tecken lång.

Element för formulär

Element	Beskrivning	Övrigt
<form>	Definierar ett formulär	-
<input>	Definierar ett formulärobjekt	-
<textarea>	Definierar en textområde	-
<label>	Definierar a etikett till en radioknapp	-
<fieldset>	Definierar ett fieldset	-
<legend>	Definierar en överskrift för ett fieldset	-
<select>	Definierar en valbar rullgardinslista	-
<optgroup>	Definierar en grupp av alternativ	-
<option>	Definierar ett alternativ i en rullgardinslista	-
<button>	Definierar en knapp	-
<isindex>	Använd <input> istället.	Utfasad! Fungerar i Transitional DTD