Cursus HTML - deel 9: formulieren vervolg

Trefwoorden: HTML, website, cursus, formulieren, forms, keuzerondje, radiobutton, selectievakje, checkbox, keuzelijst, meervoudige keuzelijst

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


http://www.multidesk.be/bijlage/512f1c1d6726ead539adf6e7e0b62b8d.jpg

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"

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="radio" />Vink dit rondje aan.
  4.  
  5. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <input type="radio" name="OS" />Linux
  5.         <input type="radio" name="OS" />Mac
  6.         <input type="radio" name="OS" />Windows
  7.  
  8.         Wat is je geslacht?:
  9.         <input type="radio" name="geslacht" />Man
  10.         <input type="radio" name="geslacht" />Vrouw
  11.  
  12. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <input type="radio" name="OS" value="Linux" />Linux
  5.         <input type="radio" name="OS" value="Mac" />Mac
  6.         <input type="radio" name="OS" value="Win" />Windows
  7.  
  8.         Wat is je geslacht?:
  9.         <input type="radio" name="geslacht" value="m" />Man
  10.         <input type="radio" name="geslacht" value="v" />Vrouw
  11.  
  12. </form>


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 :-).

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <input type="radio" name="OS" value="Linux" checked />Linux
  5.         <input type="radio" name="OS" value="Mac" />Mac
  6.         <input type="radio" name="OS" value="Win" />Windows
  7.  
  8.         Wat is je geslacht?:
  9.         <input type="radio" name="geslacht" value="m" />Man
  10.         <input type="radio" name="geslacht" value="v" checked />Vrouw
  11.  
  12. </form>


3. De selectievakjes


3.1. De basis


http://www.multidesk.be/bijlage/366e19cd326cd0613d6dd0be82241d71.jpg

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".

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="checkbox" />Vink dit vierkantje aan.
  4.  
  5. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welke typen besturingssyteem heb je thuis tot je beschikking?:
  4.         <input type="checkbox" name="OS" value="Linux" checked />Linux
  5.         <input type="checkbox" name="OS" value="Mac" checked />Mac
  6.         <input type="checkbox" name="OS" value="Win" />Windows
  7.  
  8. </form>


4. Een uploadveld


4.1. De basis


http://www.multidesk.be/bijlage/c4c3927b74684e87135ba56cac98d077.jpg

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&#8230;" (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"

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="file" />
  4.  
  5. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="file" name="bestand" />
  4.  
  5. </form>


5. Een keuzelijst


5.1. De basis


http://www.multidesk.be/bijlage/edd26aa737097b4844c3f9886c4ba7c6.jpg

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

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <select>
  5.                 <option>Linux</option>
  6.                 <option>Mac</option>
  7.                 <option>Windows</option>
  8.         </select>
  9.  
  10. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <select name="OS" >
  5.                 <option>Linux</option>
  6.                 <option>Mac</option>
  7.                 <option>Windows</option>
  8.         </select>
  9.  
  10. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:
  4.         <select name="OS" >
  5.                 <option value="linux" >Linux</option>
  6.                 <option value="mac" >Mac</option>
  7.                 <option value="win" >Windows</option>
  8.         </select>
  9.  
  10. </form>


5.2.3. Selected

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

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:       
  4. <select name="OS" >
  5.                 <option value="linux" selected >Linux</option>
  6.                 <option value="mac" >Mac</option>
  7.                 <option value="win" >Windows</option>
  8.         </select>
  9.  
  10. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welk type besturingssysteem gebruik je?:       
  4. <select name="OS" >
  5.                 <option selected disabled>Maak hier je keuze</option>
  6.                 <option value="linux" selected >Linux</option>
  7.                 <option value="mac" >Mac</option>
  8.                 <option value="win" >Windows</option>
  9.         </select>
  10.  
  11. </form>


6. Geavanceerde mogelijkheden met keuzelijsten


6.1. Meervoudige keuzelijsten

6.1.1. De basis


http://www.multidesk.be/bijlage/b0be030ccd7e62d52d9a551dbc481829.jpg

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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welke typen besturingssyteem heb je thuis tot je beschikking?:
  4.         <select multiple>
  5.                 <option>Linux</option>
  6.                 <option>Mac</option>
  7.                 <option>Windows</option>
  8.         </select>
  9.  
  10. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welke typen besturingssyteem heb je thuis tot je beschikking?:
  4.         <select multiple size="3">
  5.                 <option>Linux</option>
  6.                 <option>Mac</option>
  7.                 <option>Windows</option>
  8.         </select>
  9.  
  10. </form>


6.2. Keuzes groeperen per categorie

6.2.1. De basis


