Att skapa formulär på en Internet web-sida

Formulär

Detta dokument förklarar hur man skapar formulär på en Internet web-sida.

Så här långt i kursen har vi lärt oss att lägga ut information på internet, men detta är bara ett första steg. Det är viktigt att även kunna få till sig information ifrån en web-användare. Detta görs med hjälp av formulär.

Innehållsförteckning

Ett Enkelt Formulär
De fem kommando som används för att skapa formulär i ett HTML dokument:
INPUT kommandot används för att:
1. Skapa en ruta för text
2. Skapa en ruta för hemlig text (e.g. lösenord)
3. Skapa en utför- eller raderaknapp
4. Skapa en lista där endast ett val kan göras (sk radio-buttons)
5. Skapa en lista där flera val kan göras (sk check-box)
SELECT och OPTION kommandona används för att:
TEXTAREA kommandot används för att:
1. Skapa en flerradig ruta för text

Ett Enkelt Formulär

Här ser vi ett enkelt formulär.

<FORM METHOD=POST ACTION=http://www.sunet.se/cgi-bin/searchkat>
<INPUT type=TEXT name=string>
<INPUT type=SUBMIT>
</FORM>

Formuläret börjar med <FORM> kommandot och slutar med </FORM>. Kommandot innehåller adressen till programmet som ska exekveras med formulärets innehåll som input (i detta fall är det sunets sökverktyg).

Formuläret har ett text input fält och en utförknapp.

Här ser du hur exemplet ser ut. Det fungerar - skriv in ett sök begrepp (t.ex april system design) och klicka på utförknappen.

Formulär Kommando

FORM kommando

Ett formulär skapas med <FORM> kommandot.

<FORM> ... </FORM>

Detta är huvudkommandot för att skapa ett formulär. Alla andra formulärkommandon måste stå innanför detta <FORM> kommando. Ett HTML dokument kan innehålla flera <FORM> .... </FORM> kommando; se bara till att dom ej överlappar varandra.

<FORM ACTION=programnamn>

Attributen ACTION specificerar hantering av formuläret - addressen (URL) till programmet som ska exekveras med formulärets innehåll som input eller en epostadress.

I följande exempel skickas formulärets innehåll via epost till Carolina:
<FORM action="mailto:carolina@april.se" method=post>

I följande exempel skickas formulärets innehåll till ett CGI-program på web-servern:
<FORM action="http://altavista.digital.com/cgi-bin/query" method=get>

Programmet på web-servern använder oftast CGI format (Common Gateway Interface) och kallas därför för CGI-program. CGI är ett standard på alla web-servrar. Vissa andra web-servrar implementerar sitt eget gränssnitt utöver CGI, som ActiveX ISAPI på Microsofts Internet Information Server och NSAPI på Netscapes web-server. JSP-program (Java Server Pages) blir mer och mer vanligt på moderna web-servrar. Programnamnet kan vara en hel URL, men om programmet och formuläret ligger på samma web-server räckar det men en relativ URL.

<FORM METHOD=POST el. GET>

Attributen METHOD specificerar hur formulärets innehåll skickas till web-servern. Om METHOD=GET används, kommer formulärets innehåll att läggas på slutet av CGI-programmets URL och skickas till web-servern tillsammans. Om METHOD=POST används, kommer först URL:n att skickas till web-servern och följs direkt av formulärets innehåll. Vilken metod som ska användas bestäms av vilka metoder som stöds av CGI-programmet. Om bägge stöds, eller om man ska skriva ett nytt program föredras METHOD=POST.

INPUT kommando - text

INPUT kommandot används för att skapa ett input fält i ett formulär. Kommanot bör följas av en type= attribut, men om attributen ej anges blir det automatiskt type=text.

<INPUT TYPE=TEXT>: Detta kommando används för att skapa ett text input fält.
<INPUT TYPE=TEXT SIZE=tecken>: Man kan tillägga SIZE= attributen för att specificera fältets storlek i antal tecken.
<INPUT TYPE=TEXT NAME=namn>: När formulärets innehåll skickas till programmet, måste detta kunna skilja mellan alla fält. Därför används NAME= attributen för att döpa varje individuellt fält.

Namn: <input type=text size=45 name="Name">

Namn:

<INPUT TYPE=TEXT VALUE=innehåll>: När formuläret visas upp för första gången, är alla fält vanligtvis tomma. Om man ej vill ha ett tomt fält, används VALUE= attributen för att specificera innehållet. Innehållet kan senare ändras av användaren.

Land: <input type=text size=30 name="Country" value="Sverige">

Land:

INPUT kommando - lösenord

<INPUT TYPE=PASSWORD>: Detta kommando används för att skapa ett hemlig-text input fält. När man skriver i detta fält, syns ej bokstäverna. Detta används oftast för lösenord.
<INPUT TYPE=PASSWORD SIZE=tecken> <INPUT TYPE=PASSWORD NAME=namn> <INPUT TYPE=PASSWORD VALUE=innehåll>: Dessa attributer har samma funktion som i TYPE=TEXT.

Lösenord: <input type=password size=8 name="Password">

Lösenord:

INPUT kommando - knapp

<INPUT TYPE=SUBMIT>: Detta kommando används för att skapa en utförknapp. När man klickar på den, skickas formulärets innehåll ifrån web-läsaren till web-servern.
<INPUT TYPE=RESET>: Detta kommando används för att skapa en raderaknapp. När man klickar på den, raderas alla formulärs fält.
<INPUT TYPE=submit/reset VALUE=text>: Detta kommando används för att sätt text i en knapp.

