Drop down list
Een drop down list is een andere manier waarop bezoekers een optie kunnen selecteren. In een drop down lijst gebruiken we de <select> en <option> tags. Zo'n lijst ziet er bijvoorbeeld zo uit:
Bovenkant formulier
Welke film uit deze lijst vind je het beste?
The GodfatherPulp FictionThe Shawshank RedemptionRaiders of the Lost ArkSpartacus
Onderkant formulier
De HTML code:
<form method="post" action="mailto:jouwemail@adres.nl">
< em>Welke film uit deze lijst vind je het beste?</em><br>
< select name="film">
< option>The Godfather</option>
< option>Pulp Fiction</option>
< option>The Shawshank Redemption</option>
< option>Raiders of the Lost Ark</option>
< option>Spartacus</option>
< /select>
< input type="submit" value="Verzenden">
< /form>
Een lijst met meerdere keuzemogelijkheden
We kunnen ook een lijst maken waarin meerdere mogelijkheden geselecteerd kunnen worden door de bezoekers. We maken daarvoor gebruik van het multiple attribuut. Met het attribuut size kunnen we bepalen hoeveel keuzemogelijkheden er getoond worden voordat de bezoeker moet scrollen in de lijst. Door selected toe te voegen aan een <option> tag kunnen we een standaardkeuze selecteren.
Hier is een voorbeeld van een lijst met meerdere keuzemogelijkheden:
Bovenkant formulier
Selecteer je favoriete drankjes:
BierWijnColaSinasVruchtensapWodkaIJsthee
Onderkant formulier
Zoals je ziet worden er vier opties in beeld getoond en wordt "Bier" als een standaardkeuze geselecteerd. Je kunt in de lijst meerdere opties selecteren door de control toest ingedrukt te houden.
De HTML code voor de bovenstaande lijst is:
<form method="post" action="mailto:jouwemail@adres.nl">
< em>Selecteer je favoriete drankjes:</em><br>
< select multiple name="drankjes" size="4">
< option value="bier" selected>Bier</option>
< option value="wijn">Wijn</option>
< option value="cola">Cola</option>
< option value="sinas">Sinas</option>
< option value="vruchtensap">Vruchtensap</option>
< option value="wodka">Wodka</option>
< option value="ijsthee">IJsthee</option>
< /select>
< input type="submit" value="Verzenden">
< /form>
Formulier in html met CSS | |||
Een formulier is een heel byzonder element, omdat er diverse besturingselementen in worden gebruikt die alleen bij formulieren voorkomen. | |||
Een formulier wordt omsloten door de tags <form> en </form> . | |||
Omdat een formulier een belangrijk item is voor de webmakers, zal ik eerst het html gedeelte tonen, zodat u ook kan zien wat css er voor fraais aan kan toevoegen. |
![]() |
|||
Action zorgt voor de verwerking van de formuliergegevens . | |||
Method is de manier hoe het formulier actie neemt. Er zijn de methode <post en get> Post verstuurd de gegevens van het formulier apart. |