Formulär i HTML

Innehåll

Formulär används för att hämta information från besökaren. På denna sida beskriv bl.a. hur formulär byggs upp, d.v.s. dess grundläggande struktur, hur innehållet i formulär skickas till webbservern och vilka element (kontroller) som kan finnas i ett formulär.

Hur innehåll hämtas från formulär i servlets och skriptsidor (JSP och PHP) behandlas i mina underwebbar Java och PHP.

Att göra

• Hur formulär byggs upp
• Sätt på vilket formulär kan skickas
• Element
  • Enradig textruta
  • Flerradig textruta
  • Textruta för lösenord
  • Dold textruta
  • Kryssruta
  • Radioknapp
  • Submit-knapp
  • Reset-knapp
  • Kommandoknapp
  • Listrutor
• Ett större exempel

Ett formulär består främst av tre delar

• taggen <form> som visar var formuläret börjar och slutar.
• kontroller som besökare fyller i - skapas med en eller flera av taggarna <input>, <textarea> och/eller <select>.
• Submit-knappen, som också den skapas med taggen <input>

Taggen <form> är, som nämnt ovan, den tagg som visar var formuläret börjar och slutar. M.h.a. taggens attribut talar man om var och hur formulärets innehåll ska skickas.

Var innehållet ska skickas anges i attributet action som en URL. URL:en kan peka på ett CGI-program, en (Java-)servlet eller en skriptsida (t.ex. JSP eller PHP).

Formulär kan skickas med metoderna GET eller POST, vilket anges genom att ge attributet method värdet "get" respektive "post". (Mer om GET och POST finns i nästa avsnitt.)

<h1>Ett enkelt formul&auml;r</h1>

<form method="post"
  action="html5_1_behandlat.php">

...

</form>

I ett (X)HTML-formulär kan finnas de flesta typer av (enkla) kontroller som kan finnas i ett Windows-program. Exempel på några är textrutor (enkelradiga och flerradiga), listrutor, kombinationsrutor, kryssrutor, radioknappar och "vanliga" knappar. (Kontrollerna beskrivs längre ner på hemsidan.)

<p>Fyll i ditt namn:<br />
  <input type="text" name="txtNamn"></p>

Submit-knappen är det som gör att formulärets innehåll skickas iväg när besökaren klickar på knappen. Ofta brukar Submit-knappen finnas i par med Reset-knappen, men det är inte obligatoriskt.

<p><input type="submit" value="Skicka"></p>

</form>

Exemplet nedan visa en textruta och en knapp med texten Skicka.

Observera att exempel ovan kräver en webbserver med stöd för PHP för att resultatet ska behandlas!

Formulär, eller snarare innehållet i formulärets kontroller, kan skickas på ett av två sätt: GET eller POST. Hur formuläret skickas anges genom att ange "get" eller "post" som värde till formulärets attribut method.

Om man istället ändrar metoden till POST så kommer innehållet i formuläret skickas som en del av kroppen på den begäran som webbläsaren gör till webbservern. D.v.s. vad som skickas är inte synligt för besökaren.

Denna metod är att föredra om innehållet i ett formulär innehåller ett lösenord eller mycket information. Det är dock ingen garanti att lösenordet inte blir avslöjat då lösenordet (oftast) ändå kommer skickas i klartext! Vad det gäller storleken på formulärets innehåll så finns det webbläsare och webbservrar som inte tillåter mer än en viss längd på URL:er. Om ett formulär skickar mycket data så är alltså POST det enda alternativet.

Metoden POST är även att föredra om en hemsida uppdaterar data i t.ex. en databas. Om besökaren skapar ett bokmärke/favorit till sidan så kommer bokmärket/favoriten inte att innehålla det som skickades med formuläret. Skälet till detta är att innehållet i formuläret skickades i kroppen på begäran som webbläsaren gjorde. Bokmärken/favoriter innehåller endast URL:en till hemsidan. Skaparen av servlet eller skriptsida kan då kontrollera om formulärets innehåll är tom och, om så är fallet, t.ex. skicka besökaren till formuläret.

