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.
Beskriv taggen <label> samt lägg till den i alla
exempel (för att få godkänt på tester i Lighthous i Google Chrome ;-)).
Placera kodexempel i taggen <code> för att göra dem
tydligare.
Ett formulär består främst av tre delar
<form><input>,
<textarea> och/eller <select>.<form>Taggen <form> är, som nämnt ovan, den tagg
som visar var formuläret börjar och slutar samt dess attribut
används för att tala om var och hur formulärets innehåll ska skickas.
De mest använda attributen är:
action/minsida.php
eller https://kiltedviking.net/minsida.php.methodname
<h1>Ett enkelt formulär</h1>
<form method="post"
action="html5_1_behandlat.php">
...
</form>
I ett HTML-formulär kan finnas de flesta typer av (enkla) kontroller som kan finnas i ett program på dator. Exempel på några är textrutor (enkelradiga och flerradiga), listrutor, nedrullningsbara listrutor, kryssrutor, radioknappar och "vanliga" knappar. (Kontrollerna beskrivs längre ner på hemsidan.)
<label for="mintext">Fyll i ditt namn:</label>
<input type="text" name="mintext"></p>
submit)Skickaknappen är det som gör att formulärets innehåll skickas
iväg när besökaren klickar på knappen och kan
kompletteras med återställningsknapp (reset) för att tömma
formulärets innehåll.
<input type="submit">
<input type="submit" value="Skicka">
Exemplet nedan visa en textruta och en knapp med texten Skicka.
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.
Som standard så begär besökarens webbläsare hemsidor från
webbservern m.h.a. metoden GET. Och om formulär sänds med metoden GET
så kommer innehållet i formuläret att läggas till till URL:en,
som formulärets attributet action pekar på, efter ett frågetecken. Om
formuläret innehåller en textrutan med namnet "fornamn" och
attributet action har värdet "behandla.asp" så skulle
webbläsaren begära hemsidan med följande URL
behandla.asp?fornamn=varde_som_fyllts_i
Formulärets innehåll, eller snarare det efter frågetecknet, brukar kallas query string (benämnt som parametrar på hemsidan om länkar).
Fördelen med metoden GET är att man kan göra länkar med URL:er som innehåller en query string. T.ex. så finns det en Java servlet på Mälardalens högskolas webbserver som visar information om de anställda. Och på högskolans alla hemsidor finns (eller bör det finnas) en länk till informations- och teknikansvariga för hemsidorna. Länken till dessa har kod liknande följande:
<a href="http://www.mdh.se/se.mdh.Personal?
fornamn=Björn&efternamn=Persson">
Se hur (den resulterande) hemsidan ser ut. (Länken är gammal och jag jobbar inte längre för högskolan, men ni kan studera URL.)
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.)
type="text"<input type="text" name="MinText" size="25" maxlength="25" value="Startvarde" />
<input type="text" name="MinText1" size="25" maxlength="25" placeholder="Startvarde" />
namesizemaxlengthplaceholdervaluetitleDenna 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.
<textarea name="MinArea" rows="5"
cols="25">Startvarde</textarea>
namerowscolsplaceholdertype="password"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!
<input type="password" name="MittLosenord"
size="25" maxlength="25" value="Startvarde" />
namesizemaxlengthvaluetype="hidden"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.
Ett formulär bör inte vara för långt. Blir det för långt så bör man fundera på att bryta upp formuläret och placera det på flera webbsidor med kortare formulär (ett formulär som fylls i i flera steg). För att spara innehållet i tidigare ifyllda formulär, så att de kan användas i sista steget av formulärets ifyllande, brukar innehållet (från tidigare steg) placeras i textrutor som är dolda för besökaren.
Ett annat alternativ (till dolda textrutor) är att använda sessionsvariabler (finns i bl.a. JSP, PHP och servlets), med det är ett separat ämne i sig.
<input type="hidden" name="MinDold"
value="Startvarde" />
namevaluetype="checkbox"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).
<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.
namevaluecheckeddisabled="disabled").type="radio"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).
<input type="radio" id="MinRadio" name="MinRadio"
value="Markerad0" checked="checked" />
<label for="MinRadio">MinRadio0</label>
namevaluecheckedI 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>
type="submit"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.
<input type="submit" name="MinSubmit" />
<input type="submit" value="Skicka" name="MinSubmit" />
valuenametype="reset"Knapp som återställer formulär till det tillstånd det var när sida laddades.
<input type="reset" name="MinReset1" />
<input type="reset" value="Återställ" name="MinReset2" />
valuenametype="button"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).
<input type="button" value="Klicka mig!"
name="MinKnapp" onclick="javascript:alert('Du klickade
på mig')" />
valuenameonclickListrutor 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.
<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.
<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!