HTML semantics: Forms

March 13th, 2013 | 9 min read | HTML5, Web, Web semantics

In deze tutorial ga ik het eens over iets helemaal anders hebben, namelijk semantic HTML. Semantic HTML is de “kunst” om de juiste HTML tags voor de juiste doeleinden te gebruiken. Er zijn hevige discussies op het internet te vinden over semantics, de ene vindt het een must, de andere vindt het tijdverspilling. In deze eerste tutorial rond semantics ga ik een HTML form opbouwen en stylen, zoals het zou moeten.

Introductie tot semantics

Iedereen kent forms, je plaatst een paar input-elementen bij elkaar, zet er een submit button bij en plaatst het in een form en klaar is kees. Maar wat doe je als je een tekst wilt plaatsen voor je input-elementen? Gebruik je een span? Plaats je gewoon de tekst? Of wat doe je als je in je forrm extra witruimte wilt voorzien tussen meerdere blokken binnen je form? Plaats je er dan een div rond?

Je ziet het, je hebt dankzij de combinatie van HTML en CSS honderden mogelijkheden om hetzelfde te bereiken, de vraag is alleen zijn al die manieren even goed?

Eerste form

Stel dat we een eenvoudige form opstellen waar we onze naam en extra informatie in kunnen opgeven, dan kunnen we iets als in onderstaand voorbeeld opgeven:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>form-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <form name="myForm">
            Naam: <input type="text" name="name" /><br />
            Voornaam: <input type="text" name="firstname" /><br />
            Geslacht: <input type="radio" name="sex" value="male" /> Man<br />
            <input type="radio" name="sex" value="female" /> Vrouw<br />
            Interesses: <input type="checkbox" name="interests" value="Java" /> Java<br />
            <input type="checkbox" name="interests" value="HTML" /> HTML<br />
            <input type="checkbox" name="interests" value="Dojo" /> Dojo<br />
            <input type="checkbox" name="interests" value="jQuery" /> jQuery<br />
            <input type="checkbox" name="interests" value="CSS" /> CSS<br />
            <input type="checkbox" name="interests" value="Node.js" /> Node.js<br />
            <input type="submit" value="Verzenden" />
        </form>
    </body>
</html>

Deze form werkt perfect en kan mits wat CSS aanpassingen waarschijnlijk direct gebruikt worden. De vraag is, is dit leesbaar? Zijn we hiermee goed HTML aan het gebruiken? Wat je hieraan kan verbeteren ga ik in de volgende delen uitleggen.

Groepeer gegevens

Een eerste stap is dat we gegevens kunnen groeperen. Gegevens groeperen kan je, zoals ik eerder al zei, eenvoudig met een

<div>

doen, of je voorziet gewoon een extra line break. In forms echter kan je hetzelfde bereiken door middel van de

<fieldset>

HTML tag, die een set van velden definieert.

Een voorbeeld:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>form-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <form name="myForm">
            <fieldset>
                Naam: <input type="text" name="name" /><br />
                Voornaam: <input type="text" name="firstname" /><br />
            </fieldset>

            <fieldset>
                Geslacht: <input type="radio" name="sex" value="male" /> Man<br />
                <input type="radio" name="sex" value="female" /> Vrouw<br />
            </fieldset>
            <fieldset>
                Interesses: <input type="checkbox" name="interests" value="Java" /> Java<br />
                <input type="checkbox" name="interests" value="HTML" /> HTML<br />
                <input type="checkbox" name="interests" value="Dojo" /> Dojo<br />
                <input type="checkbox" name="interests" value="jQuery" /> jQuery<br />
                <input type="checkbox" name="interests" value="CSS" /> CSS<br />
                <input type="checkbox" name="interests" value="Node.js" /> Node.js<br />
            </fieldset>
            <input type="submit" value="Verzenden" />
        </form>
    </body>
</html>

Dit maakt de form op zich al overzichtelijker, gewoon omdat je als developer nu al een duidelijk overzicht hebt wat bij wat hoort. Ook in je browser ziet het resultaat er al totaal anders uit. Je hebt wel te maken met van die enorm jaren 90 borders rond je form, maar deze vallen met CSS eenvoudig te verwijderen.

