<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Formulär

Hittills har vi sparat information på servern, som har skickat den till användaren på begäran. Men ibland vill man att användaren ska skicka information tillbaka till servern. Det kan handla om att fylla i uppgifter av olika slag, kryssa i rutor i enkäter, beställa varor, ange sökord till en databassökning etc. Alltid när användaren ska avge information från en webbsida använder man formulär. Informationen som användaren skickar in kan användas till en automatisk beräkning eller databehandling, sparas på servern, eller skickas via e-post för manuell behandling. Denna databehandling görs av ett s.k. CGI-program som är installerat på serverdatorn.

Själva formuläret kodas i HTML med speciella styrkoder. CGI-programmet skrivs i ett lämpligt programmeringsspråk och installeras och körs (exekveras) på servern. På de flesta webbservrar finns det några färdiga CGI-program installerade, och det finns också färdiga CGI-program att hämta på Internet. Se vidare avsnittet om CGI.

Ett formulär börjar alltid med <FORM> och slutar med </FORM>. Däremellan kan man placera textinskrivningsfält, radioknappar, kryssrutor, popup-menyer etc. Formuläret kan också innehålla "vanliga" HTML-konstruktioner som text, rubriker, listor, tabeller etc. Man får dock inte ha ett formulär inne i ett annat formulär (men man kan ha två eller flera formulär efter varandra på samma sida).

Till styrkoden <FORM> anger man attribut som anger vart och hur formulärdatat (den information som användaren matat in) ska skickas.

Med attributet METHOD anger man hur formulärdatat ska skickas. Man kan välja mellan antingen GET eller POST.

GET innebär att formulärdatat skickas som en del av URL:en, efter ett frågetecken. Formulärdatat kommer att synas i webbläsarens adressfält. Mängden data som kan skickas på detta sätt är begränsad.

POST innebär att formulärdatat skickas som ett datablock till servern tillsammans med begäran om den nya sidan. Denna metod är att föredra i de allra flesta fall.

Med attributet ACTION anger man vart formulärdatat ska skickas. Detta är oftast webbadressen (URL:en) till ett CGI-program på servern (se vidare avsnittet om CGI). CGI-programmet tar hand om formulärdatat, behandlar det på något sätt och skickar sedan tillbaka en webbsida till webbläsaren, baserad på den information som användaren skickade in. Om formuläret till exempel används för att skriva in sökbegrepp till en databassökning så kan CGI-programmet skicka tillbaka en sida med sökresultatet på.

Exempel: <FORM METHOD="POST" ACTION="/cgi-bin/dbsearch"> gör att formulärdatat skickas med metoden POST till CGI-programmet "dbsearch" i den egna serverns cgi-bin-mapp.

Man kan också ange ACTION som en mailto:-adress. Då skickas formulärdatat som ett e-postmeddelande till angiven adress. E-postmeddelandet går från webbläsaren, och för att detta ska fungera så måste användaren ha skrivit in sin e-postadress och sin server för utgående e-post i sin webbläsares inställningar.

Exempel: <FORM METHOD="POST" ACTION="mailto:info@firma.se"> gör att formulärdatat skickas med metoden POST till e-postadressen info@firma.se.

Om man låter ACTION leda till en e-postadress kan man också ange ENCTYPE="text/plain" för att det ska bli lättare för brevets mottagare att läsa formulärdatat.

NAME/VALUE-par

Det som användaren skrivit in skickas till servern parvis som NAME och VALUE. Varje textfält, kryssruta etc har ett namn (som specifieras av webbdesignern) och ett värde (som tilldelas av den användare som fyller i formuläret). Dessa NAME/VALUE-par skickas sedan till servern.

Textinskrivningsfält

