Lektion 9: FormsDenne lektion beskriver, hvordan du laver forms (formularer), som kan bruges til at indsamle og sende information fra dit websted.Forms opgave er at give HTML et redskab hvormed informationer kan indtastes / vælges og derefter kan behandles af sprog som JavaScript, Perl, PHP og ASP. Principper bag formsAlle forms startes med en <form> tag og afsluttes med en </form> tag. Alle indtastningsfelter, knapper mm. skal stå imellem sådanne to tags.Lad os forestille os en række <input type="text"> felter (indtastnings felter), hvor gæsten f.eks. kan indtaste navn, adresse og Email. Når du, som gæst, har indtastet oplysninger i felterne, afslutter du med tryk på en "Afsend Brev" knap (en submit knap). Handlingen som bliver udført ved tryk på "submit knappen" er betinget af hilken action="" der er angivet i <form> feltet. Som action="" bliver der typisk udført et lille stykke program kode. Denne kode kan, som nævnt, være skrevet i f.eks. JavaScript, Perl, PHP eller ASP. Lad os se et samlet eksempel på det vi her snakker om: <form action="cgi-bin/formmail.pl" method="get"> Dit navn:<br> <input type="text" name="navn" size="14"><br> Din adresse:<br> <input type="text" name="adresse" size="14"><br> Din Email:<br> <input type="text" name="email" size="14"><br> <input type="submit" value="Afsend"> </form> Resultatet af koden herover, vil se således ud (virker ikke i dette tilfælde): Var eksemplet herover funktionsdygtigt, ville følgende ske efter at felterne var udfyldt, og brugeren havde trykket på "submit knappen":
<form></form> Start og slut på form felter. <form> kan modtage flg. koder:
Et tekst indtastningsfelt. Mulige koder:
<form action="" method="get"> <input type="text" name="fornavn" value="dit fornavn" size="25" maxlength="16"> </form> Resultat: <input type="password"> Et tekst indtastningsfelt hvor indtastningen vises som stjerner. Er ellers 100% identisk med type="text". <input type="hidden"> Et tekst indtastningsfelt som er skjult. Er 100% identisk med type="text", bortset fra at koderne maxsize="" og size="" ikke kan bruges. <input type="file"> Et tekst indtastningsfelt, som også fungerer som en "browse" knap. Mulige koder:
<form action="" method="get"> <input type="file" name="uploadfil" size="25" maxlength="30"> </form> Resultat: <input type="checkbox"> En "vælg / vælg ikke" box. Mulige koder:
<form action="" method="get"> Vælg en eller flere farver:<br> <input type="checkbox" name="red" value="ja" checked> rød<br> <input type="checkbox" name="green" value="ja"> grøn<br> <input type="checkbox" name="blue" value="ja"> blå </form> Resultat: <input type="radio"> En "vælg én af følgende" box. Mulige koder:
<form action="" method="get"> Vælg én af følgende farver:<br> <input type="radio" name="farve" value="red" checked> rød<br> <input type="radio" name="farve" value="green"> grøn<br> <input type="radio" name="farve" value="blue"> blå </form> Resultat: <input type="submit"> En "udfør handlingen" knap. Ved tryk på en "submit knap" udføres automatisk den handling der angivet i action="" koden i <form> feltet. En submit knap kan modtage følgende koder:
<form action="" method="get"> <input type="submit" name="udfoer" value="Afsend beskeden nu!"> </form> Resultat: <input type="image"> En "udfør handlingen" knap. Knappen fungerer på nøjagtigt samme måde som en type="submit" knap. Forskellen ligger i at denne knap kan bruge et stykke grafik. En type="image" submit knap kan, ud over type="image" koden, bruge nøjagtigt de samme koder som en <img> tag. Eksempel: <form action="" method="get"> <input type="image" name="udfoer" src="afsend.gif" width="62" height="17" border="0"> </form> Resultat: <input type="reset"> En "slet alle felters indhold" knap. Knappen fjerner indtastningerne fra alle felterne imellem <form> ..og </form>. Knappen kan modtage flg. koder:
<form action="" method="get"> <input type="reset" value="Slet alt!"> </form> Resultat: <select></select> En "drop-down-menu" box. Alt hvad der står imellem <select> ..og.. </select> er del af select boxen. <select> tag'n kan modtage flg. koder:
<form action="" method="get"> Hvilken kan du bedst lide?<br> <select name="menu"><br> <option value="valg1"> En rød farve </option><br> <option value="valg2"> En grøn farve </option><br> <option value="valg3"> En blå farve </option><br> <option value="valg4"> En gul farve </option><br> <select><br> </form> Resultat ser således ud: Bruger du size="" og multiple kan du få en anden effekt ud af samme menu. Et eksempel: <form action="" method="get"> Hvilken kan du bedst lide?<br> (brug CTRL / SHIFT til at vælge mere end én)<br> <select name="menu" size="3" multiple><br> <option value="valg1"> En rød farve </option><br> <option value="valg2" selected> En grøn farve </option><br> <option value="valg3"> En blå farve </option><br> <option value="valg4"> En gul farve </option><br> <select><br> </form> Resultat ser således ud: <textarea></textarea> <textarea> er en "indtastnings kasse". Funktionelt minder den meget om <input type="text"> indtastningsfeltet. Forskellen ligger i at denne kasse kan være højrere. <textarea> kan modtage flg. koder:
<form action="" method="get"> <textarea name="besked" cols="40" rows="4">Skriv din besked her</textarea> </form> Resultatet ser således ud: Skrevet okt. 2001 af Niels Rune Bøggild 
|
Nyhedsbrev
Artikler og tips til webmastere på e-mail:
Nu 9822 modtagere.
Hjemmesider Login
|
