Administreres af:

Brug af formularer Tilbage til oversigtstabel
Tilbage


Testkørsel: PC, Windows 98DK
Af: novicen.dk


Hvad er formularer

Formularer kan anvendes på hjemmesider til at de besøgende kan kontakte web-stedets indehaver. Det kan være til brug for enkle forespørgsler om dette eller hint, det kan være for at udbede sig mere information om et givent emne, det kan være til at logge sig på et kodebeskyttet område, til bestilling af varer hos et firma, til brug i chat-rooms eller i et debatforum og meget andet.

En ganske enkel formular, hvor brugeren kan afgive besked eller forespørge web-indehaveren kunne se således ud:

Dit navn:

Din E-mail:

Din besked til mig:

Der er altså tale om indtastningsfelter, hvor brugeren kan give information til brug for web-indehaveren eller til brug andre steder på web-stedet eller evt. andre steder på Internet.

Til top

Opsætning og brug

Formularer der anvendes til at sende data kræver meget ofte indsætning af en del styrefelter. Felter som ikke kan ses af brugeren og som indeholder information om, hvem der skal modtage data, hvordan de fremsendte data skal sorteres, om nogle data ikke skal fremsendes og meget mere.

Som det første element i denne henseende er selve erklæringen af formularen. Denne skal erklæres indenfor gyldige <BODY>... </BODY> TAG's og principielt se således ud:

<form action="http://www.novicen.dk/helpdesk/jmail.asp" method="post">

  <!-- Her imellem kommer alle formularens felter til at stå ... -->

</form>

Den første linie i formularen - <form action="http://www.novicen.dk/helpdesk/jmail.asp" method="post">, som iøvrigt ikke er synlig for brugeren - skal indeholde oplysning om, hvad der skal ske med de indtastede data, når brugeren trykker på send-knappen.

For at de indtastede data kan sendes, skal der anvendes et formular script (kaldes også for form script, mail script, mailto: script eller tilsvarende). Skal du anvende formularer på dit web-sted bør du forhøre dig hos din udbyder, om denne stiller et sådant script til rådighed. Gør han det, bør du anvende dette. I modsat fald vil du som en gratis service fra novicen.dk kunne anvende det formular script, som er beskrevet i helpdesk sektionen på URL: http://www.novicen.dk/helpdesk/mailsystem.asp. Det er mail scriptet fra novicen.dk, som er anvendt i nedenstående praktiske eksempel.

Formular scriptet konverterer de indtastede data fra formularen på web-siden til et sprog, som kan forstås af E-mail programmer. Derefter sender scriptet en E-mail til den, som skal modtage de indtastede informationer og foretager evt. yderligere håndtering i henhold til oplysningerne, som måtte være angivet i de indsatte styrefelter.

Det script, som skal anvendes til konvertering og fremsendelse af data skal indtastes i den attribut, som hedder action="...".

Derudover skal der i <form ...> TAG'en indsættes en attribut method="post". Attributten fortæller, at data skal postes fra hjemmesiden og til formular scriptet. Alternativet til post er get men denne bør ikke anvendes, medmindre din udbyder specifikt kræver dette, da mængden af data der kan fremsendes bliver reduceret væsentligt og samtidig kan blive gjort synlig i adresselinien.

Den sidste linie i formularen skal være </form>.

Alle felter der indgår i formularen skal stå mellem disse to angivne kodestykker. Felter der står udenfor vil ikke indgå som elementer i formularen og der kan derfor ikke overføres data fra sådanne felter.

Et af de nødvendige felter er knappen, der får sendt data fra formularfelterne og til formular scriptet. Dette felt er et input felt af typen submit. Indsat i formularen fremstår det som en knap, hvorpå der kan klikkes.

Koden er: <input type="submit" value="Send formulardata"> og den tekst der angives i value attributten er det, som kommer til at stå på knappen. Det vil være almindeligt, at denne knap placeres nederst/til sidst i formularen.