http://www.multidesk.be/bijlage/7e62bf3482686e331215cc08d7bb92a5.jpg

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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welke type besturingssysteem gebruik je?:
  4.         <select>
  5.                 <optgroup
  6.                         <option>Ubuntu</option>
  7.                         <option>SUSE</option>
  8.                         <option>Mandriva</option>       
  9.                         <option>Red Hat</option>
  10.                         <option>Fedora Core</option>
  11.                         <option>anders</option>
  12.                 </optgroup>
  13.                 <optgroup
  14.                         <option>Mac OS X Leopard</option>
  15.                         <option>Mac OS X Tiger</option> 
  16.                         <option>Mac OS X Panther</option>       
  17.                         <option>Mac OS X Jaguar</option>
  18.                         <option>Mac OS X Puma</option>
  19.                         <option>ouder</option>
  20.                 </optgroup>
  21.                 <optgroup
  22.                         <option>Windows Vista</option>
  23.                         <option>Windows XP</option>     
  24.                         <option>Windows 2000</option>   
  25.                         <option>Windows Me</option>
  26.                         <option>Windows 98</option>
  27.                         <option>ouder</option>
  28.                 </optgroup>
  29.         </select>
  30.  
  31. </form>


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.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Welke type besturingssysteem gebruik je?:
  4.         <select>
  5.                 <optgroup label="Linux">
  6.                         <option>Ubuntu</option>
  7.                         <option>SUSE</option>   
  8.                         <option>Mandriva</option>       
  9.                         <option>Red Hat</option>
  10.                         <option>Fedora Core</option>
  11.                         <option>anders</option>
  12.                 </optgroup>
  13.                 <optgroup label="Mac">
  14.                         <option>Mac OS X Leopard</option>
  15.                         <option>Mac OS X Tiger</option> 
  16.                         <option>Mac OS X Panther</option>       
  17.                         <option>Mac OS X Jaguar</option>
  18.                         <option>Mac OS X Puma</option>
  19.                         <option>ouder</option>
  20.                 </optgroup>
  21.                 <optgroup label="Windows">
  22.                         <option>Windows Vista</option>
  23.                         <option>Windows XP</option>     
  24.                         <option>Windows 2000</option>   
  25.                         <option>Windows Me</option>
  26.                         <option>Windows 98</option>
  27.                         <option>ouder</option>
  28.                 </optgroup>
  29.         </select>
  30.  
  31. </form>


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 13482 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door een gast op vrijdag 23 mei 2008 om 14:52:25.
Man, je bent bedankt voor de hulp :D

nu heb ik nog wel een vraagje, ik heb een eigen online crimegame, waar ik sommige codes in kan uitvoeren op mijn homepage.

In IE is dit een mooie site (www.wammek.be.tt) maar, ik zou graag screenshots willen maken, die dan verkleind op mijn site zetten en als ze er over komen met hun muis vergroot dit naar een grotere foto.. Nu hoe doe ik dat?

Ik heb hier een script i.v.m dit denk ik:

<br>
<a class='thumbnail' href='#'><img src='/images/screenshots/ThemaBullet.jpg' height='120px' alt='Screenshot 1'><span><img src='/images/screenshots/ThemaBullet.jpg' alt='Je eigen spel'><br />Voorbeeldfoto van je eigen spel.</span></a>
<a class='thumbnail' href='#'><img src='/images/screenshots/ThemaVendetta.jpg' height='120px' alt='Screenshot 1'><span><img src='/images/screenshots/ThemaVendetta.jpg' alt='Je eigen spel'><br />Voorbeeldfoto van je eigen spel.</span></a>
<a class='thumbnail' href='#'><img src='/images/screenshots/ThemaKingBlue.jpg' height='120px' alt='Screenshot 1'><span><img src='/images/screenshots/ThemaKingBlue.jpg' alt='Je eigen spel'><br />Voorbeeldfoto van je eigen spel.</span></a>
<a class='thumbnail' href='#'><img src='/images/screenshots/ThemaBlack.jpg' height='120px' alt='Screenshot 1'><span><img src='/images/screenshots/ThemaBlack.jpg' alt='Je eigen spel'><br />Voorbeeldfoto van je eigen spel.</span></a>
<br><br>
<a href='?p=home&more=yes'>Wil je weten wat wij meer bieden dan andere game-makers?</a><br><br>

Dit komt van de host waar ik mee werk (yourcrime.net - de home zie je het)

Kan je mij soms helpen want als ik deze code invoer lukt het echt niet :(

Heb ook een e-mail waar je me op bereiken kan: --knip--

Grtz

Opmerking van de crew

Je kan best een nieuw onderwerp in het correcte subforum starten. Zo kan je nadien je vraag snel terugvinden en blijft alles overzichtelijk ;).
Je e-mailadres achterlaten op een publiek forum is niet erg verstandig en bovendien tegen de multiquette. Je kan je steeds gratis registreren om zo op de hoogte gehouden te worden van eventuele reacties ;).
SMG
Deze tekst werd het laatst bewerkt voor 0.52 % door SMG op woensdag 4 juni 2008 om 21:25:47.
Bericht geplaatst door een gast op zaterdag 11 oktober 2008 om 18:24:41.
Verklein de afbeelding met een fotobewerkingsprogramma. Plaats je thumbnail(de verkleinde foto)op je site. Maak van die thumbnail een link naar het html bestand waar de grote foto staat en klaar ben je!:D

Groetjes Nicola
  • Pagina
  • 1 van 1