1. Inleiding
Formulieren worden veel gebruikt om websites interactiever te maken. Formulieren zijn als het ware de 'schakel' tussen de browser van de bezoeker, en de interactieve contents van een pagina (PHP, ASP, etc.). Formulieren spelen dus een behoorlijk grote rol in websites. Helaas is het zo dat veel formulieren niet netjes geschreven worden. Het komt bijvoorbeeld veel voor dat men gewoon de <input> tags in een tabel zet en dat was dan dat. En dat is jammer, in deze tutorial ga ik uitleggen waarom dat niet goed is, en hoe het wel moet. Deze tutorial gaat dus niet in op de functionaliteit van formulieren, daarover bestaat al een goede op sitemasters (behalve het einde dan, daar wordt gebruik gemaakt van een tabel).
top 2. Waarom?
Waarom geen tabel? Ten eerste is een tabel bedoeld om informatie geordend weer te geven, niet om de vormgeving van websites in te maken. En zo ook niet de vormgeving van formulieren. Een tabel heeft bovendien een onnodig lange code en is niet al te flexibel. En het 'verteld' verder niks over het formulier. Wat bijvoorbeeld handig is voor zoekmachines.
Hoe moet het dan wel?
Voor formulieren is er in html het element <label>. Net zoals je op de suikerpot een label plakt met 'suiker' erop, kan je op een inputveld in een formulier ook een label plakken. Dit doe je zo:
Je ziet dat als je hier op de tekst 'Naam:' klikt, automatisch het inputveld naam geactiveerd wordt. Als je eerder een formulierveld hebt ingevuld met id="naam", suggereert je browser die eerdere invoer nu als mogelijke input! Het gebruik van de <label> tag komt ook je semantiek ten goede.
top 3. Formulier
Maar eigenlijk ging deze tutorial over de opmaak van formulieren met CSS, liever dan met tables. We schrijven dus eerst een formulier, wat we vervolgens gaan opmaken. Ik maak een simpel contactformuliertje:
Je kan deze kopiëren om verder te gebruiken bij deze tutorial, of je eigen formuliertje schrijven. Het maakt niet uit. Dit formulier is valide xhtml 1.0 strict.
top 4. CSS
En nu gaan we ons formulier opmaken door middel van CSS.
Eerst geven we de form tag standaard opmaak mee. Ik geef hem een breedte van 350 pixels, 15 pixels padding aan alle kanten, een kleine Arial als lettertype en een dunne grijze streepjes border eromheen.
Dan maken we het label op. Omdat we willen dat het label links van de input tags komt te staan, geven hem float: left; mee. En een absolute breedte, in mijn geval is dat 75 pixels. Verder geef ik aan dat de tekst rechts uitgelijnd moet worden, en dat er tussen het label en het inputveld 15 pixels marge moet zitten.
Dan de opmaak van een inputveld. Een achtergrondkleurtje, font grootte, solide dunne grijze border eromheen en wat ruimte onderaan zodat ze niet tegen elkaar plakken. Spreekt voorzich lijkt me.
Ook nog een aparte opmaak voor de select box. In principe gelijk aan de opmaak van de input box, behalve dat ik deze een absolute breedte meegeef (120 pixels, in dit geval even breed als de text inputvelden).
En ook nog eens voor de textarea. Ik geef hem absolute afmetingen mee, in de html óók cols en rows omdat dit nu eenmaal moet als je het valid wilt hebben, en hier de 'echte' afmetingen. Net als de andere inputboxjes een achtergrondkleur en een border. Een textarea kan je ook een lettertype meegeven (input trouwens ook), wat vaak mooier is dan de standaard courier new.
top 5. Voorbeeld
En als voorbeeld de output van de code gebruikt in deze tutorial: een keurig formulier, zonder tabellen. Logisch, xhtml 1.0 strict en semantisch verantwoord.
top 6. Slot
Dit was het dan alweer. Deze tutorial leek me niet al te moeilijk. Het is eigenlijk best logisch en de gebruikte html/css is vrij basic. Het resultaat is echter veel beter dan met tables.
Als je opmerkingen hebt om deze tutorial te verbeteren, plaats ze dan bij nota's want ik hoor het graag. Voor vragen kan jij mij ook pm'en.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.8) 