Här har vi utökat vårt enkla exempel. Vi har tillagt en raderaknapp och satt svensk text i knapparna.

<FORM METHOD=POST ACTION=http://www.sunet.se/cgi-bin/searchkat>
<INPUT type=TEXT name=string>
<INPUT type=SUBMIT value="Sök">
<INPUT type=RESET value="Radera">
</FORM>

Så här ser det ut. Prova det, det fungerar !

INPUT kommando - radio

<INPUT TYPE=RADIO>: Detta kommando används för att skapa en lista där endast ett val kan göras (sk radio-buttons).

Jag bor i:  
<input type=radio name="Home1" value="Sverige">Sverige.
<input type=radio name="Home1" value="Norge">Norge.
<input type=radio name="Home1" value="Finland">Finland.
<input type=radio name="Home1" value="Danmark">Danmark.
<input type=radio name="Home1" value="Annat">Nå'n annanstans.

Jag bor i:

Sverige. Norge. Finland. Danmark. Nå'n annanstans.

<INPUT TYPE=RADIO CHECKED>: När formuläret visas upp för första gången, är ingen enhet i listan vald. CHECKED attributen tillägges för att välja en enhet i förväg. Användaren har möjlighet att välja bort detta.

<input type=radio name="Home1" value="Sverige" checked>Sverige.

Jag bor i: Sverige. Norge. Finland. Danmark. Nå'n annanstans.

AltaVista sökverktyg:

Ett fungerande exempel som använder Digitals AltaVista sökverktyg. Radio-knappar används för att välja om det ska söka information i "world wide web" eller "news groups".

<FORM method=GET action="http://altavista.digital.com/cgi-bin/query">
<INPUT TYPE=hidden NAME=pg VALUE=q>
Sök i Web <INPUT TYPE=radio NAME=what VALUE=web CHECKED> 
eller News Groups <INPUT TYPE=radio NAME=what VALUE=news><BR>
<INPUT NAME=q size=60 maxlength=200>
<INPUT TYPE="SUBMIT" value="Sök" Name=Submit>
</FORM>

INPUT kommando - checkbox

<INPUT TYPE=CHECKBOX>: Detta kommando används för att skapa en lista där flera val kan göras (sk check-box).

Jag kan följande operativsystem:
<input type=checkbox name="MS-DOS">MS-DOS.
<input type=checkbox name="Windows">Windows.
<input type=checkbox name="Windows95">Windows95.
<input type=checkbox name="UNIX">UNIX.

Jag kan följande operativsystem:

MS-DOS. Windows. Windows95. UNIX.

<INPUT TYPE=CHECKBOX CHECKED>: När formuläret visas upp för första gången, är ingen enhet i listan vald. CHECKED attributen tillägges för att välja en enhet i förväg. Användaren har möjlighet att välja bort detta.

<input type=checkbox name="Windows" checked>Windows.

Jag kan följande operativsystem: MS-DOS. Windows. Windows95. UNIX.

SELECT kommando

<SELECT> ... </SELECT>: Detta kommando används för att skapa en rullgardins-meny eller lista. Som standard får man en rullgardins-meny, klickar man på menyn visas alla val. En OPTION rad används innanför SELECT kommandot för varje menyval som finns.
<SELECT NAME=namn>: När formulärets innehåll skickas till programmet, måste detta kunna skilja mellan alla fält. Därför används NAME= attributen för att döpa varje individuellt fält.

<SELECT name="Country">
<OPTION>Sverige
<OPTION>Norge
<OPTION>Danmark
<OPTION>Finland
<OPTION>England
<OPTION>Frankrike
<OPTION>Tyskland
<OPTION>Spanien
<OPTION>Italien
</SELECT>

<SELECT SIZE=rader>: Med hjälp av SIZE attributen görs rullgardinsmenyn om till en lista. Här visas då flera rader samtidigt. Om listan innehåller fler optioner än rader, kommer listan att kunna scrollas.

<SELECT name="Country" size=5>

<SELECT MULTIPLE>: Som standard kan bara en option i en rullgardinsmeny eller lista väljas. Med hjälp av MULTIPLE attributen kan flera val göras ifrån samma lista.

<SELECT name="Country" size=5 multiple>

OPTION kommando

<OPTION>: Kommandot OPTION används innanför SELECT kommandot för varje menyval som ska finnas.

<OPTION SELECTED>: När formuläret visas upp för första gången, är ingen enhet i listan vald. SELECTED attributen tillägges för att välja en enhet i förväg. Användaren har möjlighet att välja bort detta.

<OPTION SELECTED>Danmark

TEXTAREA kommando

<TEXTAREA> ... </TEXTAREA>: Detta kommando används för att skapa ett flerradigt text input fält.
<TEXTAREA COLS=tecken>: Man kan tillägga COLS= attributen för att specificera fältets vidd i antal tecken.
<TEXTAREA ROWS=rader>: Man kan tillägga ROWS= attributen för att specificera fältets radantal.
<TEXTAREA NAME=namn>: När formulärets innehåll skickas till programmet, måste detta kunna skilja mellan alla fält. Därför används NAME= attributen för att döpa varje individuellt fält.

<textarea name="Message"></textarea>

<textarea rows=5 cols=50 name="Message"></textarea>

<TEXTAREA> innehållet </TEXTAREA>: När formuläret visas upp för första gången, är textfältet blankt. Om fältet istället ska innehålla text när det visas upp, skall denna placeras emellan <TEXTAREA> och </TEXTAREA>.

<textarea rows=5 cols=50 name="Message">Skicka mig information om dina produkter.</textarea>

Uppdaterad 19:e november 2000