Opdracht 4

Radio button

Met een radio button kunnen we een bezoeker een antwoord laten selecteren uit meerdere mogelijkheden. Je bent deze radio buttons ongetwijfeld wel eens tegengekomen op andere websites. Ze worden bijvoorbeeld vaak gebruikt voor een poll of een quiz.

In de code gebruiken we de volgende attributen:

Een voorbeeld van het gebruik van radio buttons:

Bovenkant formulier

Wat voor kleur ogen heb je?
Blauw Bruin Grijs Groen
Draag je een bril?
Ja Nee

Onderkant formulier

 

De code voor deze twee sets radio buttons is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Wat voor kleur ogen heb je?</em><br>
< input type="radio" name="oogkleur" value="blauw">Blauw
< input type="radio" name="oogkleur" value="bruin">Bruin
< input type="radio" name="oogkleur" value="grijs">Grijs
< input type="radio" name="oogkleur" value="groen">Groen<br>
< em>Draag je een bril?</em><br>
< input type="radio" name="bril" value="welbril">Ja
< input type="radio" name="bril" value="geenbril">Nee<br>
< input type="submit" value="Verzenden">
< /form>

Checkbox

De checkbox lijkt op de radio button, maar de check box geeft de bezoeker de mogelijkheid om meerdere opties te selecteren. Verder gebruik je de name en value attributen op dezelfde wijze:

Bovenkant formulier

Wat zijn je favoriete soorten muziek?
Pop Rock House Hip Hop

Onderkant formulier

 

De HTML code voor deze checkboxes is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Wat zijn je favoriete soorten muziek?</em><br>
< input type="checkbox" name="muzieksoort" value="Pop" checked>Pop
< input type="checkbox" name="muzieksoort" value="Rock">Rock
< input type="checkbox" name="muzieksoort" value="House">House
< input type="checkbox" name="muzieksoort" value="Hip Hop">Hip Hop<br>
< input type="submit" value="Verzenden">
< /form>

Valt je iets op in dit voorbeeld? Bij deze checkbox staat al een standaardkeuze aangevinkt. In het vakje voor "Pop" staat al een vinkje. Dit zie je in de code terug: value="Pop" checked. "Checked" geeft aan dat een optie standaard geselecteerd moet worden. Dit kan handig zijn om te gebruiken als je weet dat een groot deel van je bezoekers een bepaalde optie zullen aanvinken. Je kunt checked op dezelfde wijze gebruiken voor de radio buttons.