Bägge formulär är de samma. Det som skiljer dem åt är värdet på attributet method i taggen <form> hur URL:en kommer se ut (se textfältet Address i Internet Explorer eller Location i Mozilla Firefox).

De flesta elementen (kontrollerna) i formulär skapas med taggen <input> och har inte en avslutande tagg. Det som avgör vilken typ av kontroll det ska vara är då attributet TYPE. För kontroller som bygger på taggen <input> har värdet på attributet type angivits i rubriken (t.ex. Enradig textruta - type="text").

De flerradiga textrutorna samt list- och kombinationsrutorna skapas med taggarna <textarea> respektive <select>. Den avslutande taggen är obligatorisk för bägge dessa taggar.

För varje kontroll visas först dess utseende sedan taggen, alla dess attribut samt exempelvärden för attributen. De attribut, utöver attributet type för taggen <input>, som är obligatoriska har markerats med texten [obl.] i förklaringen av attributen. (Attributen förklaras i ordningen: obligatoriska attribut först, attribut som bör användas därefter och sist de mindre frekvent använda attributen.)

HTML-kod

<input type="text" name="MinText" size="25" maxlength="25" value="Startvarde" />
<input type="text" name="MinText" size="25" maxlength="25" placeholder="Startvarde" />

• name - kontrollens namn [obl.]. Detta namn bör vara unikt om fler än en kontroll i formuläret.
• size - bredden på kontrollen i tecken.
• maxlength - antal tecken som besökaren tillåts fylla i.
• placeholder - text som kommer visas i kontrollen då hemsidan laddas, men som tas bort när fältet får fokus.
• value - text som kommer visas i kontrollen då hemsidan laddas.

Denna kontroll är ett undantag från regeln då den har en avslutande tagg (som är obligatorisk). Eventuell text som skrivs mellan taggarna kommer vara synlig i textrutan då hemsidan laddas.

Utseende

HTML-kod

<textarea name="MinArea" rows="5" cols="25">Startvarde</textarea>

• name - kontrollens namn [obl.]. Detta namn bör vara unikt om fler än en kontroll i formuläret.
• rows - höjden på kontrollen i antalet rader.
• cols - bredden på kontrollen i antal tecken.

Observera att denna kontroll inte bör användas om formulärets metod är satt till GET. Lösenordet kommer då att skickas i klarttext som en del av URL:en!

Utseende

HTML-kod

<input type="password" name="MittLosenord" size="25" maxlength="25" value="Startvarde" />

• name - kontrollens namn [obl.]. Detta namn bör vara unikt om fler än en kontroll i formuläret.
• size - bredden på kontrollen i tecken.
• maxlength - antal tecken som besökaren tillåts fylla i.
• value - text som kommer visas i kontrollen då hemsidan laddas.

Du kanske frågar dig "Vad ska jag med en dold textruta då besökaren inte kan fylla i något i den?". Skälet till att man har dolda textrutor är för att man i dynamiska webbsidor t.ex. ska kunna mellanlagra innehållet från formulär som besökaren besökt tidigare.

Utseende

HTML-kod

<input type="hidden" name="MinDold" value="Startvarde" />

• name - kontrollens namn [obl.]. Detta namn bör vara unikt om fler än en kontroll i formuläret.
• value - text som kommer visas i kontrollen då hemsidan laddas.

Avser något som bara kan anta två värden. Kryssrutor skiljer sig från kontrollerna ovan i att dess namn och värde skickas endast om kryssrutan är ifylld (förbockad).

Utseende

HTML-kod

<input type="checkbox" id="MittKryss0" name="MittKryss0" value="Kryssad0" />
<label for="MittKryss0">MittKryss0</label>

<input type="checkbox" id="MittKryss1" name="MittKryss1" value="Kryssad1" checked="checked" />
<label for="MittKryss1">MittKryss1</label>