gegroepeerd-resultaat

Labels

Als je een bijschrift of tekst bij je input-velden plaatst, dan plaats je deze in een label en niet in een span of gewoon zonder een tag.

Naast dat je ze gewoon bij je beschrijving kan gebruiken kan je ze ook bij elke checkbox en/of radiobutton gebruiken. Het voordeel daarvan is dat de label klikbaar is en ervoor zorgt dat de gebruiker dus ook je label kan aanklikken om het form element aan te duiden.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>form-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <form name="myForm">
            <fieldset>
                <label for="name">Naam:</label><input type="text" name="name" /><br />
                <label for="firstname">Voornaam:</label><input type="text" name="firstname" /><br />
            </fieldset>

            <fieldset>
                <label for="sex">Geslacht:</label>
                <label>
                    <input type="radio" name="sex" value="male" /> Man
                </label>
                <label>
                    <input type="radio" name="sex" value="female" /> Vrouw
                </label>
            </fieldset>
            <fieldset>
                <label for="interests">Interesses:</label>
                <label>
                    <input type="checkbox" name="interests" value="Java" /> Java
                </label>
                <label>
                    <input type="checkbox" name="interests" value="HTML" /> HTML
                </label>
                <label>
                    <input type="checkbox" name="interests" value="Dojo" /> Dojo
                </label>
                <label>
                    <input type="checkbox" name="interests" value="jQuery" /> jQuery
                </label>
                <label>
                    <input type="checkbox" name="interests" value="CSS" /> CSS
                </label>
                <label>
                    <input type="checkbox" name="interests" value="Node.js" /> Node.js
                </label>
            </fieldset>
            <input type="submit" value="Verzenden" />
        </form>
    </body>
</html>

Data beschrijving

Momenteel zit alles al vrij goed in elkaar, het enige waar je nog commentaar op kan hebben zijn de line-breaks na de eerste twee tekstvelden.

Line-breaks worden over het algemeen niet gebruikt voor dergelijke zaken , een beter manier zou zijn om te werken met een definitie lijst.

Een definitie-lijst is een definitie met daarbij de bijhorende beschrijving. In dit geval zou de label de definitie zijn en het form-element de bijhorende beschrijving. Als resultaat krijgen we dan:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>form-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <form name="myForm">
            <fieldset>
                <dl>
                    <dt><label for="name">Naam:</label></dt>
                    <dd><input type="text" name="name" /></dd>
                </dl>
                <dl>
                    <dt><label for="firstname">Voornaam:</label></dt>
                    <dd><input type="text" name="firstname" /></dd>
                </dl>
            </fieldset>

            <fieldset>
                <dl>
                    <dt><label for="sex">Geslacht:</label></dt>
                    <dd>
                        <label>
                            <input type="radio" name="sex" value="male" /> Man
                        </label>
                        <label>
                            <input type="radio" name="sex" value="female" /> Vrouw
                        </label>
                    </dd>
                </dl>
            </fieldset>
            <fieldset>
                <dl>
                    <dt><label for="interests">Interesses:</label></dt>
                    <dd>
                        <label>
                            <input type="checkbox" name="interests" value="Java" /> Java
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="HTML" /> HTML
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="Dojo" /> Dojo
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="jQuery" /> jQuery
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="CSS" /> CSS
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="Node.js" /> Node.js
                        </label>
                    </dt>
                </dl>
            </fieldset>
            <input type="submit" value="Verzenden" />
        </form>
    </body>
</html>

Je zou kunnen discussiëren of dit echt zo veel nut heeft of niet. Maar als je bijvoorbeeld gaat kijken in de situatie van het geslacht, dan zie je duidelijk dat bij de definitie “Geslacht” de beschrijving “Man” en “Vrouw” hoort.

Styling

Het mooie aan deze form die in een nieuw jasje gegoten is is dat deze ook eenvoudig te stylen is met CSS. We hebben immers een overvloed aan extra HTML tags toegevoegd die elk element binnen de form kunnen identificeren.

