HTML Formulieren


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie formulieren | Verwerken informatie | Verzenden via mailto | Tekstvelden | Keuzerondjes | Aankruisvakjes | Knoppen | Bestanden verzenden | Keuzelijsten | Tekstvakken | Een formulier opmaken | Controls groeperen | Controls activeren | Het gebruik van stijlen | Voorbeeld zoekformulier | Voorbeeld vragenformulier

Gerelateerde elementen: BUTTON | FIELDSET | FORM | INPUT | LABEL | LEGEND | OPTGROUP | OPTION | SELECT | TEXTAREA


Controls activeren

Het LABEL element kun je gebruiken om een label aan een control te verbinden. Klik je op het label, dan wordt het control geactiveerd. In het volgende voorbeeld is gebruik gemaakt van een expliciete verbinding met behulp van het FOR attribuut voor het LABEL element. De waarde van het FOR attribuut moet hetzelfde zijn als de waarde van het ID attribuut van het control.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="IE" ID="ie">
<LABEL FOR="ie">Microsoft Internet Explorer</LABEL><BR>
...
</FORM>

In een browser die het LABEL element ondersteunt, kun je hierna ook op het label klikken om het keuzerondje te activeren.

Geef aan welke browser je gebruikt:







Op een formulier kun je snel naar een volgend veld springen door gebruik te maken van de tab-toets. Normaal worden de verschillende controls afgewerkt in de volgorde, waarin ze in het document staan (probeer dit eens uit in het formulier in de introductie van dit onderdeel). Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. In het volgende voorbeeld is het TABINDEX attribuut gebruikt voor verschillende controls.

<FORM METHOD="post" ACTION="bestemming">
Naam:
<INPUT TYPE="text" SIZE="20" TABINDEX="1"><BR>
<BR>
Mening:
<INPUT TYPE="radio" NAME="mening" VALUE="eens" CHECKED TABINDEX="3">eens
<INPUT TYPE="radio" NAME="mening" VALUE="oneens" TABINDEX="5">oneens<BR>
<BR>
Opmerkingen:<BR>
<TEXTAREA ROWS="3" COLS="30" NAME="opmerking" TABINDEX="7"></TEXTAREA><BR>
<BR>
Browser:
<SELECT NAME="browser" TABINDEX="2">
<OPTION VALUE="IE">Microsoft Internet Explorer</OPTION>
...
</SELECT><BR>
<BUTTON TYPE="submit" TABINDEX="6"><IMG SRC="pos.gif" ...>Verzenden</BUTTON>
<INPUT TYPE="reset" VALUE="Beginwaarden" TABINDEX="4">
</FORM>

Bekijk in een document in een nieuw venster of de browser het TABINDEX attribuut correct ondersteunt.


Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets te definiëren, waarmee een control snel vanaf het toetsenbord geactiveerd kan worden. In het eerder gebruikte voorbeeld voor het LABEL element is het ACCESSKEY attribuut aan het LABEL element toegevoegd. Omdat de waarde voor het ID attribuut slechts één keer mag voorkomen in een document, zijn de waarden voor het FOR en ID attribuut wat aangepast. De eerste letter van elk label is gebruikt als sneltoets en overeenkomstig het gebruik bij gewone sneltoetsen onderstreept. Dat is gedaan met behulp van Cascading Style Sheets, zodat in ieder geval een deel van de browsers die het ACCESSKEY attribuut niet kennen, de onderstreping weglaten.

<FORM METHOD="post" ACTION="bestemming">
<I>Geef aan welke browser je gebruikt:</I><BR>
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="IE" ID="Bie" ACCESSKEY="i">
<LABEL FOR="Bie">Microsoft <SPAN STYLE="text-decoration: underline">I</SPAN>nternet Explorer</LABEL><BR>
...
</FORM>

Druk in een browser die het ACCESSKEY attribuut ondersteunt op de sneltoets om de browser te selecteren: in de meeste browsers de Alt-toets (op Windows systemen) of de Ctrl-toets (op Macintosh systemen) plus de toets van de onderstreepte letter. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden, pas daarna kan de toets van het aangewezen karakter worden ingedrukt. In Firefox 2.0 is de toetscombinatie gewijzigd in Shift, Alt en het aangegeven karakter.

Geef aan welke browser je gebruikt:






Hoewel het LABEL element en de attributen TABINDEX en ACCESSKEY niet door oudere browsers ondersteund worden, kun je ze zonder problemen gebruiken. Browsers die ze niet kennen negeren ze eenvoudig.


Vervolg: Het gebruik van stijlen



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (http://www.handleidinghtml.nl/)
Copyright © 1995-2016 Hans de Jong
Laatste wijziging: 23 juni 2007