Handleiding HTML - Formulieren - Controls activeren

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

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.

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.

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