Lektion 9, Formulär

Oftast är nätet väldigt enkelriktat. Den enskilde användaren blir överöst av information men lämnar väldigt sällan något tillbaka. Det är här formulär kommer in i bilden. Du kan använda dem när användaren ska välja något eller du vill veta något om honom/henne.
Formulären ska innefattas mellan taggarna <FORM> </FORM>. Ett formulär kan innehålla många objekt t ex textrutor, knappar, menyer. Dessa behandlar vi senare i kapitlet.

Hur får man hem informationen?

När någon fyllt i ditt formulär vill du så klart få reda på resutatet. Vad som händer med den ifyllda informationen bestäms med attributet ACTION i taggen <FORM>. Det kan gå till på många sätt. På mer avancerade sidor lagras ofta informationen i en databas. På enklare sidor kanske det skickas ett mail med den ifyllda informationen till ägaren av websidan.

Det finns gratis-tjänster på nätet som meilar informationen till valfri adress. Titta tex in på http://www.responders.com/. Vissa internetleverantörer har egna lösningar som man kan använda. Kolla vad som gäller hos din leverantör. Ett exempel på hur det kan se ut:

<FORM ACTION="http://www.example.com/cgi-bin/mailto?mymail@server.com" METHOD=POST>

Två nya attribut till <FORM>

Ovan har vi tittat närmare på attributet ACTION. Det finns dock två till.

METHOD Anger hur informationen ska skickas vidare. Attributet kan ha värdena GET eller POST. GET innebär att all information läggs ihop till en lång sträng. Vissa CGI-program vill ha det så. Det vanligaste är POST som alltid används när informationen ska skickas med e-mail. Det är dock GET som är standard och gäller om du glömmer attributet.

ENCTYPE Anger hur informationen ska formateras. Om formuläret ska skickas med e-mail ska ENCTYPE ha värdet TEXT/PLAIN. Då skickas den som vanlig text. Om du skickar formuläret till ett CGI-program bestämmer detta själv vilket värde ENCTYPE kommer att få och attributet kan utelämnas.

I alla nedanstående exempel utlämnas attributen till taggen <FORM>.

Textrutor

En textruta är den enklaste av alla objekten.

Kod	Resultat
`<FORM> <INPUT TYPE=TEXT NAME=TEXTRUTA> </FORM>`

Textrutan har tre attribut. SIZE bestämmer längden på rutan mätt i tecken. MAXLENGTH anger max antal tecken som kan matas in i rutan. VALUE bestämmer vad som ursprungligen står i rutan.

Kod	Resultat
`<FORM> <INPUT TYPE=TEXT SIZE="10" MAXLENGTH="3" VALUE=HEJ NAME=TESTRUTA> </FORM>`

Prova att skriva in text i de olika exempel-rutorna!

Lösenordsrutor

Fyller ungefär samma funktion som vanliga textrutor men istället för text kommer bara stjärnor upp (*). Funktionen brukar man använda när lösenord krävs. Testa att skriva in text i exemplet nedan.

Kod	Resultat
`<FORM> <INPUT TYPE=PASSWORD NAME=LÖSENORD> </FORM>`

Textrutans tre attribut (VALUE, SIZE, MAXLENGTH) går utmärkt att använda även i lösenordsrutor. Titta i stycket om textrutor ovan om du glömt dem.

Gömda textrutor

Fungerar som textrutor som inte användaren ser. Har man flera sidor kan man lägga in information som visar vilket formulär som användaren fyllt i. Är man dessutom bra på javascript (en typ av programmeringsspråk) kan man lägga in information om t ex vilken webläsare användaren använder.

Kod	Resultat
`<FORM> <INPUT TYPE=HIDDEN VALUE="nr1" NAME="FORMULÄR"> </FORM>`

Textfält

När användaren ska skriva in större textmassor är textfält bättre än små textrutor. Ett textfält fås genom taggen <TEXTAREA>. Så här kan det se ut:

Kod	Resultat
`<FORM> <TEXTAREA NAME="TEXTFÄLT" COLS="20" ROWS="3"> </TEXTAREA> </FORM>`

Kryssrutor

En kryssruta kan antingen vara förbockad eller inte.

Kod	Resultat
`Vilka datorer har du? <FORM> <INPUT TYPE=CHECKBOX NAME=VIC>Vic 20<BR> <INPUT TYPE=CHECKBOX CHECKED NAME=AMI>Amiga </FORM>`	Vic 20 Amiga

Som du ser ovan använder du attributet CHECKED om du vill ha kryssrutan förbockad från början. Svaret som skickas med e-mail kan se ut så här:
AMI=on
Enbart de rutor som är förkryssade kommer att skickas.

Radioknappar