Alle felter som anvendes i den fremsendte besked eller som styrekoder til mail scriptet skal være navngivet med et name="..." i henhold til de bestemmelser, som mail scriptet kræver. Eksempelvis skal der være en angivelse af, hvem der skal modtage de opsamlede informationer. Dette kan angives enten i formularens action eller som et særskilt skjult felt i formularen. Hvis ikke de nødvendige styrefelter er indsat korrekt, vil formularen ikke blive fremsendt eller den vil kunne fremstå på en ikke hensigtsmæssig måde.

Det vil være fornuftigt, hvis du som indhold i name="..." altid holder dig til bogstaverne a...z samt A...Z og undgår mellemrum (brug i stedet en bundstreg: _ ) og andre specialkarakterer. Specialkarakterer kan i visse tilfælde give anledning til fejlfunktion.

I alle tilfælde skal du meget slavisk overholde de retningslinier som stilles for navngivning af styrefelter til mail scriptet. Du skal altså være meget striks i din indtastning og sørge for at overholde evt. forskel mellem store og små bogstaver. Feltnavnet afsenderMail er IKKE det samme som Afsendermail eller afsendermail - uanset hvad du selv måtte mene - eller have af vaner... ;-)

Til top

Almindelige felter

Tekstfelter og kodeordsfelter anvendes til at lade brugeren indtaste de ønskede data som en lang tekstlinie. Indtastninger i kodeordsfeltet fremstår som stjerner med samme antal, som der faktisk er indtastede karakterer i teksten - inkl. mellemrum. Skal der være indsat en startværdi i felterne, angives denne som value for feltet: value="Indtast navn her".

<input type="text" name="afsenderNavn" value="" size="24">

<input type="password" name="afsenderKode" size="24">

Tekstbokse anvendes til at bringe længere tekststykker, der også vil kunne strække sig over flere linier. Indsætning af startværdi sker mellem de trekantede paranteser i overgangen mellem textarea start TAG og textarea slut TAG. <textarea ....>Startværdi kan angives her</textarea>

Attributterne cols="24" og rows="6" angiver hhv. antallet af karakterer på tværs i tekstboksen og det antal linier, som der synligt kan skrives i boksen. Når brugeren overskrider det ansatte antal linier, vil der fremkomme rullegardin i tekstboksen. Brug af attributten wrap="physical" giver automatisk tekstomløb, når teksten er blevet længere end den angivne bredde i cols="..."

<textarea name="tekstIndhold" cols="24" rows="6" wrap="physical"></textarea>

Radioknapper og checkbokse anvendes typisk i forbindelse med udvælgelse af én blandt mange hhv. afkrydsning af flere mulige tillæg. Radioknapper kan have samme navn og vil dermed gensidigt udelukke hinanden. Der kan være flere hold radioknapper med hver sin navnegruppe indenfor samme formular. Checkbokse bør altid have entydige - men forskellige - navne, da disse ikke udelukker hinanden.

<input type="radio" value="T&oslash;j" name="Valg" checked>
<input type="radio" value="Bukser" name="Valg">
<input type="radio" value="Skjorter" name="Valg">

<input type="radio" value="Mere t&oslash;j" name="NytValg">
<input type="radio" value="Flere bukser" name="NytValg"checked>
<input type="radio" value="Flere skjorter" name="NytValg">

<input type="checkbox" value="Ja" name="SendHovedKatalog" checked>
<input type="checkbox" value="Ja" name="SendBukseKatalog">
<input type="checkbox" value="Ja" name="SendSkjorteKatalog">

Select-menu kan anvendes, hvis der skal foretages valg mellem mange muligheder og der ikke skal bruges flere liniers plads på fremtoningen på web-siden.

<select name="ToejValg" size="1">
   <option value="Tøj">T&oslash;j</option>
   <option value="Bukser">Bukser</option>
   <option value="Skjorter">Skjorter</option>
   <option value="Mere tøj">Mere t&oslash;j</option>
   <option value="Flere bukser">Flere bukser</option>
   <option value="Flere skjorter">Flere skjorter</option>
   </select>

Skjulte felter anvendes typisk til oplysninger der skal anvendes af mail scriptet. Det kan være oplysninger om, hvem der skal modtage de fremsendte data, titel på den fremsendte E-mail, evt. anden URL som der omstilles til, hvis E-mail kan hhv. ikke kan fremsendes osv.

