Form

Fra Kommunikation-IT Holstebro HTX
Skift til: navigering, søgning

Det oprindelige formål med en Form

I sin grundform var HTML ikke aktivt, så man kunne ikke ændre på noget, men man kunne indsende værdier til en server. Disse værdier skulle samles i en form og sendes med en submit knap til det der var angivet i formen.

Man kan godt have flere forskellige forms i en side, og det er kun det der ligger i den aktuelle form der sendes til serveren.

Den grundlæggende Form

I sin grundform kan en form se således ud:

<form name="mening" action="test_form.php" method="get">
Skriv din mening om politik: <input type="text" name="bruger_mening" />
<input type="submit" value="Indsend din Mening" />
</form>

Formen defineres som objekt af <form> </form>, og egenskaberne siger noget om hvad der skal ske med formen:

action angiver hvor det der sendes skal sendes hen (her er det til den server fomen ligger på, og til en side der hedder test_form.php), som skal kunne modtage det sendte.

method angiver hvilken form det sendes på (get eller post), som betyder noget for hvad man kan se i det sendte, når man sender.

input text feltet definerer det felt hvor der skal indtastes noget (her er det brugerens mening)

submit knappen er den knap der aktiverer afsendelsen af formen.

Mulige elementer i en form

input text

input password

select med options der former en dropdown menu

radio button

checkbox

textarea

Forms og javascript

Det man typisk kan med javaScript i en form er at man kan gøre noget ved værdierne i formen inden de sendes til serveren, og man kan blokere indsendelsen af formen (nok det mest brugte af javascript til forms) - det vil man gøre ud fra en validering af formens indhold.

Eksempel med validering af form

Ideen med at validere en form er at man kan tjekke om brugeren har indtastet noget fornuftigt inden der sendes til serveren.

Dette tjek kan spare serveren for en del belastning (at der ikke skal svares på henvendelser der alligevel ikke har noget formål), og det kan give en bedre brugeroplevelse (at man ikke skal udfylde en hel masse igen, hvis man har glemt et felt).

Teknikken er at man fanger eventen onSubmit med javascript, og returnerer false, hvis den ikke skal sendes.

Formen kan opbygges som følger:

<form action="" onSubmit="return validate(this)" method="get">
<p>Indtast en tekst på mere end 3 tegn:
<input type="text" name="tekst" /></p>
<p>
<input type="submit" value="send til denne side" />
</p>
</form>

Det der validerer (tjekker om det er i orden) formen er funktionen validate() der kan se ud som følger:

function validate(form) {
	// parameteren form er sendt ved hjælp af this nede i formen, så man kan 
	// henvende sig til felterne ved hjælp af name-egenskaberne
	var tekst = form.tekst.value;
	if (tekst.length < 3) {
		alert("Der skal indtastes mindst 3 tegn");
		// Her sendes formen ikke
		return false;
	}
	// Her bliver formen sendt (der er indtastet 3 eller flere tegn
	return true;
}

En ekstra lille krølle i eksemplet er at man via javascript kan fange det der er sendt, ved at læse i URL-linien, og finde frem til det der er indtastet ved:

if (location.href.indexOf("?") > 0) { 
	var href = location.href.split("?");
	var tekst = href[1].split("=");
	alert("Ud af " + location.href + "kan man finde\nDet indtastede som: " + tekst[1]);
}

Eksemplet kan findes i en ZIP-fil.