När användaren bara får välja ett anternativ använder man radioknappar. Bland de knappar som har samma namn går endast en att markera åt gången. Värdet på attributet VALUE på den knappen som är vald kommer att skickas vid ett e-mailsvar.

Kod	Resultat
`Hur många barn har du?<BR> <FORM> <INPUT TYPE=RADIO NAME=BARN VALUE="2-"><2<BR> <INPUT TYPE=RADIO NAME=BARN VALUE="2">2<BR> <INPUT TYPE=RADIO NAME=BARN VALUE="2+">>2 </FORM>`	Hur många barn har du? <2 2 >2

Ett e-mailsvar på ovanstånde knappar kan se ut så här:
BARN=2+

Menyer

En meny innesluts mellan taggarna <SELECT></SELECT>. Varje alternativ på menyen inleds med taggen <OPTIONS>. Titta på exemplet.

Kod	Resultat
`Vad heter Englands drottning?<BR> <FORM> <SELECT NAME=Namn> <OPTION VALUE=TERJE>Terje <OPTION VALUE=ELISABETH>Elisabeth <OPTION VALUE=URBAN>Urban </SELECT> </FORM>`	Vad heter Englands drottning?

Taggen <SELECT> har några attribut.

NAME Namnet på menyn. Obligatoriskt.

SIZE Bestämmer hur många alternativ som visas samtidigt. Standardvärdet är 1 och då får man en popup-meny (titta på föregående exempel).

MULTIPLE Behöver inget värde. Anger att man ska kunna välja mer än ett alternativ. Detta görs genom att hålla CTRL-knappen nera samtidigt som man klickar.

Kod Resultat

Var bor dina föräldrar?<BR> <FORM> <SELECT NAME="Föräldrar" SIZE="5" MULTIPLE> <OPTION VALUE=SKÅNE SELECTED>SKÅNE <OPTION VALUE=HALLAND>HALLAND <OPTION VALUE=MEDELPAD>MEDELPAD <OPTION VALUE=LAPPLAND>LAPPLAND <OPTION VALUE=ÖVRIGT>ÖVRIGT </SELECT> </FORM>
Var bor dina föräldrar?

Ett formulärsvar på ovanstående meny kan se ut så här:
Föräldrar=SKÅNE
Föräldrar=LAPPLAND

Sändknapp

När användaren fyllt i ditt formulär ska han/hon klicka på en knapp som sänder formuläret på det sätt du bestämt med ACTION-attributet i taggen <FORM>. Titta på exemplet och se hur man gör en sändknapp.

Kod	Resultat
`<FORM> <INPUT TYPE=SUBMIT VALUE="SKICKA TILL MIG"> </FORM>`

Ångerknapp

Det är enkelt att göra en knapp som tömmer formuläret. Användaren får då börja ifyllandet på nytt. Se hur knappen rensar textrutan här nedan.

Kod	Resultat
`<FORM> <INPUT TYPE=TEXT><BR> <INPUT TYPE=RESET VALUE="Återställ formuläret"> </FORM>`

Huvud- meny	Prov på lektionen	Nästa lektion

METHOD	Anger hur informationen ska skickas vidare. Attributet kan ha värdena GET eller POST. GET innebär att all information läggs ihop till en lång sträng. Vissa CGI-program vill ha det så. Det vanligaste är POST som alltid används när informationen ska skickas med e-mail. Det är dock GET som är standard och gäller om du glömmer attributet.
ENCTYPE	Anger hur informationen ska formateras. Om formuläret ska skickas med e-mail ska ENCTYPE ha värdet TEXT/PLAIN. Då skickas den som vanlig text. Om du skickar formuläret till ett CGI-program bestämmer detta själv vilket värde ENCTYPE kommer att få och attributet kan utelämnas.

NAME	Namnet på menyn. Obligatoriskt.
SIZE	Bestämmer hur många alternativ som visas samtidigt. Standardvärdet är 1 och då får man en popup-meny (titta på föregående exempel).
MULTIPLE	Behöver inget värde. Anger att man ska kunna välja mer än ett alternativ. Detta görs genom att hålla CTRL-knappen nera samtidigt som man klickar.

Kod	Resultat
`Var bor dina föräldrar?<BR> <FORM> <SELECT NAME="Föräldrar" SIZE="5" MULTIPLE> <OPTION VALUE=SKÅNE SELECTED>SKÅNE <OPTION VALUE=HALLAND>HALLAND <OPTION VALUE=MEDELPAD>MEDELPAD <OPTION VALUE=LAPPLAND>LAPPLAND <OPTION VALUE=ÖVRIGT>ÖVRIGT </SELECT> </FORM>`	Var bor dina föräldrar?