HOME -> HTML_TUTORIAL -> html-11 Mandag, 11. December 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

Lektion 11

Formularer

Indhold:

  • Indledning.
  • Elementerne/tags.


Indledning
Via et formular har man mulighed for at sende informationer til behandling på en server. Et formular består som minimum af nogle tekstfelter samt en submit knap, men som regel er formularerne mere avanceret opbygget.
Når man sender et formular til behandling på en server, er man nødsaget til at have et script liggende på serveren som udfører en eller anden form for handling. Når serveren har udført handlingen returnerer denne et svar til klienten. Scriptet som man placerer på serveren kan være et cgi script skrevet i f. eks. Perl eller C. For både Perl og C gælder, at der er tale om server-side scripts. Anvender du JavaScript, vil handlingen blive udført på klientens pc, JavaScript er altså klient-side.
Men nok om det. I denne lektion vil jeg kort gennemgå formularer, og vise nogle af de muligheder der findes.
Elementerne/tags.
<form> tag

Via <form> tagen afgrænser man området for sit formular.


<form> .... </form>


Attributter i forbindelse med <form>:
  • action => Den handling som ønskes udført.
  • method => Metoden til afsendelse af data, kan antage værdierne "get" og "post".


<form action="mailto:john@doe.dk" method="post"></form>


<input> tag

Via <input> tagen angiver du forskellige parametre i dit formular.


<input .... />


Attributter i forbindelse med <input>:
  • name => Angiver feltets navn.
  • value => Angiver standardværdien.
  • size => Angiver størrelsen, plads til bogstaver.
  • type => Angiver typen ....
    text | radio | checkbox | password | file | hidden | image | button | submit | reset

Eksempel 1: Her er et lille stump kode til et login formular. Klik på linket nedenfor, for at se formularen. Når du indtaster noget i password feltet, vil det indtastede blive vist med "dots" eller "stjerner".


<form action="http://domaene.dk/script.cgi" method="post">

<b>Login</b><br />
Bruger id : <input type="text" size="10" name="navn" /><br />
Password: <input type="password" size="10" name="adgangskode" /><br /><br />
<input type="submit" name="login" value="Login" />
<input type="reset" name="reset" value="Reset" /><br />

</form>


Vis som eksempel

Eksempel 2: Et andet eksempel der illustrerer radio, checkbox, file, submit og reset.

For at gruppere et område som f eks. interesser, alder eller køn, skal man angive det samme navn (name).
Klik på linket nedenfor, for at se formularen.


<form action="http://domaene.dk/script.cgi" method="post">

<b>Køn</b><br />
<input type="radio" name="køn" value="mand" />Mand<br />
<input type="radio" name="køn" value="kvinde" />Kvinde<br />
<input type="radio" name="køn" value="dreng" />Dreng<br />
<input type="radio" name="køn" value="pige" />Pige<br /><br />

<b>Alder</b><br />
<input type="radio" name="alder" value="u25" />under 25<br />
<input type="radio" name="alder" value="o25" />over 25<br /><br />

<b>Interesser</b><br />
<input type="checkbox" name="interesse" value="Bold" />Boldspil<br />
<input type="checkbox" name="interesse" value="atletik" />Atletik<br />
<input type="checkbox" name="interesse" value="svoem" />Svømning<br /><br />

<b>Indsæt fil</b><br />
<input type="file" name="file" value="Bold" /><br /><br />

<input type="submit" name="Send" value="Send" />
<input type="reset" name="reset" value="Reset" /><br />

</form>


Vis som eksempel

<textarea> tag

Via <textarea> tagen kan du lave et indtastnings område!


<textarea .... > .... </textarea>


Attributter i forbindelse med <textarea>:

  • name => Angiver feltets navn.
  • size => Angiver størrelsen, plads til bogstaver.(cols)
  • rows => Angiver rækker.
  • cols => Angiver kolonner

Eksempel 3: Klik på linket nedenfor, for at se formularen.


<form action="http://domaene.dk/script.cgi" method="post">

<b>Kommentar!</b><br />
<textarea name="kommentar" rows="10" cols="25">
Skriv din kommentar her!
</textarea><br />

<input type="submit" name="Send" value="Send" />
<input type="reset" name="reset" value="Reset" /><br />

</form>


Vis som eksempel

<select> og <option> tags

Via tagene angiver du forskellige valgmuligheder.


<select>
<option> .... </option>
</select>


Eksempel 4: Klik på linket nedenfor, for at se formularen med optioner.


<form action="http://domaene.dk/script.cgi" method="post">

<b>Dine valgmuligheder i rullemenu</b><br />
<select name="valg" size="3">
<option>Danmark</option>
<option>Norge</option>
<option>Sverige</option>
<option>Finland</option>
<option>Tyskland</option>
<option>England</option>
</select><br /><br />

<b>Andre valgmuligheder</b><br />
<select name="valg2" size="1">
<option>Danmark</option>
<option>Norge</option>
<option>Sverige</option>
<option>Finland</option>
<option>Tyskland</option>
<option>England</option>
</select><br />

</form>


Vis som eksempel

Der findes mange muligheder med formularer. Denne lektion har dermed ikke dækket alt hvad der findes, men er tilstrækkelig i mange sammenhænge.
Næste lektion handler om meta-tags .... om hvordan du bruger dem til at beskrive din side med.

META-TAGS >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top