För att kryssruta skulle fungera med CSS-ramverket jag valt för denna sida så var jag tvungen att lägga till id-attributet och en label-tagg.

• name - kontrollens namn [obl.]. Detta namn bör vara unikt om fler än en kontroll i formuläret.
• value - värde som ska skickas om kryssruta är ifylld. Om attributet inte används så skickas värdet "on".
• checked - om kryssruta ska vara ifylld eller inte när webbsida laddas. Detta attribut saknar värde.

Radioknappar brukar kopplas samma (de ges samma värde på attributet name) vilket gör det möjligt att endast kunna markera en av dem (se exempel 5.3 nedan).

Utseende

HTML-kod

<input type="radio" id="MinRadio" name="MinRadio" value="Markerad0" checked="checked" />
<label for="MinRadio">MinRadio0</label>

• name - kontrollens namn [obl.]. Detta namn behöver inte vara unikt - men grupper av radioknappar måste vara (se exempel nedan).
• value - värde som ska skickas om radioknapp är markerad.
• checked - om radioknapp ska vara ifylld eller inte när webbsida laddas. Detta attribut saknar värde.

I motsatts till kryssrutor så används radioknappar i grupper. För att skapa en grupp med radioknappar så ges radioknappar i gruppen samma värde på attributet name. Och för att avgöra vilken av radioknapparna (alternativen) som väljs används värdet på radioknapps value-attribut. Radioknappens betydelse visas lämpligen genom att text skrivs efter radioknappen, på så sätt kan radioknappar visas ovanför varandra (som i exempel nedan) oavsett längd på texterna.

Om vi vill att ett alternativ ska vara valt när formulär laddas så används attributet checked (utan värde) som i första gruppen. Men vi kan även låta inga av alternativen vara valda som i andra gruppen.

<form>

<p>Grupp 1</P>
<p>
  <input type="radio" id="a1" name="grupp1"
    value="1" checked="checked" />
  <label for="a1">Alternativ 1</label>
  <input type="radio" id="a2" name="grupp1"
    value="2" />
  <label for="a2">Alternativ 2</label>
  <input type="radio" id="a3" name="grupp1"
    value="3" />
  <label for="a3">Alternativ 3</label>
</p>

<p>Grupp 2</p>

<p>
  <input type="radio" id="b1" name="grupp2"
    value="Ja" />
  <label for="b1">Ja</label>
  <input type="radio" id="b2" name="grupp2"
    value="Nej" />
  <label for="b2">Nej</label>
</p>

</form>

En standardknapp som utlöser händelsen som skickar iväg formulärets innehåll till t.ex. CGI-program, servlet eller skriptsida för behandling.

Utseende

HTML-kod

<input type="submit" value="Skicka" name="MinSubmit" />

• value - text som komer synas på knapp. Om detta attribut utelämnas kommer webbläsaren visa text i stil med "Skicka" (eller "Submit" om engelsk version av webbläsare).
• name - kontrollens namn. Detta namn bör vara unikt om fler än en kontroll i formuläret. Att ange namnet på en Submit-knapp kan vara användbart om man vill ha två Submit-knappar i samma formulär där de två knapparna ska utför olika saker. "Mottagande" servlet eller skriptsida kan kontrollera vilken knapp som klickats på för att avgöra vad som ska göras, t.ex. uppdatera eller lägga till.

Knapp som återställer formulär till det tillstånd det var när sida laddades.

Utseende

HTML-kod

<input type="reset" value="&Aring;terst&auml;ll" name="MinReset" />

• value - text som kommer synas på knapp. Om detta attribut utelämnas kommer webbläsaren visa text i stil med "Återställ" (eller "Reset" om engelsk version av webbläsare).
• name - kontrollens namn. Främst användbart i samband med JavaScript.