Den enklaste typen av formulärfält görs med <INPUT NAME="entry">. Resultatet på webbsidan är ett 20 tecken långt, enradigt fält där användaren kan skriva in text. Om användaren skriver in mer än 20 tecken rullar texten åt vänster. "entry" är ett godtyckligt namn på just detta fält. Har du flera textfält på sidan så ska dessa ha olika namn. Fältens namn syns inte på webbsidan. Välj gärna namn som har med fältets syfte att göra. Exempel:

KodVisas som 
Ditt namn: <INPUT NAME="namn"><P>
Ditt telefonnummer: <INPUT NAME="telefon"><P>
Din skostorlek: <INPUT NAME="sko"><P>
Ditt namn:

Ditt telefonnummer:

Din skostorlek:

Vill du ha ett textinskrivningsfält längre eller kortare än 20 tecken använder du SIZE:

KodVisas som 
Din skostorlek: 
<INPUT NAME="sko" SIZE="3">
Din skostorlek:

Textfältet blir tre tecken långt.

Observera att det fortfarande går att skriva in mer text, det som inte syns i rutan rullar åt vänster. Om du vill begränsa användarna att bara skriva in så mycket som får plats i rutan använder du MAXLENGTH:

KodVisas som 
Din skostorlek: 
<INPUT NAME="sko" SIZE="3" MAXLENGTH="3">
Din skostorlek:

Textfältet blir tre tecken långt och försöker man skriva in mer hörs ett varningsljud. Värdena för SIZE och MAXLENGTH kan vara olika. Det går att fylla i fältet i förväg. Genom att ange VALUE så kommer fältet ha text i sig när det presenteras för användaren. Användaren kan sedan välja att ändra texten eller inte. Detta kan till exempel användas för att föreslå ett svar eller för att visa hur ett svar kan se ut.

KodVisas som 
<INPUT NAME="namn" VALUE="Fyll i ditt namn här">

Sänd-knapp

När användaren fyllt i formuläret ska hon klicka på en knapp för att skicka iväg informationen till servern. Denna knapp görs med:

KodVisas som 
<INPUT TYPE="submit" VALUE="Skicka formuläret">

VALUE anger den text som står på själva knappen. Om denna inte anges kommer det stå "Submit" på knappen.

Man kan ha flera sänd-knappar i samma formulär.

Återställnings-knapp

Bredvid sänd-knappen brukar man ibland sätta en återställnings-knapp (reset-knapp) som användaren kan klicka på ifall hon ångrar sig och vill tömma alla ifyllda fält och sedan börja om.

KodVisas som 
<INPUT TYPE="reset" VALUE="Töm alla fält">

VALUE är den text som står på själva knappen. Om denna inte anges kommer det stå "Reset" på knappen.

Ifall något av fälten har förvald text (med VALUE) så kommer denna att återställas. Reset innebär alltså "återställ till förvalda värden" snarare än "töm alla fält".

Kryssrutor

För att göra en ruta som användaren kan välja att antingen kryssa i eller inte kryssa i skriver du:

KodVisas som 
<INPUT TYPE="checkbox" NAME="allan" VALUE="kakan"> 
<INPUT TYPE="checkbox" NAME="allan" VALUE="kakan" CHECKED>

CHECKED gör att rutan är ikryssad som förval.

Flera olika kryssrutor kan ha samma NAME. För varje ikryssad ruta kommer ett NAME/VALUE-par att skickas till servern. För icke ikryssade rutor skickas inget NAME/VALUE-par.

Radioknappar

Radioknappar är ungefär som kryssrutor, användaren kan välja att antingen kryssa i dem eller inte. Skillnaden är att bara en i en grupp av flera radioknappar med samma NAME kan vara ikryssad samtidigt. Endast ett NAME/VALUE-par kommer att skickas till servern. Om ingen av radioknapparna markerats skickas inte något NAME/VALUE-par alls.

I exemplet nedan måste man välja en betalningsmetod, man kan inte både betala med kontanter och check samtidigt. Alla knappar i ett formulär som har samma NAME hör ihop, och endast en av dessa kan vara markerad.

