HTML

Formulär

Formulär ger oss möjlighet att i HTML skriva ut en blankett på skärmen som användaren kan fylla i och skicka in. Formuläret skickas till något program som ligger på din webbserver som i sin tur tar hand om formuläret och behandlar dess information. Här ser vi ett exempel på ett vanligt pappersformulär, och precis samma sak går att göra elektroniskt för att fyllas i på nätet.

Eftersom vi ännu inte har gått igenom den kod som behövs för att ta hand om formuläret på servern ska vi endast här visa hur själva HTML-koden för ett formulär ser ut.

Formuläret är alltså en form av elektronisk blankett med rutor för text, listor med val och andra sätt att kommunicera med webbsidan. Precis som ett vanlig blankett består ett formulär av rutor för att fylla i information i och text som förklarar vad varje ruta betyder. Dessutom behöver ett formulär ett sätt att skickas till mottagaren. För detta finns det speciella knappar. Här ska vi bygga upp ett enkelt formulär och titta lite på de märken som används.

Det vi ska skapa är ett enkelt formulär för inloggning. Det består av två rutor för att fylla i användarnamn och lösenord. Till dessa ska det också finnas en förklarande text. Dessutom lägger vi till en knapp för att skicka iväg formuläret. Hela formuläret är inom elementet FORM och varje del består av en INPUT. De INPUT som vi skriver vanlig text i ser ut enligt :

och vill vi inte se texten som text som i fallet med lösenord blir det istället :

Attributet SIZE anger hur många tecken som får synlig plats i en ruta (vilket tecken är dock lite osäkert :-).

Knappen för att skicka ser lite annorlunda ut. Dels är dess typ (TYPE) submit och dels måste den ha värdet på VALUE satt till det som ska stå på knappen.

Vi lägger hela formuläret och dess olika delar i en tabell, med en del i varje tabellcell. Med del här menas förklarande text, inmatningsruta eller knapp. Tabellen har 3 rader och 2 kolumner vilket kommer att fungera som följande skiss:

Här följer koden för hela exemplet:

<FORM METHOD="post" ACTION="login.php">     

<TABLE>

<TR>

	<TD> 

		Användarnamn

	</TD>

	<TD>

		<INPUT TYPE="text" NAME="username" SIZE="32">

	</TD>

</TR>



<TR>

	<TD> 

		Lösenord

	</TD>

	<TD>

		<INPUT TYPE="password" NAME="password" SIZE="32">

	</TD>

</TR>



<TR>

	<TD COLSPAN="2">

		<INPUT TYPE="submit" NAME="login" VALUE="Logga in">

	</TD>

</TR>

</TABLE>

</FORM>

Resultatet blir ett enkelt formulär

I sista tabellcellen TD står det

vilket betyder att denna cell ska sträcka ut sig över två kolumer. COLSPAN står alltså för hur många kolumner en viss cell ska ta upp i sidled. Det finns också ROWSPAN som betyder hur många rader en cell ska sträcka sig över. Om man inte skriver något värde för dessa attribut antar cellen sin naturliga form, alltså en rad hög och en kolumn i bred.

Just det här formuläret använder sig av http-metoden POST för att skicka formuläret som en förfrågan till något program, i det här fallet login.php (som i sin tur är ett PHP-skript, vilket vi kommer att ta upp senare i kursen). Om man försöker skicka iväg något via formuläret anropas en sida som just nu inte finns och det blir fel. Prova gärna för att se hur det ser ut! POST är ett av de sätt som finns för att skicka data från ett formulär. Under senare delar i kursen tar vi upp detta närmare och även vad som händer på andra sidan. Men för stunden räcker det att veta att all data från formuläret skickas iväg någonstans för att behandlas.

SELECT, OPTION och TEXTAREA är ett par andra alternativ som finns för formulär. SELECT ger användaren möjlighet att välja från en lista och OPTION är valen i den listan. TEXTAREA är till för att skriva in mer text än vanlig INPUT TYPE="text" och är vanligtvis en flera rader stor yta att skriva på.

För att gruppera ihop olika fält i ett formulär går det att använda sig av elementen FIELDSET och LEGEND. Detta ger en överskrift och rutar in olika sektioner i ett formulär.