Handleiding HTML - Formulieren - Een formulier opmaken

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Een formulier opmaken

De controls in een formulier worden weergegeven als inline elementen. Dat wil zeggen dat ze gewoon op een regel naast of tussen tekst of andere inline inhoud (bijvoorbeeld afbeeldingen) kunnen staan en dat de precieze plek bepaald wordt door die andere inhoud. Het geheel kan daardoor een nogal rommelige indruk geven. Dat is bijvoorbeeld te zien in het volgende formulier: de twee tekstvelden zijn weliswaar even lang, maar de voorafgaande tekst zorgt ervoor dat ze niet netjes onder elkaar staan.

<FORM METHOD="post" ACTION="bestemming"> Je naam: <INPUT NAME="name" SIZE="30"><BR> Je e-mailadres: <INPUT NAME="from" SIZE="30"> </FORM>

De weergave is als volgt:

Om wat meer ordening aan te brengen in het formulier kun je gebruik maken van een tabel. Door de tekst en de controls in aparte cellen te plaatsen, worden de tekstvelden netjes onder elkaar uitgelijnd.

<FORM METHOD="post" ACTION="bestemming"> <TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0"> <TR> <TD>Je naam:</TD> <TD><INPUT NAME="name" SIZE="30"><BR></TD> </TR> <TR> <TD>Je e-mailadres:</TD> <TD><INPUT NAME="from" SIZE="30"><BR></TD> </TR> </TABLE> </FORM>

In de browser ziet dat er als volgt uit:

Als je gebruik maakt van een tabel voor de layout van een formulier, dan moet je de activering en de beëindiging van het FORM element buiten de tabel te plaatsen. De activering en beëindiging van de overige elementen in het formulier (zoals SELECT en TEXTAREA) daarentegen moeten zich juist binnen één cel van de tabel bevinden.

De breedte van een keuzelijst wordt bepaald door de keuzemogelijkheid met de langste omschrijving. Als je meerdere keuzelijsten gebruikt, zal de breedte daarvan dus vrijwel zeker verschillen. Door het toevoegen van een extra keuzemogelijkheid aan alle keuzelijsten met een lange omschrijving kun je ze op eenvoudige wijze even lang maken.

<FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="" SELECTED>------ Maak hier je keuze ------</OPTION> <OPTION VALUE="IE">Microsoft Internet Explorer</OPTION> <OPTION VALUE="NN">Netscape Navigator</OPTION> <OPTION VALUE="MOZ">Mozilla</OPTION> <OPTION VALUE="FF">Firefox</OPTION> <OPTION VALUE="OP">Opera</OPTION> <OPTION VALUE="anders">Andere browser</OPTION> </SELECT> </FORM>

Aan de volgende twee keuzelijsten is de extra keuzemogelijkheid niet toegevoegd. Ze zijn daardoor niet even lang:

Met de extra keuzemogelijkheid worden dezelfde keuzelijsten wel even lang:

Als alternatief kun je de breedte van keuzelijsten ook beïnvloeden door gebruik te maken van stijlen. Die mogelijkheid wordt echter door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund.

Vervolg: Controls groeperen

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