<input type="hidden" value="info@novicen.dk" name="modtagerMail">
<input type="hidden" value="Demo af formularops&aelig;tning" name="titelIndhold">
<input type="hidden" value="afsenderMail,afsenderAdresse,tekstIndhold" name="sorterData">
<input type="hidden" value="blokkerRest" name="blokkerData">

Knapper anvendes til den umiddelbare styring af formularen. Brugeren kan med disse (tilnærmelsesvis) selv styre formularen. De to mest anvendte er submit - der medfører at formularen bliver sendt - og reset - der nulstiller formularen til de informationer, som siden havde da siden blev indlæst. Begge disse knapper indsættes som <input...> felter i formularen.

Trykkes der på submit knappen udføres den handling, som er angivet i formularens action="..." og på den måde, som er angivet i formularens method="...".

<input type="submit" name="" value="Send formulardata">

Trykkes der på reset knappen vil alle formularens felter blive indstillet med de informationer, som oprindeligt var angivet. Dvs. at evt. forudangivne tekster vil blive vist igen.

<input type="reset" value="Nulstil">

Det vil være fornuftigt, at placere submit knappen til venstre for reset knappen ligesom det vil være fornuftigt at gøre teksten på submit knappen længere end teksten på reset knappen.

Til top

Et færdigt eksempel

Indeværende formular fremsender en formular til din E-mail, når du angiver denne i det tilhørende felt. Hvis ikke dine data er tilfredsstillende angivet, vil du blive stillet tilbage til dette menupunkt. I modsat fald vil du enten få en bekræftelse på fremsendt E-mail eller du vil få at vide, hvis der er sket en fejl.

Din E-mail:

Dit navn:

Hvad synes du om den forklaring, du netop har læst?
:Meget dårlig   : Ikke tilstrækkelig   :Tilstrækkelig   : Rigtig god   : Hamrende god

Din besked:

  

Koden ser ud som angivet herunder - og lad nu være med at falde i svime over de mange skjulte felter. Det er ikke så slemt, når du først kommer igang ;-)

<form action="http://www.novicen.dk/helpdesk/jmail.asp" method="post">

<input type="hidden" value="http://www.novicen.dk/web/pc/formular/formular.asp#eksempel" name="redirCheck">
<input type="hidden" value="modtagerMail,afsenderNavn" name="checkData">
<input type="hidden" value="modtagerMail,afsenderNavn,tekstIndhold" name="sorterData">
<input type="hidden" value="blokkerRest" name="blokkerData">
<input type="hidden" value="Fra novicens formulardemo :-)" name="titelIndhold">

<p>Din E-mail:<br>
<input type="text" name="modtagerMail" size="24"></p>

<p>Dit navn:<br>
<input type="text" name="afsenderNavn" size="24"></p>

<p>Hvad synes du om den forklaring, du netop har l&aelig;st?<br>
<input type="radio" value="Meget d&aring;rlig" name="Vurdering">:Meget d&aring;rlig&nbsp;&nbsp;&nbsp;
<input type="radio" value="Ikke tilstr&aelig;kkelig" name="Vurdering">:&nbsp;Ikke tilstr&aelig;kkelig&nbsp;&nbsp;&nbsp;
<input type="radio" value="Tilstr&aelig;kkelig" name="Vurdering">:Tilstr&aelig;kkelig&nbsp;&nbsp;&nbsp;
<input type="radio" value="Rigtig god" name="Vurdering">:&nbsp;Rigtig god&nbsp;&nbsp;&nbsp;
<input type="radio" value="Hamrende god" name="Vurdering" checked>:&nbsp;Hamrende god</p>

<p>Din besked:<br>
<textarea name="tekstIndhold" cols="24" rows="6" wrap="physical"></textarea></p>

<p><input type="submit" name="" value="Fremsend data">&nbsp;&nbsp;<input type="reset" value="Nulstil"></p>

</form>

Til top

© Copyright 1999- , novicen.dk - All Rights Reserved
Drift og vedligehold: KS Centret ApS, Vejle
Redaktionel E-mail: kaj.linaa@ksc.dk
Grafisk design: Per Rahbek