Formulär är en speciell del av ett HTML-dokument, som liknar ett pappersformulär, eller blankett, som ger användaren möjlighet att mata in information. Ett elektroniskt formulär kan liksom ett pappersformulär ha kryssbara rutor och fält där man kan fylla i text. Man kan ha vanlig HTML-kod både före och efter formuläret. Det går också bra att ha text, rubriker, listor, tabeller och så vidare inuti formulär, vilket gör det möjligt att utforma formulären så att de blir lätta att använda.
Det behövs bara fem olika märken för formulär i HTML 3.2, men tack vare att märkena kan ha flera olika attribut har man stora möjligheter att utforma formuläret som man vill ha det.
Med detta märke anger man när ett formulär börjar och slutar. Det finns tre attribut till detta märke:
ACTION
Detta attributs värde är den URL som ska anropas när användaren är klar med formuläret och ska
skicka iväg det. Använder man sig av manus är det vilket CGI-manus som ska ta emot informationen.
Man kan också ange en URL med metoden "mailto:". Då får man formulärets imformation skickat
till sig som e-post. Då behöver man inte skriva något CGI-manus för att ta hand om informationen,
men man kan då inte ge användaren något direkt svar på informationen. Olika webbläsare kan
utforma informationen i e-brevet på olika sätt, så att det kan bli bersvärligt att gå igenom
informationen efteråt.
Vissa internet-leverantörer, t.ex. Telia, tillåter inte att man lägger upp CGI-manus, på grund av
säkerhetsbestämmelser, på deras servrar och då är man tvungen att använda sig av metoden
"mailto:" för att ta emot informationen.
Vissa e-postprogram klarar inte av att hantera formulär, t.ex. vet jag av egen erfarenhet att
Microsofts Internet-mail inte klarar av det, medan deras nyare e-postprogram Outlook Express
däremot gör det.
METHOD
Med detta attribut bestämmer man vilken metod som skall användas för att skicka formulärets
information till manuset eller e-posten. De två alternativen är GET (förvalt) och POST.
ENCTYPE
Med ENCTYPE anger man vilken mediatyp som ska användas för att koda information från
formuläret innan den skickas från webbläsaren till manuset. Det är inte fråga om att kryptera
informationen utan om att t.ex. specialtecken byts ut mot teckenkoder.
Använder man "mailto:" bör metoden "text/plain" anges. Om man använder ett vanligt manus (med URL-metoden "HTTP:") behöver man inte ange ENCTYPE. Metoden som används ("application/x-www-form-urlencoded") är nämligen förvald.
Med följande HTML-fragment skapas ett formulär vars innehåll skickas till manuset manus.cgi med metoden POST när användaren är klar med manuset:
<FORM ACTION="manus.cgi" METHOD="POST"> ... </FORM>
Om man istället vill att innehållet ska ska skickas till e-postadressen karlsson.robert@vetlanda.mail.telia.com skriver man:
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> ... </FORM>
Detta märke använder man för att skapa de flesta typerna av formulärobjekt (textareor och listor skapas dock med egna märken). Märket kan ha sammanlagt åtta olika attribut, vilka är olika för olika typer av formulärobjekt. De vanligaste attributen är:
TYPE
Med värdet på detta attribut avgör man vilken sorts objekt man vill skapa. Skriver man
TYPE=TEXT skapas ett textfält.
NAME
Med detta attribut anger man namnet på objektet. Detta namn används när webbläsaren skickar
formulärets innehåll till sitt manus eller e-post. Geenom att man ger flera objekt samma namn
bildar de en grupp. Msn grupperar ofta kryssrutor och radioknappar på detta sätt.
VALUE
Med detta attribut anger man objektets värde. Om objektet är en kryssruta, t.ex., avgör detta
attribut vilket värde som skickas när rutan är ikryssad. Om man har gjort en grupp med samma namn
måste de ha olika värden på attributet VALUE annars är det inte möjligt att skilja på objekten.
När formulärets innehåll skickas kodas objektens värden på olika sätt beroende vilken typ av objekt de är. Om man t.ex har skapat en kryssruta med NAME=Webbläsare och VALUE=Internet Explorer som är ikryssad skickas texten "Webbläsare=Internet Explorer" till manuset eller e-posten.
Oservera att <INPUT> inte kan innehålla något och alltså inte har något slutmärke.
Rutor där man kan skriva in text på en rad är den vanligaste typen av formulärobjekt.
Attributet TYPE har det förvalda värdet TEXT, så det är inte nödvändigt att ange typen för
vanliga textfält (men det skadar inte att göra det ändå).
TYPE=TEXT har ett obligatoriskt attribut, NAME, och tre frivilliga attribut, SIZE, MAXLENGHT och
VALUE.
NAME
Detta är textfältets namn. Det namn som anges här kommer att skickas tillsammans med den
inmatade texten i fältet.
SIZE
Detta frivilliga attribut avgör hur många tecken brett fältet ska vara på skärmen. Ifall
användaren skriver in fler tecken än det får plats i fältet rullas fältet precis som vanliga
textfält. Fältet bör inte vara större än 72 punkter för att få plats i alla webbläsares fönster.
Ifall man vill ta emot längre texter av läsarna bör man använda textareor.
MAXLENGTH
Med detta frivilliga attribut anger man hur många tecken användaren får skriva i fältet. Om
det inte anges någon maximal längd finns det ingen gräns för hur lång texten får vara.
VALUE
Detta frivilliga attribut anger fältets förvalda innehåll.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> Vad heter du? <INPUT TYPE=TEXT NAME="namn" SIZE=20><BR> Hur gammal är du? <INPUT TYPE=TEXT NAME="ålder" MAXLENGTH=3 SIZE=5><BR> På vilket humör är du? <INPUT TYPE=TEXT NAME="humör" VALUE="glad" SIZE=10> </FORM>
När denna information skickas kommer den att kodas som "namn=läsrarens namn", "ålder=läsarens ålder, max tre siffror", och "humör=glad".
Denna typ av fält fungerar precis som vanliga textfält, men texten användaren skriver visas inte på skärmen. Alla attribut är desamma som för typen TEXT
När informationen skickas krypteras den inte på något sätt, så den är inte säker bara för att den inte syns på skärmen när man skriver den. Informationen skickas i klartext via internet och kan alltså läsas av illvilliga personer.
<H3>Kontroll av lösenord</H3> <FORM ACTION="manus.cgi" METHOD="POST"> Skriv in lösenordet: <INPUT TYPE=PASSWORD NAME="kontroll" MAXLENGTH=8 SIZE=8> </FORM>
Formulärobjekt med typen SUBMIT visas oftast som tryckknappar. När användaren klickar på den skickas formulärets innehåll till manuset eller via e-post. Det går bra att ha flera sändknappar i samma formulär. Om man ger knapparna attributet NAME ges det besked om vilken knapp användaren använde. Objektypen har inga obligatoriska attribut, men har de två frivilliga attributen NAME och VALUE.
NAME
Detta frivilliga attribut anger namnet på den grupp objekt knappen ingår i. Om inte detta
attribut anges skickas ingen information om knappen till manuset. Om knappen ges ett namn,
kommer namnet att skickas till manuset tillsammans med knappens värde när användaren klickar på
den.
VALUE
Med detta frivilliga attribut bestämmer man texten som visas på knappen (den förvalda texten
beror på webbläsaren, men den brukar vara Submit. Om knappen har givits ett namn skickas
dessutom värdet till manuset om användaren klickar på knappen.
Attributet NAME används här för att specificera en grupp av knappar, inte för att ge viss knapp ett namn.
<H3>Vad tycker du om formulär?</H3> <FORM ACTION="manus.cgi" METHOD="POST"> <INPUT TYPE=SUBMIT NAME="knapp" VALUE="Bra"> <INPUT TYPE=SUBMIT NAME="knapp" VALUE="Dåligt"> </FORM>
Om formuläret innehåller ett stort antal objekt, kan det hända att användaren gör fel vid inmatningen och vill börja om från början. För att underlätta för läsarna kan man ta med en återställningsknapp i formuläret. Om användaren klickar på denna knapp återställer webbläsaren alla fält i formuläret till deras förvalda värden. Webbläsaren skickar ingen information till webbvärden eller till något manus när man väljer en återställningsknapp. Denna objekttyp har bara ett frivilligt attribut, nämligen VALUE.
VALUE
Med detta frivilliga attribut bestämmer man texten som skall visas på knappen (den förvalda
texten beror på webbläsaren, men den brukar vara Reset).
<H3>Vad heter Storbritaniens premiärminister?</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=TEXT NAME="svar" SIZE=20><BR><BR> <INPUT TYPE=SUBMIT VALUE="Skicka"> <INPUT TYPE=RESET VALUE="Radera"> </FORM>
Kryssrutor är objekt som antingen är påslagna (ifyllda) eller avstängda (tomma). De delas in i grupper, och man använder attributet VALUE för att skilja mellan olika kryssrutor i samma grupp, precis som i fallet med sändknappar. Objektypen har följande attribut:
NAME
Detta attribut är obligatoriskt och anger namnet på gruppen som kryssrutan ingår i.
VALUE
Detta attribut är obligatoriskt och anger värdet som ska skickas om kryssrutan är ifylld.
CHECKED
Detta attribut är frivilligt och anger om kryssrutan ska vara ifylld från början.
<H3>Vad tycker du man kan dricka till maten?</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=CHECKBOX NAME="tillmaten" VALUE="mjolk" CHECKED>Mjölk<BR> <INPUT TYPE=CHECKBOX NAME="tillmaten" VALUE="vatten">Vatten<BR> <INPUT TYPE=CHECKBOX NAME="tillmaten" VALUE="ol">Öl<BR> <INPUT TYPE=CHECKBOX NAME="tillmaten" VALUE="vin">Vin<BR> <INPUT TYPE=CHECKBOX NAME="tillmaten" VALUE="lask">Läsk<BR> </FORM>
I det här fallet hade värdet "tillmaten=mjolk" skickats. Om alla rutorna varit ikryssade hade värdet blivit "tillmaten=mjolk"&"tillmaten=vatten"&"tillmaten=ol"&"tillmaten=vin"&"tillmaten=lask", och om alla kryssrutorna varit tomma hade ingenting alls skickats.
Om man vill att avändaren bara ska kunna välja ett av flera alternativ kan man använda radioknappar. Radioknappar har samma attribut som kryssrutor, men en (och endast en) radioknapp i varje grupp måste vara förvald med attributet CHECKED.
<H3>Vilken TV-kanal tycker du är bäst?</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=RADIO NAME="tvkanal" VALUE="kanal1" CHECKED>Kanal 1<BR> <INPUT TYPE=RADIO NAME="tvkanal" VALUE="tv2">TV2<BR> <INPUT TYPE=RADIO NAME="tvkanal" VALUE="tv3">TV3<BR> <INPUT TYPE=RADIO NAME="tvkanal" VALUE="tv4">TV4<BR> <INPUT TYPE=RADIO NAME="tvkanal" VALUE="kanal5">Kanal 5<BR> </FORM>
Det går även bra att använda bilder i formulär. När användaren klickar på en bild skickas formulärets innehåll till manuset, så på sätt och vis fungerar de som sändknappar. Det genereras två värden: X- och Y-kordinaterna för den punkt användaren klickar på.
Det går alltså att använda en bild i ett formulär som en variant på en bild med en karta hos värdatorn, men det är oftast bättre att använda vanliga bilder. Man kan använda bildobjekt för att knappar med eget utseende. De attribut som denna typ av objekt kan ha är:
NAME
Detta attribut är obligatoriskt och anger namnet på bildobjektet
SRC
Detta attribut är obligatoriskt och anger bildfilens URL. Attributet används precis som i märket
IMG.
ALIGN
Detta attribut är frivilligt och bestämmer hur bilden ska justeras i förhållande till textraden
den förekommer i. De tillåtna värdena är TOP, MIDDLE, BOTTOM, LEFT och RIGHT.
<H3>Var någonstans i Sverige bor du?</H3> <FORM ACTION="manus.cgi" METHOD="POST"> <P>Klicka på din hemort på kartan:</P> <INPUT TYPE=IMAGE NAME="knapp" SRC="gifs/html/sverige.gif" ALIGN=TOP> </FORM>
Klicka på din hemort på kartan:
I detta fall skickas en sträng typ "sverige.x=56sverige.y=134 till manuset. Om man har ritat en egen knapp kan ditt manus med fördel strunta i koordinaterna som sänds.
Det kan hända att man ibland vill ha med värden från en webbsida till en annan. Om du till exempel vill att dina läsare ska svara på en enkät. På den första sidan får man fylla i namn, adress och ålder, beroende på vilken åldersgrupp de tillhör vill du visa olika formulär. Med hjälp av ett manus kan visa olika formulär för olika åldersgrupper, men när det andra formuläret skickas tillbaka från webbläsaren finns inte informationen med personuppgifter med. Om man vill att formulären skall vara så korta som möjligt och undvika att ha med samma fält i flera formulär, kan man använda sig av dolda fält. Dom dolda fälten har ett namn och ett värde, prercis som de flesta andra dialogobjekt. Det som skiljer är att de inte visas för användaren, så deras värden kan inte ändras. Webbläsaren skickar tillbaka namnet och värdet på dolda fält tillsammans med de andra fälten, och på så sätt kan manusen "komma ihåg" information från tidigare formulär.
<INPUT TYPE=HIDDEN NAME="aldersgrupp" VALUE="20-30">
när formuläret skickas in tas informationen "aldersgrupp=20-30" med
Man kan med hjälp av märket <TEXTAREA> skapa textfält som sträcker sig över fler än en rad. Det är bra att använda sig av om man vill låta användaren skriva långa svar eller kommentarer. Om man använder sig av textareor måste man ange slutmärket </TEXTAREA>. Det går bra att skriva ett förvalt innehåll för fältet mellan start- och slutmärkena. Innehållet i textareor visa ofta med ett teckensnitt som har fast teckenbredd. Detta märke har dom tre obligatoriska attributen:
NAME
Detta attribut är obligatoriskt och anger namnet på textarean
COLS
Detta attribut är obligatoriskt och anger bredden på textarean, mätt i antal tecken (kolumner).
De flesta webbläsare bryter automatiskt om den inmatade texten inte ryms på raderna.
ROWS
Detta attribut är obligatoriskt och anger textareans höjd, mätt i antal textrader. De flesta
webbläsare ger användaren möjlighet att skriva in mer än vad som ryms i textarean.
<H3>Gästboken</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <P>Skriv gärna in dig i gästboken!</P> Namn: <INPUT TYPE=TEXT NAME="namn" SIZE=20><BR> Hemort: <INPUT TYPE=TEXT NAME="hemort" SIZE=20><BR> Hemsida: <INPUT TYPE=TEXT NAME="hemsida" SIZE=30><BR> Rubrik: <INPUT TYPE=TEXT NAME="rubrik" SIZE=20><BR> <TEXTAREA NAME="texten" ROWS=5 COLS=40> Skriv din text här! </TEXTAREA> </FORM>
Skriv gärna in dig i gästboken!
Märket <SELECT> använder man för att skapa listor varifrån användaren kan välja ett eller flera element. Sedan anger man de olika elementen med märket <OPTION>, vilket jag går igenom efter detta. <SELECT> har tre olika attribut:
NAME
Detta attribut är obligatoriskt och anger namnet på listobjektet
SIZE
Detta attribut är frivilligt och bestämmer antal synliga listelement. Om SIZE=1 visas listan
ofta som en popup-lista. Om attributets värde är större än ett visas listan som en vanlig
listruta, med rullningslist om det behövs.
MULTIPLE
Detta attribut är frivilligt och om det anges kan användaren välja fler än ett av elementen i
listan.
Med märket <OPTION> skiljer man de olika elementen åt i en lista. Märket kan ha slutmärket </OPTION>, men det är inte nödvändigt att ange detta eftersom det är underförstått att ett element slutar när listan slutar eller när nästa element börjar. <OPTION> kan ha två attribut:
SELECTED
Detta attribut är frivilligt och anger att detta attribut är förvalt. Ifall inget element i
listan har attributet SELECTED antar vissa webbläsare att det första elementet är förvalt. Enligt
HTML 4.0 får de inte göra det.
VALUE
Detta attribut är frivilligt och det anges skickas dess värde istället för elementets text.
<H3>Favoritfrukter</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <P>Markera dina favoritfrukter i listan</P> <SELECT NAME="favoritfrukter" MULTIPLE=4> <OPTION VALUE=1>Banan <OPTION VALUE=2>Äpple <OPTION VALUE=3>Päron <OPTION VALUE=4>Apelsin <OPTION VALUE=5>Kivi <OPTION VALUE=6>Ananas <OPTION VALUE=7>Mandarin <OPTION VALUE=8>Papaya </SELECT> </FORM>
Om användaren väljer t.ex Banan och Päron kodas valet som "favoritfrukter=1"&"favoritfrukter=3". Om man inte anger attributen VALUE skulle valet ha kodats som "favoritfrukter=Banan"&"favoritfrukter=Päron".
Om man vill kan man byta ut "SUBMIT" och "RESET"-knapparna mot bilder i lagom storlek, för att få en snyggare knapp.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE="IMAGE" SRC="gifs/html/enve.gif" ALT="Brev" BORDER=0> </FORM>
Det är också möjligt att göra "Submit" och "Reset"-knapparna till klickningsbara länkar. Det åstadkommer man genom att i FORM-taggen ge attributet METHOD värdet "LINK" och attributet ACTION värdet den adress till vart man vill att knappen ska leda.
<FORM METHOD="LINK" ACTION="upp"> <INPUT TYPE=SUBMIT NAME="knapp" VALUE="Uppåt"> </FORM>
Trycker du på knappen kommer du en bit upp i dokumentet men det går givetvis lika bra att ha en länk till någon annan av dina sidor eller till någon annan hemsida.
ACTION="http://www.aftonbladet.se"
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999