Formulär

I denna lektionen går vi igenom hur formulär fungerar. Då man bara kan HTML är formulär riktigt tråkigt att lära sig, men för att ha roligt med det i andra språk måste man kunna det i HTML, så det är bara att bita i det sura äpplet och hoppas på det bästa.

Med ett formulär kan besökaren själv skriva i information, sedan skicka informationen till en annan sida där ett serverspråk (till exempel PHP) hanterar den informationen (till exempel sparar den i databas eller en fil). Om du bara kan HTML kan formulär kännas ganska meningslösa, men med PHP och JavaScript kan man göra riktigt roliga saker med dem vilket gör det värt mödan att lära sig hur de fungerar i HTML.

För att infoga ett formulär använder man <form>-taggen. Attributet action beskriver vilken sida formuläret och besökaren ska skickas till då denne trycker på skicka-knappen. Attributet method beskriver vilket sätt informationen ska postas på: get eller post. Skillnaden mellan dessa båda är att metoden get skickar informationen via adressfältet, medan post skickar informationen "dolt". Vanligtvis brukar man skicka informationen med post, dock är det bra att använda get ifall formuläret till exempel är ett sökformulär, för i och med att de uppgifter besökaren har skrivit i formuläret skickas med i adressfältet kan man länka till sidan med just den sökningen.

Google har ju till exempel ett sökformulär på sin hemsida som använder sig av metoden get. Ifall du söker på ordet "fotboll" kommer du till sidan "http://www.google.se/search?hl=sv&q=fotboll&btnG=Google-s%C3%B6kning&meta=&aq=f&oq=". Här skickas (bland annat) ditt sökord med via adressfältet, och du kan enkelt länka till sidan med sökresultat för ditt sökord. Ifall formuläret istället skulle använt sig utav metoden post skulle du kommit till sidan "http://www.google.se/search", den information vi fyllde i formuläret skulle skickas dolt, och vi kan inte länka till sidan med det angivna sökordet. Det är skillnaden mellan metoderna post och get.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="post"> <!-- Här lägger vi in det som ska finnas i formuläret --> </form>

Man använder taggen <input> för att infoga lite olika saker i ett formulär. Attributet type beskriver vad för sak det är vi vill infoga. Om vi vill ha en textruta på en rad använder vi värdet text. Vi bör även namnge fältet. Detta för att sidan vi kommer till ska veta vilken information som hör till vilken text-ruta i formuläret (läs mer om PHP senare). Vi namnger fältet med attributet name.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Skriv i sökordet:</p> <input type="text" name="sökord"> </form>

Skriv i sökordet:

Med attributet value kan vi ange ett värde som redan ska stå i rutan:

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Skriv i sökordet:</p> <input type="text" name="sökord" value="Skriv sökordet här!"> </form>

Skriv i sökordet:

Vi kan även göra tecknen i <input> oigenkännliga. Det gör vi genom att ändra värdet i attributet type till password. Password betyder lösenord på svenska.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="post"> <h1>Logga in</h1> <p>Användarnamn:</p> <input type="text" name="användarnamn"> <p>Lösenord:</p> <input type="password" name="lösenord"> </form>

Logga in

Användarnamn:

Lösenord:

type="password" är ju perfekt på rutor där användaren ska skriva i sitt lösenord. Även ifall besökaren har en kompis intill sig vid datorn kan kompisen inte se besökarens lösenord då webbläsaren döljer de tecknen. Viktigt är även att vi skickar formulär med lösenord via metoden post, annars kan ju besökarens kompis se besökarens lösenord på sidan man kommer till i adressfältet.

Man kan även infoga en ruta där besökaren kan välja en fil från sin dator. När formuläret sedan skickas kan man ladda upp den filen till internet med hjälp av ett serverspråk (läs mer om PHP senare). För att göra det använder man type="file" istället.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="post"> <p>Välj vilken fil som ska laddas upp:</p> <input type="file" name="filen"> </form>

Välj vilken fil som ska laddas upp:

För att infoga en knapp som skickar formuläret då man klickar på den med musen använder man type="submit". Det som står i attributet value blir texten som står på knappen.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Skriv i sökordet:</p> <input type="text" name="sökord"><br> <input type="submit" name="sök" value="Sök!"> </form>

Skriv i sökordet:


Ibland kanske ett formulär är en del av en tipspromenad på internet och man ska välja 1, X, eller 2 på en fråga, och då är type="radio" perfekt. Viktigt är då att man döper alla type="radio" till samma namn.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Vilken färg hade Karl den XII vita häst?</p> <input type="radio" name="svar" value="1"> 1. Vit<br> <input type="radio" name="svar" value="X"> X. Brun<br> <input type="radio" name="svar" value="2"> 2. Svart<br> </form>

Vilken färg hade Karl den XII vita häst?

