Formulärer definieras med form-elementet. Alla element som finns inom form tillhör då det motsvarande formuläret.
<form> … </form>
I det inledande <form> förväntas action-attributet. Genom detta anger man slutligen vad som ska hända med formulärdatan. Vanligtvis handlar det om en PHP-applikation.
<form method="post" action="form.php"> … </form>
Se till att den angivna filen verkligen kan hittas. Ni måste ställa in rätt sökväg.
I stället för ett skript kan man också ange en e-postadress.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
I det här fallet skickas formulärdatan via e-post. Elegant är det dock inte, varför man nästan alltid väljer skriptvarianten. Om man inte har ett skript till hands kan man dock nödsituation skicka formuläret via e-post.
En annan viktig attribut för form-elementet är method. Genom detta fastställer man HTTP-överföringsmetoden för att skicka formulärinnehållet. Två olika alternativ är tillgängliga.
• post = Formulärdatan skickas i två steg till den angivna adressen. Först kontaktar webbläsaren den angivna adressen. Om detta lyckas, skickas formulärdatan till skriptet.
• get = Med denna metod bifogas formulärdatan i slutet av URL:en som tilldelats action-attributet. Formulärdatan syns då även i webbläsarens adressfält.
Det är naturligtvis frågan vilket av dessa alternativ man bör använda för att skicka formulärdatan. I princip kan ni använda båda. Särskilt när det gäller stora datamängder och uppladdning av filer till servern bör ni dock använda post.
Enkla formulärfält
Hittills har endast den yttre strukturen av formuläret definierats. I webbläsaren syns fortfarande inget av formuläret själv.
<form method="post" action="form.php"> … </form>
Nu handlar det således om att fylla formuläret med innehåll/liv.
Den möjligtvis mest använda fälttypen är enradigt inmatningsfält. Dessa används till exempel för att fråga efter namn, förnamn och e-postadress. Enradiga inmatningsfält definieras på följande sätt:
<input type="text" name="forname" />
Till input-elementet tilldelas attribut-värde-kombinationen type="text". Dessutom bör ni ge varje inmatningsfält en intern identifierare. Denna identiteter måste vara unik i dokumentet. Den är särskilt intressant när det gäller bearbetning av formulärdatan med skript. Använd inte mellanrum eller specialtecken i identiteten.
När ni ser resultatet i webbläsaren får ni följande bild:
Helt enkelt ser det hela inte särskilt spektakulärt ut ännu. Men om ni klickar i textrutan kommer ni att märka att ni redan kan göra inmatningar där.
För att besökarna ska veta vad de ska skriva i fältet saknas naturligtvis fortfarande en etikett.
Förnamn: <input type="text" name="forname" />
Också här ger en titt i webbläsaren det önskade resultatet.
Med attributet size kan ni bestämma fältets bredd.
Förnamn: <input type="text" name="forname" size="30" /> <br /> Postnummer: <input type="text" name="postnr" size="5" />
Attributet size tilldelas önskad fältbredd.
I detta sammanhang motsvarar 5 exakt fem tecken. I detta sammanhang är också attributet maxlength intressant. Där angees det maximalt tillåtna antalet tecken som kan skrivas in i fältet. Här är ett annat exempel:
Förnamn: <input type="text" name="forname" size="30" maxlength="40" />
Om det angivna värdet vid maxlength är större än vid size, scrollas fältet automatiskt för längre inmatningar.
Genom attributet value kan ni förinställa ett värde i fältet.
Förnamn: <input type="text" name="förnamn" value="Ditt namn" />
Värdet tilldelat value ses som förifyllning av fältet.
Användare kan radera detta förifyllda värde.
Förresten kan ni förhindra att värden från fält raderas. Man definierar då en inmatningsruta som i själva verket inte längre är en inmatningsruta. I praktiken används sådana fält ofta för utskrifter. Det kan vara intressant exempelvis att visa värden som har bestämts av ett skript. Tänk här till exempel på en miniräknare. Man kan även manuellt förifylla ett fält med en text som besökarna inte kan ändra längre. (Observera: Euro-tecknet återges tyvärr inte korrekt i PDF-vyn).
<input name="pris" type="text" value="€ 699.-" readonly />
För att sätta ett fält som bara-läsbart tilldelar man det attributet readonly. Här är en titt på resultatet igen:
Den fördefinierade texten syns direkt. Men den kan inte raderas.
Definiera lösenordsfält
Ni känner säkert till lösenordsfält. Överallt där ni registrerar er måste ni ange ett lösenord. (Vanligtvis måste ni till och med skriva det två gånger).
De data som matas in i inmatningsrutan syns inte, utan ersätts automatiskt av webbläsaren med stjärnor/punkter. Fördelen med denna variant är att personer som kanske tittar över era axlar när ni skriver lösenordet inte kan avkoda det. Det är emellertid en missuppfattning att lösenordsfält automatiskt är säkra. Faktum är att lösenorden överförs i klartext vid normal HTTP-överföring av formuläret.
Lösenordsfält definieras på följande sätt:
<input type="password" name="lösenord" />
Attributet type tilldelas värdet password. Här är en titt på resultatet igen.
När ni skriver något där blir det oigenkännligt för webbläsarna direkt under inmatningen.
