af Andreas Astrup, HTML.dk
Sidst opdateret 6. januar 2001
Denne artikel beskriver, hvordan du laver formularer (forms), som kan bruges til at indsamle og sende information fra dit websted.
Som alt andet i HTML er det ret simpelt at lave en formularer. Alt der skal bruges er et par tags og en række attributter:
<form method="post" action="mailto:andreas@html.dk"> <input type="text" name="body"> <input type="submit" value="Send"> </form>
Vil se sådan ud I browseren:
Formularen sender en mail til andreas@html.dk. Hvordan? Læs videre og få svaret!
Du skal altid starte din formular med <form> og lukke det med
</form>. I taget skal der indsættes et par attributter - method og action - der angiver, hvad der skal ske med den indtastede information.
<form method="post" action="mailto:html@html.dk">
Attributten method kan enten have værdien "post" eller "get". Forskellen er kort fortalt, at ved "get" sendes de indtastede oplysninger i URL'en, mens de ved "post" sendes skjult for brugeren. Desuden kan "get"-metoden kun sende begrænset mængder information (afhængigt af browseren), hvor "post"-metoden kan sende ubegrænset mængder. Ofte er det ikke så vigtigt, hvilken metode der bruges, men brug"post", hvis formularen indeholder store mængder information og "get", hvis brugeren skal have mulighed for at bookmarke siden efterfølgende (ved f.eks. resultatet af en søgning).
En formular er i sig selv ikke andet end en række felter, der kan indeholde forskellig information. Attributten action peger på det program / script, der skal håndtere de indtastede informationer. Normalt skal og bør programmet / scriptet ligge på serveren (f.eks. action="http://www.dinside.dk/cgi-bin/FormMail.cgi"), men en udtagelse er action="mailto:navn@udbyder.dk", der sender en e-mail via brugerens e-mail program (metoden er dog ikke særlig anbefalelsesværdig, da den stiller krav til brugerens software).
<input>, <select> og <textarea> bruges til oprette felter i formularen. Her følger en beskrivelse af de forskellige typer felter:
Eksempel:
<input type="text" value="skriv dit fornavn" name="fornavn" size="30">
giver følgende resultat:
Kommentarer:
Attributten type angiver hvilken type felt der skal oprettes. I ovenstående eksempel er type sat lig "text", hvilken giver en enlinjet tekstboks. Se flere typer nedenfor.
Med value kan du vælge at give feltet en forudbestemt værdi - altså det, der vil stå i feltet, inden brugeren eventuelt skriver noget andet. Attributten name bruges til at tilknytte et navn til det stykke information, der indtastet i feltet.
Attributten size angiver længden på tekstboksen. I ovenstående eksempel er længden sat til 30 tegn.
Bemærk, at taget <input> ikke skal lukkes.
Eksempel:
<textarea name="tekst" rows="6" cols="20"> </textarea>
giver følgende resultat:
Kommentarer:
De to attributter rows og cols angiver henholdsvis højden og bredden.
<textarea> skal modsat <input> lukkes.
Eksempel:
<input type="checkbox" name="check1" value="valgt"> <input type="checkbox" name="check2" value="valgt" checked="checked"> <input type="checkbox" name="check3" value="valgt">
giver følgende resultat:
Kommentarer:
Afkrydsningsfelter er f.eks. smart at bruge i forbindelse med spørgeskemaer o. lign. Ved at indsætte checked="checked" i et eller flere af tagene, kan du vælge at have dem afkrydset på forhånd.
Eksempel:
<input type="radio" name="radiofelt" value="nr1"> <input type="radio" name="radiofelt" value="nr2" checked="checked"> <input type="radio" name="radiofelt" value="nr3">
Giver følgende resultat:
Kommentarer:
Udover at være runde er radio buttons forskellige fra afkrydsningsfelter ved, at det kun er muligt at vælge én knap af gangen (bemærk at radio buttons i samme gruppe skal have det samme name). De har fået deres navn - radio buttons - efter knapperne i de gamle bilradioer, hvor den valgte knap hopper op, når en ny trykkes ind.
Eksempel:
<select size="1" name="menu"> <option>punkt 1</option> <option selected="selected">punkt 2</option> <option>punkt 3</option> </select>
Giver følgende resultat:
Kommentarer:
Rullemenuer er smarte, når du ønsker mange valgmuligheder på lidt plads. Du kan have et ubegrænset antal punkter i din rullemenu.
Der skal bruges to tags for at lave en rullemenu: <select> og <option>. Begge tags skal modsat <input> lukkes.
Hvis du ønske et andet punkt end det først i rækken valgt på forhånd, kan du indsætte selected="selected" i det ønskede tag.
Eksempel:
<input type="password" name="kode" value="mit password" size="10">
Giver følgende resultat:
Kommentarer:
Udseende er det samme som en tekstboks, men det der skrives i boksen skjules. Prøv selv.
Eksempel:
<input type="hidden" name="skjult" value="her står noget hemmeligt">
Giver følgende resultat:
(kan ikke ses)
Kommentarer:
Skjulte felter kan ikke ses af brugerne (med mindre de går ind og læser dine koder). Brugeren har heller ikke mulighed for at ændre de informationer, du angiver i skjulte felter.
Eksempel:
<input type="submit" value="Send">
Giver følgende resultat:
Kommentarer:
Ved tryk aktiveres det program / script, der er sat til at håndtere formularen (med attributten action i <form>).
Eksempel:
<input type="reset" value="Slet alt">
Giver følgende resultat:
Kommentarer:
Sletter alle indtastede informationer i formularen
Eksempel:
<input type="file">
Giver følgende resultat:
Kommentarer:
Ved klik på knappen åbnes en oversigt over indholdet på din harddisk. Feltet bruges ved browserbaseret upload af filer (kræver en speciel komponent installeret på din server).