1. Vit
X. Brun
2. Svart

Med attributet checked="checked" kan man göra så att ett av alternativen är vald från början.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Vilken färg hade Karl den XII vita häst?</p> <input type="radio" name="svar" value="1"> 1. Vit<br> <input type="radio" name="svar" value="X" checked="checked"> X. Brun<br> <input type="radio" name="svar" value="2"> 2. Svart<br> </form>

Vilken färg hade Karl den XII vita häst?

1. Vit
X. Brun
2. Svart

Den sista typen vi ska visa är type="checkbox". Den är snarlik type="radio", men med type="checkbox" kan man välja flera av alternativen.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Vilka av följande frukter gillar du?</p> <input type="checkbox" name="frukt" value="Äpple"> Äpple<br> <input type="checkbox" name="frukt" value="Päron"> Päron<br> <input type="checkbox" name="frukt" value="Banan"> Banan<br> <input type="checkbox" name="frukt" value="Apelsin"> Apelsin<br> </form>

Vilka av följande frukter gillar du?

Äpple
Päron
Banan
Apelsin

Även här kan man göra så att ett/flera alternativ redan är valda från början med attributet checked="checked".

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Vilka av följande frukter gillar du?</p> <input type="checkbox" name="frukt" value="Äpple"> Äpple<br> <input type="checkbox" name="frukt" value="Päron" checked="checked"> Päron<br> <input type="checkbox" name="frukt" value="Banan" checked="checked"> Banan<br> <input type="checkbox" name="frukt" value="Apelsin"> Apelsin<br> </form>

Vilka av följande frukter gillar du?

Äpple
Päron
Banan
Apelsin

Man kan även låta besökaren välja ett alternativ i en lista. taggen <select> infogar en sådan lista, och för att lägga till ett alternativ i den använder man taggen <option>. Det som står mellan starttaggen och sluttaggen i <option> blir den text som besökaren ser, och värdet som står i attributet value blir det som skickas till nästa sida. Liksom med <input> bör vi döpa vår <select> med attributet name.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Välj kön:</p> <select name="kon"> <option value="M">Man</option> <option value="K">Kvinna</option> </select> </form>

Välj kön:

<option> kan även ha attributet selected="selected". Den tagg som har det kommer att vara vald från början. Om ingen <option> har detta attributet kommer det första alternativet i listan vara vald från början (som du har sett i föregående exempel).

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Välj favoritsiffra:</p> <select name="favoritsiffra"> <option value="1">Ett</option> <option value="2">Två</option> <option value="3">Tre</option> <option value="4">Fyra</option> <option value="5" selected="selected">Fem</option> <option value="6">Sex</option> <option value="7">Sju</option> <option value="8">Åtta</option> <option value="9">Nio</option> </select> </form>

Välj favoritsiffra:

Om man vill ha en stor textruta besökaren ska skriva i använder man taggen <textarea>. Även denna taggen bör vi döpa med attributet name, och attributen cols och rows anger hur bred respektive hur hög textrutan ska vara.

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Skriv i ett meddelande:</p> <textarea name="meddelande" cols="50" rows="5"></textarea> </form>

Skriv i ett meddelande:

Om vi vill att en text ska stå i textrutan redan från början kan vi skriva den mellan start- och sluttaggen:

HTML - HyperText Markup Language
<form action="sidanViSkaKommaTill.html" method="get"> <p>Skriv i ett meddelande:</p> <textarea name="meddelande" cols="30" rows="15">Skriv meddelandet här!</textarea> </form>

Skriv i ett meddelande:

Exempel på formulär till Google

I början på lektionen nämnde vi hur Google använder sitt sökformulär. De skickar besökaren till sidan /search, använder sig av metoden get och den ruta som är döpt till q blir den text de söker efter. Detta kan vi använda för att göra ett eget sökformulär till Google.

HTML - HyperText Markup Language
<form action="http://www.google.se/search" method="get"> <p>Skriv i sökordet:</p> <input type="text" name="q"> <input type="submit" value="Sök på Google!"> </form>

Skriv i sökordet:

Vi behöver inte ens ha en <input> för att göra en sökning på Google, vi kan ha något annat, bara vi har samma inställningar som formuläret i Google:

  • Vi ska komma till sidan /search (notera att vi måste använda en absolut sökväg då formuläret inte ligger på samma sida som deras, så vi måste ha http://www.google.se/search).
  • Vi använder metoden get.
  • Sökordet ska ha namnet q.
HTML - HyperText Markup Language
<form action="http://www.google.se/search" method="get"> <select name="q"> <option value="Fotboll">Jag vill söka på "Fotboll"</option> <option value="Kärlek">Jag vill hitta en kärlekssida.</option> </select> <input type="submit" value="Sök på Google!"> </form>

Gå till nästa lektion, Information om din hemsida.