HTML & CSS for begyndere

HTML & CSS for begyndere (Del 13): Formularer (1)

Alle videoer i tutorialen HTML & CSS for begyndere

Formularer defineres via form-elementet. Alle elementer, der er inde i form, hører til den pågældende formular.

<form>
…
</form>

I det indledende <form> forventes attributten action. Dette angiver ultimativt, hvad der skal ske med formulardataene. Normalt er det en PHP-applikation.

<form method="post" action="form.php">
…
</form>



Sørg for, at den angivne fil rent faktisk kan findes. I skal derfor angive den korrekte sti.

I stedet for et skript kan man i øvrigt angive en e-mail-adresse.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



I dette tilfælde sendes form dataene via e-mail. Det er dog ikke særlig elegant, hvilket er grunden til, at man næsten altid vender tilbage til skriptmetoden. Men hvis man lige nu ikke har et skript ved hånden, kan formularsendelsen nødvendigvis også gøres via e-mail.

Et andet vigtigt attribut for form-elementet er method. Dette angiver HTTP-overførselsmetoden til at sende formularindholdet. Der er to forskellige varianter tilgængelige.

post = Form dataene sendes her i to trin til den angivne adresse. Først kontakter browseren den angivne adresse. Hvis dette lykkes, sendes form dataene til skriptet.

get = Med denne metode vedhæftes form dataene til enden af URL'en, der blev tildelt action-attributten. Form dataene kan derfor også ses i adressefeltet på browseren.

Det er naturligvis spørgsmålet, hvilken af disse to varianter man skal bruge til at sende form dataene. Generelt kan begge bruges. Men især når det drejer sig om store datamængder og upload af filer til serveren, anbefales det at bruge post.

Enkle formularfelter

Indtil videre er formularets ydre struktur kun defineret. I browseren er selve formularen dog endnu ikke synlig.

<form method="post" action="form.php">
 …
 </form>



Nu handler det derfor om at udfylde/forme formularen med indhold/liv.

Den mest almindeligt anvendte felttype er et enkeltlinjet tekstfelt. Disse bruges for eksempel til at indsamle navne, fornavne og e-mail-adresser. Enkeltlinjede inputfelter defineres på følgende måde:

<input type="text" name="navn" />



Attributten input-elementet får tildelt attributværdiparret type="text". Derudover skal I give hvert inputfelt en intern betegnelse. Denne betegnelse skal være entydig i dokumentet. Den er især interessant, når det drejer sig om behandling af form dataene via skript. Brug ikke mellemrum og specialtegn i betegnelsen.

Hvis du ser resultatet i browseren, får du følgende billede:

HTML & CSS for begyndere (Del 13): Formularer (1)

Det ser ikke særligt spektakulært ud endnu. Men når du klikker i tekstfeltet, vil du opdage, at du allerede kan begynde at skrive der.

HTML & CSS for begyndere (Del 13): Formularer (1)

For at besøgende kan vide, hvad de skal indtaste i feltet, mangler der selvfølgelig en etiket.

Navn: <input type="text" name="navn" />



Igen viser et kig i browseren det ønskede resultat.

HTML & CSS for begyndere (del 13): Formularer (1)

Ved hjælp af attributten size kan I bestemme feltets bredde.

Navn: <input type="text" name="navn" size="30" />
<br />
Postnummer: <input type="text" name="postnr" size="5" />



Med size-attributten angiver I den ønskede feltbredde.

HTML & CSS for begyndere (Del 13): Formularer (1)

I dette tilfælde svarer 5 nøjagtigt til fem tegn. I denne sammenhæng er attributten maxlength også interessant. For den angiver den maksimale tilladte antal tegn, der kan skrives i feltet. Her er et eksempel:

<input type="text" name="navn" size="30" maxlength="40" />



Hvis værdien angivet i maxlength er større end værdien i size, vil feltet automatisk blive rullet, når der skrives længere tekster.

Ved hjælp af attributten value kan I foretage en standardindtastning i feltet.

Fornavn: <input type="text" name="fornavn" value="Dit navn" />



Den tildelte værdi til value ses som en forudindstillet feltværdi.

HTML & CSS for begyndere (Del 13): Formularer (1)



Brugere kan slette denne forudindstillede værdi.

I kan forhindre værdier i felter bliver slettet. Her defineres et inputfelt, som i virkeligheden ikke er et inputfelt. Faktisk bruges sådanne felter ofte til output. Det kan f.eks. være interessant at vise værdier, der er beregnet via skript. Tænk f.eks. på en lommeregner. Man kan også manuelt forudindstille et felt med en tekst, som besøgende ikke længere kan ændre. (Bemærk: Eurotegnet vises desværre ikke korrekt i PDF-visning).

<input name="pris" type="text" value="€ 699.-" readonly />



For at gøre et felt skrivebeskyttet, tildeles det attributten readonly. Igen et kig på resultatet her:

HTML & CSS for begyndere (del 13): Formularer (1)



Den foruddefinerede tekst vises direkte. Denne kan dog ikke slettes.

Definér adgangskodefelter

I kender selvfølgelig adgangskodefelter. Overalt hvor I registrerer jer, skal I indtaste en adgangskode. (Normalt skal man endda indtaste den to gange).

HTML & CSS for begyndere (Del 13): Formularer (1)

De data, der indtastes i inputfeltet, er ikke synlige, men erstattes automatisk af stjerner/prikker af browseren. Fordelen ved denne metode er, at personer, der måske kigger jer over skulderen, ikke kan aflæse adgangskoden. Det er dog en misforståelse, at adgangskodefelter automatisk er sikre. Faktisk sendes adgangskoderne som klartekst ved afsendelse af formularen i almindelig HTTP.

Adgangskodefelter defineres på følgende måde:

<input type="password" name="adgangskode" />



Til attributten type tildeles værdien adgangskode. Igen et kig på resultatet her.

HTML & CSS for begyndere (Del 13): Formularer (1)



Hvis I skriver noget der, vil browserne gøre det ulæseligt direkte under indtastningen.