Har bl.a. (liksom de andra två knapptyperna ovan) en händelse Click som kan kopplas till t.ex. en funktion i JavaScript (se exempel 5.3 nedan, och JavaScript-webb, där knapp används för att stänga fönster).

Utseende

HTML-kod

<input type="button" value="Klicka mig!" name="MinKnapp" onclick="javascript:alert('Du klickade på mig')" />

• value - text som kommer synas på knapp.
• name - kontrollens namn.
• onclick - (händelse-)attribut där (JavaScript-)logik kan kopplas.

Listrutor har en egen tagg - <select> - och kan vara nedrullningsbara (eng. drop-down list) eller inte. Det som styr om en listruta är nedrullningsbar eller inte är attributet size eller avsaknaden av attributet (standard idag är 1). Om size är 1 (eller utelämnas) så visas listruta nedrullningsbar och om size är större än 1 som en vanlig listruta med lika många rader som värdet på size. Listrutor namnges, liksom övriga kontroller, med attributet name i select- taggen.

De olika alternativen i listrutor markeras med taggen <option> inom select-taggen. Om antalet alternativ är fler än antalet rader som kan visas så kommer automatiskt en rullningslist att visas.

En nedrullningsbar listruta visar eventuellt valt alternativ och en knapp för att "rulla ner" lista med alternativ.

Utseende

HTML-kod

<select size="1" name="MinListruta">
  <option>Alternativ 1</option>
  <option>Alternativ 2</option>
  <option>Alternativ 3</option>
  <option>Alternativ 4</option>
    ...
</select>

Listor brukar som standard visas med 8 synliga alternativ.

Utseende

HTML-kod

<select size="5" name="MinListruta" multiple="multiple">
  <option>Alternativ 1</option>
  <option>Alternativ 2</option>
  <option>Alternativ 3</option>
  <option>Alternativ 4</option>
    ...
</select>

Listrutor tillåter även att man kan välja flera alternativ (genom att hålla ner CTRL-tangent och klicka). För att göra detta möjligt använder vi attributet multiple (utan värde!) i select-taggen. (Prova gärna i listrutan ovan.) Attributet multiple kan endast användas med icke-nedrullningsbara listrutor och användandet av attributet kommer automatiskt att konvertera taggen till en "vanlig" listruta (oavsett om size sätts till 1).

Om vi inte anger ett värde som ska skickas så kommer texten (innehållet) i option-taggen att skickas. Men ibland kan det vara mer praktiskt att skicka t.ex. ett tal (som t.ex. motsvarar en primärnyckel i en tabell) istället för en lång text. För att skicka ett annat värde, än det i option-taggen, använder vi attributet value i option-taggen. I exemplet nedan kommer t.ex. värdet "1" skickas istället för texten "Alternativ 1".

<select size="5" name="MinLista">
  <option value="1">Alternativ 1</option>
  <option value="2">Alternativ 2</option>
  ...
</select>

Observera att även om vi skriver ett tal så kommer värdet "1" att skickas som en sträng! Alla värden i formulär skickas nämligen som strängar och som vi måste konvertera till respektive datatyp (om det behövs) i hemsidan/programmet som tar emot formulärets innehåll.

Vi kan även låta ett av alternativen vara markerade som standard då hemsidan laddas (eller laddas om). För detta använder vi attributet selected (utan värde!) i den option-tagg som motsvarar det värde vi vill ha markerad. Nedrullningsbara listrutor kommer oftast att ha första alternativet i listan markerat som standard om man inte använder attributet selected. Följande kod

<select size="1" name="MinKombo">
  <option>Alternativ 1</option>
  <option selected="selected">Alternativ 2</option>
  ...
</select>

Nästa exempel är ett större formulär med textrutor (en och flera rader), sammankopplade radioknappar, kryssrutor och knappar för att skicka samt tömma formulär. För att se koden: titta på hemsidan och välj "Visa källa" (eller motsvarande i webbläsaren). Kräver en webbserver med stöd för ASP!