Zetterström

Formulär

Märket <ISINDEX>

Med märket <ISINDEX> kan man få upp ett fält på en rad för textinmatning. Antalet tecken som ska kunna tas emot begränsas inte av standarden. Det räcker med att helt enkelt bara lägga in märket <ISINDEX> i sin HTML-kod för att få upp ett sådant fält, men om man vill ha någon text framför fältet, exempelvis "Sök efter:" kan man ange det med

<ISINDEX PROMPT="Sök efter:">

För att man ska vara säker på att informationen som skrivits in skickas på rätt sätt måste man använda en http adress, det vill säga hemsidan måste ligga på en server vars adress börjar med "http://". I sådana fall skickas informationen till servern direkt efter sidans adress. Om sidan har följande adress:

http://www.min.server.se/sida.html

Och man skriver in följande text i textfältet "billiga och bra program för PC" skickas följande information till servern:

http://www.min.server.se/sida.html?billiga+och+bra+program+för+PC

Vad som därefter händer med informationen är helt upp till servern där det finns ett skript som tar hand om informationen. Antingen ett CGI-script (som är det vanligaste) eller ett ASP-Script, beroende på vad det är för server. Dessa skript är inte HTML och tas inte upp i detta dokument.

Märket <FORM>

Då man vill skapa mer avancerade formulär kan man använda sig av märket <FORM>. Där kan man ange ACTION, vilket är mycket viktigt. Det kan antingen vara en länk till ett skript eller en mailto: länk. Om man väljer en mailto-länk skickas helt enkelt ett brev till den e-post-adress man anger.

Om man vill kan man ange METHOD som kan vara antingen GET eller POST, vad man ska välja beror lite på hur skriptet som tar emot informationen fungerar. Om man inte anger något används GET men för mailto-länkar rekommenderas POST.

Med ENCTYPE kan man tala om för webläsaren hur man vill att informationen från formuläret ska kodas innan det skickas iväg. Om man vill ta emot den i ett brev så kan det vara trevligt att ha valt "text/plain", normalt används "application/x-www-form-urlencoded".

Formuläret avslutas med </FORM>

Märket <INPUT>

Ett formulär är inte mycket att ha om det inte finns någon sorts fält där man kan skriva in information. Det är där märket <INPUT> kommer in i bilden; med det kan man nämligen skapa textfält, knappar, radioknappar med mera. Vilken sorts inmatning man vill ta emot ställs in med TYPE.

TYPE="TEXT" är det normala, man får upp en rad där besökaren kan skriva i text. Det går att ställa in storleken på fältet med SIZE= och antalet tecken, med MAXLENGTH= kan man ange hur många tecken användaren får skriva in. SIZE och MAXLENGTH är alltså helt åtskilda. Om man så önskar kan man använda sig av VALUE= för att ange det värde som fältet ska intieras med. Med NAME= ger man fältet ett namn, det är en fördel att göra det eftersom det underlättar när man ska titta igenom den information användaren skrivit in.

<INPUT TYPE="TEXT" SIZE=60 MAXLENGTH=70 VALUE="Skriv ditt namn" NAME="namn">

TYPE=PASSWORD skiljer sig inte mycket från TYPE=TEXT förutom att besökaren inte får se vad han skriver in. Vanligtvis visas tecknet '*' istället för den bokstav/siffra som skrivits in vilket kan vara bra om man vill att besökaren exempelvis ska använda ett lösenord eftersom det kan finnas andra i närheten som inte bör se lösenordet.

<INPUT TYPE="PASSWORD" SIZE=50 MAXLENGTH=200 NAME="hemligt meddelande">

TYPE="CHECKBOX" består av en liten ruta som besökaren kan klicka i, den kan alltså vara på eller av. För att initiera den till på, det vill säga med ett kryss i, lägger man till CHECKED. Med VALUE anger man vad som ska skickas om rutan är ikryssad.

<INPUT TYPE=CHECKBOX NAME="Svar">

TYPE="RADIO" påminner om TYPE="CHECKBOX", men skillnaden är att det vanligtvis finns minst två radioknappar och att endast en kan vara markerad åt gången. Givetvis kan man skapa flera grupper av radioknappar som inte hör ihop och då är en i varje grupp markerad. För att få två eller fler knapparna att höra ihop anger man samma namn (NAME) för alla knapparna. Man ska också komma ihåg att använda CHECKED för att initiera en knapp i varje grupp som vald. För att man ska veta vad besökaren valt måste man ange VALUE specifikt för varje knapp.

Ålder:<BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE="<15">Under 15<BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE="15-30" CHECKED>15-30<BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE=">30">Över 30<BR>

TYPE="SUBMIT" används för att skapa en knapp för att skicka iväg alla information som skrivits in i formuläret. Man anger knappens text i VALUE="knapptext". Om man vill skapa flera olika knappar för att skicka iväg all ifylld information kan man även ange NAME för de olika knapparna. Vill man bara ha en knapp är detta totalt onödigt.

<INPUT TYPE="SUBMIT" VALUE="Skicka iväg">

TYPE="IMAGE" kan användas istället för TYPE="SUBMIT" om man vill låta besökaren klicka på en bild istället för en knapp. X-, och Y-koordinaterna för var besökaren klickade skickas med. Man använder sig av SRC="" för att ange den bild man vill visa. Observera att bilder istället för knappar kan orsaka problem för de besökare som använder sig av webläsare som inte stöder grafik.

Med TYPE="RESET" kan man skapa en knapp som återställer alla fält till dess initieringsvärden. Med VALUE="knapp text" kan man ställa in texten för knappen.

TYPE="FILE" låter användaren skicka med en fil. Vanligtvis visas detta objekt som ett textfält och en knapp. Den synliga bredden av fältet kan ställas in med SIZE= bredd i tecken.

Här följer ett exempel i HTML-kod som låter besökaren på en hemsida fylla i information om sig själv och skriva ett meddelande till mig.

<HTML>
<HEAD><TITLE>Form och Input</TITLE></HEAD>
<BODY>

<FORM ACTION="mailto:jonny@zetterstrom.net" 
METHOD="POST" ENCTYPE="text/plain">
Namn: <INPUT TYPE="TEXT" SIZE=60 MAXLENGTH=70 
VALUE="Skriv ditt namn här" NAME="namn"><BR>
Ålder: <BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE="<15">Under 15<BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE="15-30" CHECKED>15-30<BR>
<INPUT TYPE="RADIO" NAME="ålder" VALUE=">30">Över 30<BR>
Hemligt meddelande: <INPUT TYPE="PASSWORD" SIZE=50 
MAXLENGTH=200 NAME="hemligt meddelande"><BR>
Jag förväntar mig ett svar:
<INPUT TYPE="CHECKBOX" NAME="Svar"><BR>
<CENTER><INPUT TYPE="SUBMIT" VALUE="Skicka iväg">
<INPUT TYPE="RESET" VALUE="Rensa"></CENTER>

</FORM>

</BODY>
</HTML>

Resultatet ser ut så här:

Namn:
Ålder:
Under 15
15-30
Över 30
Hemligt meddelande:
Jag förväntar mig ett svar: