Multidesk.be - Dé gratis PC- en multimedia helpdesk!

---

1. Inleiding

In het vorige deel hebben we al veel bijgeleerd over formulieren. We hebben echter alleen nog maar enkele velden voor tekstinvoer behandeld en de belangrijkste knoppen. Nu gaan we de meer geavanceerdere velden behandelen .

2. De keuzerondjes

2.1. De basis

De keuzerondjes ben je zeker al eens tegengekomen op internet. De gebruiker kan een antwoord aanvinken uit enkele mogelijkheden en er is telkens maar één vinkje mogelijk (dit in tegenstelling met de aankruisvakjes, hierbij zijn er meerdere vinkjes mogelijk).

Het keuzerondje wordt ook wel eens radiobutton genoemd, vandaar ook meteen de waarde bij het type-attribuut, namelijk "radio"

2.2. Attributen bij keuzerondjes

2.2.1. Name

Ook bij dit veld kan name gebruikt worden, maar dit keer heeft het een iets andere functie dan bij de andere velden. Name groepeert dit keer de keuzerondjes. Geef je enkel keuzerondjes, dezelfde waarde bij het name-attribuut, dan weet de browser dat deze rondjes tot dezelfde groep behoren en hij zal er dan voor zorgen dat telkens slechts één rondje van de groep aangevinkt mag zijn.

2.2.2. Value

Je zal nu misschien al gedacht hebben: "Hoe kan er bij de formulierverwerking nu gekeken worden welk rondje aangevinkt is?". Dat is een heel terechte opmerking. Daarom heeft value ook een andere functie bij keuzerondjes. De browser zal de value van het actieve rondje doorgeven aan de pagina die de verwerking doet. Zo kan het aangevinkte rondje achterhaald worden.

2.2.3. checked

Een attribuut dat we nog niet zijn tegengekomen en bij keuzerondjes gebruikt mag worden, is "checked". Hiermee kan je een bepaald rondje al laten aanvinken door de browser, zonder dat de gebruiker al iets gedaan heeft. Checked verwacht geen waarde, enkel het woord in de input-tag is voldoende.

Vanzelfsprekend is het mogelijk in slechts één input-tag per groep checked te plaatsen omdat bij keuzerondjes er maar één rondje aangekruis kan worden per groep .

3. De selectievakjes

3.1. De basis

Selectievakjes hebben dezelfde functie als keuzerondjes. Ze laten de gebruiker toe enkele dingen aan te vinken. Bij selectievakjes is het echter mogelijk meerdere mogelijkheden aan te vinken per groep, bij keuzerondjes was er maar 1 mogelijkheid mogelijk.

Selectievakjes worden ook wel checkboxes genoemd, vandaar de waarde bij het type-attribuut "checkbox".

3.2. Attributen bij selectievakjes

De attributen die beschikbaar zijn voor selectievakjes zijn dezelfde als die voor keuzerondjes, die hierboven bescreven staan.
het name-attribuut groepeert ook deze keer de verschillende vakjes. Het value-attribuut dient om de verwerking te vergemakkelijken en de aangevinkte vakjes te bepalen. En je kan ook bij selectievakjes het checked-attribuut gebruiken, ook bij meerdere vakjes in dezelfde groep.

4. Een uploadveld

4.1. De basis

HTML heeft ook een veld ter beschikking waarmee het mogelijk is om bestanden vanaf de computer up te loaden en te verzenden. Daarbij MOET de afhandeling wel server-side gebeuren en de method MOET op post staan.

Zoals je op de afbeelding kan zien, bestaat het uploadveld uit een tekstveld en een knop "Kiezen…" (dit kan in verschillende browsers anders zijn). Het is niet mogelijk deze tekst aan te passen.

Het uploadveld wordt ook met de input-tag opgebouwd, de waarde die deze keer bij het type-attribuut hoort is "file"

4.2. Attributen bij een uploadveld

4.2.1. Name

Het enige attribuut dat echt nuttig is voor een uploadveld is "name". Net zoals bij andere velden helpt dit om de formulierverwerking te bevorderen. Vooral om een upgeload bestand goed te verwerken is dit heel belangrijk.

5. Een keuzelijst

5.1. De basis

Een standaard keuzelijst is vergelijkbaar met een keuzerondje. Je kan ook slechts één keuze aanvinken. Er kan ook een keuzelijst gemaakt worden waarbij meerdere opties kunnen aangeklikt worden door in te drukken, maar dat is voor straks .

Een keuzelijst is één van de element die niet via de input-tag opgebouwd worden. Een keuzelijst bestaat uit de select-tag, die aangeeft dat er een keuzelijst begint en een option-tag, waarmee een keuze gedefinieerd wordt. Alle option-tags moeten zich tussen de select-tags bevinden

5.2. Attributen bij een keuzelijst

5.2.1. Name

Het name-attribuut kan dit keer enkel toegepast worden op de select-tag. Ook hier dient de naam om de formulierverwerking te bevorderen. Maak er dus een gewoonte van deze erbij te plaatsen.

5.2.2. value

Het value-attribuut is dit keer enkel voor de option-tag. Normaal wordt de tag tussen de option-tags doorgegeven aan de formulierverwerking. Als je die tekst te lang vindt, kan je een kortere waarde meegeven via value.

5.2.3. Selected

Ook bij de keuzelijst kan je standard een keuze selecteren. Die doe door selected in de option-tag te plaatsen.

5.2.4. Disabled

Je kan er ook voor zorgen dat een keuze niet geselecteerd kan worden door disabled in de option-tag te plaatsen. Dit kan handig zijn als je eerst optie bijvoorbeeld is: "Maak je keuze" en de bezoeker dit niet mag selecteren.

6. Geavanceerde mogelijkheden met keuzelijsten

6.1. Meervoudige keuzelijsten

6.1.1. De basis

Zoals ik al zei, is het mogelijk om een keuzelijst te maken waarbij meerdere keuzes gemaakt kunnen worden. De structuur van deze lijst is hetzelfde als bij een gewone keuzelijst, je hoeft enkel het attribuut "multiple" in de select-tag te plaatsen. Je zult zien dat je meerdere keuzes kan selecteren en door de keuzes kan scrollen via een scrollbar naast de lijst.

Opgelet!:Meerdere keuzes selecteren kan enkel door ingedrukt te houden. Vermeld dit dus zeker op je site zodat de bezoekers weten hoe ze meerdere keuzes kunnen selecteren.

6.1.2. Attributen bij een meervoudige keuzelijst

De attributen bij een meervoudige keuzelijst zijn dezelfde als bij een enkelvoudige keuzelijst. Name, value, selected en disabled hebben ook dezelfde functies.

Er is één attribuut die bij een meervoudige keuzelijst hoort en niet bij een enkelvoudige. Dat is "size". Met size kan je het aantal keuzen die zichtbaar zijn zonder scrollen groter maken. Wil je bijvoorbeeld niet dat je gebruikers moeten scrollen in de lijst en je hebt 5 keuzes in je lijst. Dan krijgt het size-attribuut de waarde 5. Het size-attribuut wordt in de select-tag geplaatst.

6.2. Keuzes groeperen per categorie

6.2.1. De basis

Het is ook mogelijk enkele keuzes te groeperen per categorie. Zoals je op bovenstaande afbeelding kan zien is er keuze tussen meerdere besturingsystemen die gegroepeerd staan per categorie. De categorieën kunnen ook niet geselecteerd worden.
Om dit te doen moeten we er een nieuwe tag bijhalen, namelijk optgroup. Je moet de optgroup-tags tussen enkele option-tags plaatsen om ze te groeperen.

6.2.2. Attributen bij een groepering van keuzes

Als je bovenstaande code in je browser test, zal je zien dat de categorieën nog geen naam hebben. Om ze een naam te geven hebben we het attribuut "label" nodig. De waarde van het attribuut wordt de naam van de categorie.

Voor de rest kan je bij een keuzelijst met gegroepeerde keuzes dezelfde attributen gebruiken voor select en option als bij een gewone keuzelijst. Ook "multiple" en "size" zijn mogelijk, die gebruikt worden bij een meervoudige keuzelijst.

7. Slot

Zo, de beide artikels die over formulieren gaan zijn hiermee afgerond. Ik hoop dat het leerrijk was en vooral, dat je het een beetje snapt .

Formulieren zijn heel handige dingen, die je toestaan heel veel informatie met de gebruiker uit te wisselen op een efficiënte manier Vooral als je iets van formulierafhandeling en verwerking kent (met een serverside-taal als PHP, ASP, ... bijvoorbeeld) wordt het heel interessant.

Als je nog vragen hebt kan je ze altijd stellen in de forums. Ze zullen met veel plezier beantwoord worden .

Klik hier om deel 10 fieldsets en labels te lezen.Dit artikel werd geschreven door Simon op woensdag 27 juni 2007 om 17:44 en werd sindsdien 5442 keer gelezen.

Copyright © 2003 - 2010 Multidesk.be · Regels & privacybeleid
Algemene Voorwaarden · Geladen met de steun van Priorweb.