Formulier opbouw
Nu probeer ik een aantal dingen in het oog te houden bij het maken van deze class:
a). Veiligheid
Passwords moeten uiteraard niet terug naar de browser worden verstuurd
b). Gebruiksvriendelijkheid
De gebruiker moet de formulieren makkelijk kunnen invullen, geen hinder hebben en het moet op elke manier bekeken kunnen worden. Wat betekend dat het op zowel Firefox, IE (en andere bekende browsers) te zien moet zijn, maar dat het ook door screenreaders goed gelezen kan worden en dat andere toepassingen met de HTML mogelijk zijn.
c). Toepasbaarheid
De maker van het formulier (er blijft uiteraard altijd een maker) moet in staat zijn alles te kunnen wat normaal ook kan. Als door de class opties onmogelijk gemaakt worden, is dit dus niet goed.
d). Makkelijk te stijlen
Het hele formulier moet d.m.v. CSS geheel te stijlen zijn.
Ik probeer deze vier punten zo goed mogelijk tot hun recht te brengen en dit heeft mij geleid tot diepgang in een formulier:
1). Form
Het formulier zelf. De form-tag. Deze word vaak niet gestyled, maar dit is uiteraard wel mogelijk.
2). Fieldset
Een deel van een formulier. De fieldset-tag in samenwerking met de legend-tag. Dit zorgt voor een duidelijke verdeling in een formulier
3). formLine
Hoewel het in de class mogelijk is om in de bovenste twee tags een input-veld te plaatsen, is het eigenlijk de bedoeling om dat hier te doen. Een formLine heeft geen standaard tag, zoals Form en Fieldset dat wel hebben en de label-tag vervult deze functie in veel formulieren.
Nu heb ik besloten dat een formLine meerdere inputvelden moet kunnen bevatten, zoals:
Code (php)
1
2
2
Naam: [voornaam][tussenvoegsel][achternaam]
Geboortedatum: [day][maand][jaar]
Geboortedatum: [day][maand][jaar]
De class verbind een label-tag met het éérste input-veld.
Nu was origineel een formLine bij mij gemaakt d.m.v. de p-tag, later kwam de div-tag. Nu zit ik opnieuw aan een verandering te denken:
Bij een groep checkboxen heb je een fieldset nodig voor een vraag:
Code (php)
1
2
3
4
5
2
3
4
5
Welke kleuren vind u mooi?
[ ] Groen
[x] Blauw
[ ] Paars
...
[ ] Groen
[x] Blauw
[ ] Paars
...
De fieldset verbind de vraag (in de legend) met de checkboxen, die op hun beurt weer verbonden zijn met een label-tag:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<fieldset>
<legend>Welke kleuren vind u mooi?</legend>
<label id="groen"><input type="checkbox" name="color[]" value="1" id="groen" /> Groen</label>
<label id="blauw"><input type="checkbox" name="color[]" value="2" id="blauw" /> Blauw</label>
<label id="paars"><input type="checkbox" name="color[]" value="3" id="paars" /> Paars</label>
</fieldset>
<legend>Welke kleuren vind u mooi?</legend>
<label id="groen"><input type="checkbox" name="color[]" value="1" id="groen" /> Groen</label>
<label id="blauw"><input type="checkbox" name="color[]" value="2" id="blauw" /> Blauw</label>
<label id="paars"><input type="checkbox" name="color[]" value="3" id="paars" /> Paars</label>
</fieldset>
Nu is mijn vraag of ik dit ook moet toepassen op een 'gewone' input. Dan krijg je:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<fieldset>
<legend><label for="fname">Uw naam</label></legend>
<input type="text" name="fname" id="fname" title="Voornaam" />
<input type="text" name="tussen" id="tussen" title="Tussenvoegsel" />
<input type="text" name="lname" id="lname" title="Achternaam" />
</fieldset>
<legend><label for="fname">Uw naam</label></legend>
<input type="text" name="fname" id="fname" title="Voornaam" />
<input type="text" name="tussen" id="tussen" title="Tussenvoegsel" />
<input type="text" name="lname" id="lname" title="Achternaam" />
</fieldset>
Nu is het punt waar ik nu mee zit. Is dit begrijpelijk voor screenreaders en browsers? Deze fieldset komt namelijk wel binnen een andere fieldset:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="currentpage.php" method="post">
<fieldset>
<legend>Uw gegevens</legend>
<fieldset>
<legend><label for="fname">Uw naam</label></legend>
<input type="text" name="fname" id="fname" title="Voornaam" />
<input type="text" name="tussen" id="tussen" title="Tussenvoegsel" />
<input type="text" name="lname" id="lname" title="Achternaam" />
</fieldset>
<fieldset>
<legend><label for="email">Uw e-mail adres</label></legend>
<input type="text" name="email" id="email" title="Uw e-mail adres" />
</fieldset>
</fieldset>
</form>
<fieldset>
<legend>Uw gegevens</legend>
<fieldset>
<legend><label for="fname">Uw naam</label></legend>
<input type="text" name="fname" id="fname" title="Voornaam" />
<input type="text" name="tussen" id="tussen" title="Tussenvoegsel" />
<input type="text" name="lname" id="lname" title="Achternaam" />
</fieldset>
<fieldset>
<legend><label for="email">Uw e-mail adres</label></legend>
<input type="text" name="email" id="email" title="Uw e-mail adres" />
</fieldset>
</fieldset>
</form>
Mijn vraag; Is deze opbouw van een formulier verstandig en verantwoord? Of raden jullie mij een andere opbouw aan?
Er zijn nog geen reacties op dit bericht.