KodVisas som 
<INPUT TYPE="radio" NAME="betala" VALUE="kontant"> Kontant.<P>
<INPUT TYPE="radio" NAME="betala" VALUE="check"> Check.<P>
<INPUT TYPE="radio" NAME="betala" VALUE="kreditkort"> Kreditkort.<P>
Kontant.

Check.

Kreditkort.

Om man vill att en av knapparna ska vara ikryssad som förval används attributet CHECKED (se ovan).

Popupmeny

Ett annat sätt att låta användaren välja en av flera alternativ är popup-menyn. Den kan bli snyggare, speciellt om man har många olika saker att välja emellan. En popup-meny gör man med <SELECT> och </SELECT>. Mellan start- och slutkoderna lägger man in flera olika <OPTION>-koder. Exempel:

KodVisas som 
<SELECT NAME="mat">
<OPTION>Hamburgare
<OPTION>Pizza
<OPTION>Sushi
<OPTION SELECTED>Köttbullar
<OPTION>Kebab
<OPTION>Fylld baguette
</SELECT>

Det alternativ som står efter den första <OPTION>-koden kommer att bli det som syns ifall användaren inte ändrar något. Vill man att ett annat av alternativen ska vara förvalt anger man det som <OPTION SELECTED>. En reset-knapp återställer till förvalt värde.

Det NAME som skickas kommer att vara det som anges i styrkoden <SELECT>, och det VALUE som skickas är den text som står efter <OPTION>. Den syns även i listan på själva webbsidan. Ifall man vill att något annat än det som står i listan ska skickas till servern kan man ange VALUE inne i <OPTION>-koden:

<OPTION VALUE="Baguette">Fylld baguette
Om användaren i detta fall väljer "Fylld baguette" från listan kommer NAME/VALUE-paret "mat=Baguette" skickas till servern.

Rullningsbara listor med ett eller flera val

Ytterligare ett annat sätt att låta användaren välja en av flera alternativ är den rullningsbara listan. Den låter dessutom användaren välja flera av alternativen ifall webbdesignern så tillåter. En rullningsbar lista görs på samma sätt som popup-menyn. Enda skillnaden är att man anger hur mycket av listan (hur många rader) som ska synas med attributet SIZE. Är SIZE="2" eller större blir det en rullningslista, är SIZE="1" eller saknas blir det en popup-meny. Är listan längre än det antal rader som specificerats med SIZE får listan automatiskt en rullningslist.

KodVisas som 
<SELECT NAME="mat" SIZE="4">
<OPTION>Hamburgare
<OPTION>Pizza
<OPTION>Sushi
<OPTION SELECTED>Köttbullar
<OPTION>Kebab
<OPTION VALUE="Baguette">Fylld baguette
</SELECT>

Även här kan man förvälja alternativ med <OPTION SELECTED> och ange speciella värden med <OPTION VALUE>. En reset-knapp återställer till förvalt värde.

I en rullningsbar lista kan användaren få markera flera alternativ. Detta görs möjligt genom attributet MULTIPLE:

KodVisas som 
<SELECT NAME="mat" MULTIPLE SIZE="4">
<OPTION>Hamburgare
<OPTION>Pizza
<OPTION>Sushi
<OPTION SELECTED>Köttbullar
<OPTION>Kebab
<OPTION VALUE="Baguette">Fylld baguette
</SELECT>

Här bör man skriva en anvisning på sidan så att användaren förstår att det är tillåtet att välja flera alternativ. Beroende på vad användaren har för datortyp markeras flera val med hjälp av skift-, control, kommando- eller motsvarande tangent.

Textinskrivningsfält med flera rader

Vill man låta användaren skriva in flera rader text gör man detta med <TEXTAREA>. Denna styrkod kräver start- och slutkod.

KodVisas som 
<TEXTAREA NAME="brev_till_allan" 
  ROWS="10" COLS="30"> 
