HTML - Fieldset, legend en label


Een Fieldset, legend en een label zijn elementen die in combinatie met elkaar erg handig zijn bij het opbouwen van een formulier. Als eerste een fieldset. Een fieldset dient als een container om een reeks elementen heen. Binnen een fieldset kan dan een legend geplaatst worden om een titel mee te geven aan de inhoud van een fieldset. Een label toont normaal een omschrijving voor een invoerveld zoals naam, adres, postcode, etc.

Om nu een formulier op deze manier op te bouwen start je dus met een fieldset met hier binnen een legend voor de omschrijving, dit ziet er uit zoals hieronder in het voorbeeld.

De code begint en sluit met <form> wat standaard geplaatst wordt bij een formulier.

<form method="post" action="">
        <fieldset>
                <legend>Omschrijving van het formulier</legend>
        </fieldset>
</form>


Omschrijving van het formulier

Daarna worden de invoervelden toegevoegd aan het formulier in combinatie met labels. Binnen een label definieer je dezelfde naam als het ID van het bijbehorende invoerveld.

<form method="post" action="">
        <fieldset>
                <legend>Omschrijving van het formulier</legend>
                <label for="voornaam">Voornaam</label><input type="text" name="voornaam" id="voornaam">
                <label for="anaam">Achternaam</label><input type="text" name="anaam" id="anaam">
                <label for="adres">Adres</label><input type="text" name="adres" id="adres">
        </fieldset>
</form>


Omschrijving van het formulier


Zoals je hierboven kunt zien gaat het nog niet direct goed qua opmaak. De opmaak zoals het positioneren van elementen kan verder ingesteld worden met behulp van CSS. Op deze manier kan met CSS het gehele formulier eenvoudig vormgegeven worden.

Omschrijving van het formulier

De CSS gebruikt voor het formulier hierboven zie je hieronder staan. In de CSS code is een totale breedte opgegeven voor het gehele formulier van 100%. De labels en de bijbehorende invoervelden worden beide links uitgelijnd met een breedte van 50% waardoor deze automatisch netjes naast elkaar zweven. Het voordeel is dat je een formulier of meerdere formulieren makkelijk met behulp van CSS altijd aan kunt passen.

<style type="text/css">
        fieldset {
                width:96%;
                padding-left:2%;
                padding-right:2%;
                border:1px solid #000000;
        }
        legend {
                width:96%;
                margin-bottom:2%;
                padding-left:2%;
                padding-right:5px;
                background-color:#666666;
                font-size:10px;
                color:#FFFFFF;
        }
        label {
                display:block;
                width:50%;
                margin-top:5px;
                float:left;
        }
        input {
                width:50%;
                margin-top:5px;
                float:left;
        }
</style>