Een voorbeeld:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>form-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <style type="text/css">
            form fieldset {
                width: 300px;
                margin: 10px 0px;
                border: none;
            }

            form fieldset dt {
                width: 100px;
                float: left;
            }

            form fieldset dd {
                width: 150px;
                float: right;
            }

            form fieldset label {
                display: block;
            }
        </style>
        <form name="myForm">
            <fieldset>
                <dl>
                    <dt><label for="name">Naam:</label></dt>
                    <dd><input type="text" name="name" /></dd>
                </dl>
                <dl>
                    <dt><label for="firstname">Voornaam:</label></dt>
                    <dd><input type="text" name="firstname" /></dd>
                </dl>
            </fieldset>

            <fieldset>
                <dl>
                    <dt><label for="sex">Geslacht:</label></dt>
                    <dd>
                        <label>
                            <input type="radio" name="sex" value="male" /> Man
                        </label>
                        <label>
                            <input type="radio" name="sex" value="female" /> Vrouw
                        </label>
                    </dd>
                </dl>
            </fieldset>
            <fieldset>
                <dl>
                    <dt><label for="interests">Interesses:</label></dt>
                    <dd>
                        <label>
                            <input type="checkbox" name="interests" value="Java" /> Java
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="HTML" /> HTML
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="Dojo" /> Dojo
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="jQuery" /> jQuery
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="CSS" /> CSS
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="Node.js" /> Node.js
                        </label>
                    </dt>
                </dl>
            </fieldset>
            <input type="submit" value="Verzenden" />
        </form>
    </body>
</html>

Zoals je kan zien ziet deze form er veel aangenamer uit om naar te kijken, zowel in de broncode als visueel.

final-result

Voordelen

Deze aanpak heeft een aantal voordelen die toch niet over het hoofd te zien zijn. Zo is het, zoals ik net al zei, veel leesbaarder voor developers maar biedt het ook voordelen om op een eenvoudige manier CSS aanpassingen te verrichten. De CSS aanpassingen die we net gemaakt hebben moet je niet proberen op de oorspronkelijke HTML form, want dat gaat niet werken.

Een ander groot voordeel is dat deze aanpak er meestal ook voor zorgt dat je minder  inconsistenties hebt tussen verschillende browsers. Je gebruikt immers de HTML elementen waarvoor ze voorzien zijn, en wat je van je browser kan verwachten is dat hij toch (op z’n minst) de HTML elementen juist rendert indien ze gebruikt worden waarvoor ze dienen.

Het volgende voordeel is gebruiksvriendelijkheid. Zoals ik eerder aanhaalde met de labels is het veel handiger omdat je nu bijvoorbeeld op de label “Man” kan klikken en dat daardoor deze optie geselecteerd wordt.

Het laatste en misschien wel belangrijkste voordeel is SEO of Search Engine Optimization. SEO en semantics zijn meestal twee handen op één buik. Als jij ervoor zorgt dat je HTML elementen goed in elkaar zitten, dan maakt het het ook veel eenvoudiger voor search robots om jouw website op de juiste manier te bekijken en te indexeren waardoor je dus potentieel meer kan bereiken.

Nadelen

Er zijn ook enkele nadelen verbonden aan semantics. Zo kan je bijvoorbeeld afvragen of het de moeite waard is om eerst uren te zoeken naar het juiste HTML element, terwijl je in die tijd misschien al lang een werkende oplossing kon opleveren.

Een ander nadeel is dat je ook kan overdrijven. Je kan met semantics net zover gaan als je zelf wilt. Als je overdrijt zal je echter het tegenstelde bereiken van wat je wilt, je broncode wordt complexer, minder leesbaar en moeilijker om styling op toe te passen omdat niemand er gewoon nog aan uit kan.

Conclusie

Semantics is iets waar aandacht aan mag besteed worden, maar net zoals alle zwart/wit-scenario’s is meestal de grijze zone die waar je in wilt werken. Je wilt niet teveel tijd spenderen aan semantics, maar tegelijk wil je ook dat het zo goed mogelijk in elkaar steekt.

Het enige wat ik kan doen in deze tutorial is overbrengen hoe je semantics kan gebruiken, om er zo voor te zorgen dat je geen uren meer bezig bent met het zoeken naar het juiste form element, waardoor dat alweer een nadeel minder is.

Download project

Download – form-semantics-example.tar.gz (11 kB)

Demo

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.