</TEXTAREA>

Textfältet blir i detta fall 10 rader högt och 30 tecken brett. Skriver användaren in mer kommer fältet rullas.

Vill man att raderna i textinskrivningsfältet ska brytas när man når kanten på fältet istället för att texten bara rullas åt vänster kan man använda attributet WRAP. WRAP="SOFT" gör att raderna bryts på skärmen, men att webbläsaren inte stoppar in några radbrytningar i den text som skickas till servern, medan WRAP="HARD" gör att radbrytningarna även skickas med till servern. WRAP="OFF" ger samma effekt som att utelämna WRAP; texten ser ut och skickas exakt som den skrevs in. WRAP stöds endast av vissa webbläsare.

Vill man ha en text inskriven i förväg i ett <TEXTAREA>-fält anger man den mellan start- och slutkoderna:

KodVisas som 
<TEXTAREA NAME="brev_till_allan" ROWS="10"
  COLS="30">Hej Allan! Vill du ha en kaka?
</TEXTAREA>

Användaren som fyller i formuläret kan ändra texten. En reset-knapp återställer till förvalt värde.

Lösenordsfält

När det som skrivs in i ett enkelradigt textinskrivningsfält ska vara hemligt för den som kanske står och tittar användaren över axeln (till exempel lösenord) kan man använda TYPE="password":

KodVisas som 
<INPUT TYPE="password" NAME="pwd">

Det som användaren skriver in kommer visas som asterisker eller svarta cirklar.

Även här kan man ange ett förval t.ex. för anslutning som gäst:

KodVisas som 
<INPUT TYPE="password" NAME="pwd" 
  VALUE="guestpwd">

Användaren som fyller i formuläret kan ändra texten. Notera att ett förvalt värde lätt kan ses av en användare som tittar på HTML-koden via "View Document Source". En reset-knapp återställer till förvalt värde.

Gömda fält

Ibland vill man skicka information till servern som användaren inte ska behöva se eller kunna ändra, till exempel om man har ett ganska generellt CGI-program som flera kan använda genom att styra det med gömda fält, eller för att "ta med sig" information från ett formulär till ett annat. Ett gömt fält kan innehålla helt valfria NAME/VALUE-par och anges med TYPE="hidden":
<INPUT TYPE="hidden" NAME="stork" VALUE="gris">
Observera att även gömda fält lätt kan ses av en användare som tittar på HTML-koden via "View Document Source".

Bilder

Med attributet TYPE="image" kan man låta olika saker hända beroende på var i en bild som användaren klickar. Till exempel kan man skriva ett CGI-program som utför en beräkning utifrån var i ett diagram eller en karta som användaren klickar.

KodVisas som 
<INPUT NAME="Allan" 
  TYPE="image" SRC="bildfil.gif">

På webbsidan visas bilden som anges som SRC, och när användaren klickar på bilden skickas ett NAME/VALUE-par där VALUE är de koordinater inom bilden som användaren klickade på.

Uppladdning av en fil

Med attributet TYPE="file" kan man låta användaren skicka in en fil till servern. Webbläsaren frågar på något sätt användaren efter ett filnamn, till exempel genom att lägga ut ett textfält där filnamnet ska skrivas in och/eller en "Browse..."-knapp på webbsidan. Genom att trycka på "Browse..."-knappen får användaren upp sitt datorsystems normala dialogruta för att öppna en fil. Exakt hur detta ser ut beror helt på webbläsaren och operativsystemet. Exempel:
<FORM METHOD="POST" ACTION="url" ENCTYPE="multipart/form-data">
<INPUT NAME="filename" TYPE="file">
</FORM>
Filen skickas, tillsammans med övrig formulärdata, som mediatypen "multipart". CGI-programmet på servern som tar emot filen måste hantera detta på något lämpligt sätt.

<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Copyright © Anders Hultman 1998-02-21