Stylesheets én formulier, hoe met het nou?

[alienfruit]

Ik ben al tijdje bezig met het bouwen van een paar leuke formulieren die ik door middel van stylesheet vormgeef. Alleen loop ik toch tegen wat problemen aan, als je kijkt naar voorbeelden op het internet.

Volgens verschillende sites is het gebruik van <fieldset> in combinatie met <label> de correcte manier op hedendaags formulieren te maken. Alleen nu kan je een formulier op verschillende manier vormgeven, namelijk de componenten langs de caption, of de componenten onder de caption.

Nu vind ik zelf de component langs de caption, het fijnst alleen nu krijg ik dit niet fatsoenlijke gestileerd:

HTML:

<fieldset id="fs_1">
    <legend>Adresgegevens</legend>
   
    <label for="straatnaam">Straatnaam</label>
    <input type="text" name="straatnaam" id="straatnaam" value="" class="type-text" />
</fieldset>

Maar je kan het volgens anderen ook op de volgende manier zoals hieronder, waarbij de component wordt ingesloten in de caption.

HTML:

<fieldset id="fs_2">
    <legend>Adresgegevens</legend>
   
    <label for="straatnaam">Straatnaam
    <input type="text" name="straatnaam" id="straatnaam" value="" class="type-text" /></label>
</fieldset>

Nu vraag ik me af wat nou de juiste manier oftewel wat is "semantiek" correct? Ik zou zelf denken dat de eerste voorbeeld de juiste manier is...

Als je nu kijkt naar het formulier van dit forum, gebruiken ze ook het eerste voorbeeld. Alleen dan wordt er ook nog gebruik gemaakt van een definition list (<DL />).


De onderste voorbeeld weer gemakkelijker te vormgeven als je component onder je caption wil.

Cascading Stylesheet:

fieldset {
    border: none;
    font-weight: bold;
    margin-bottom: 0.5em;
}

#fs_2 label {
    font-weight: normal;
    background-color: yellow;
    width: auto;
}
        
#fs_2 input.type-text {
    position: relative;
    top: 2em;
    left: -5em;
}
        
#fs_1 label {
    font-weight: normal;
    margin-top: 0.5em;
}
        
#fs_1 input.type-text {
    position: relative;
    background-color: silver;
left: 15em;
}

Natuurlijk is er ook XForms alleen dat kan naar mijn mening alleen gebruikt worden, als je controle hebt over de user agents die gebruikt wordt.

[BtM909]

Ik vind het vaak ook geklooi, moet zeggen dat ik voor layouting steeds vaker voor optie 1 kies (wellicht een kwestie van smaak).

Hieronder eventueel nog een handig lijstje:
http://veerle.duoh.com/comments.php?id=148_0_2_20_C9
http://www.mikezilla.com/exp0030.html
http://www.outfront.net/t.../adv_tech/funkyforms1.htm
http://www.picment.com/articles/css/funwithforms/
http://www.realworldstyle.com/forms.html
http://www.themaninblue.com/writing/perspective/2004/03/24/

---

Nu vraag ik me af wat nou de juiste manier oftewel wat is "semantiek" correct? Ik zou zelf denken dat de eerste voorbeeld de juiste manier is...

Beide opzetten mogen, waarbij W3C wel aangeeft dat je input in je label-element plaatsen gebruikelijk indien:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

[ Voor 36% gewijzigd door BtM909 op 04-08-2005 14:40 ]

[Verwijderd]

volgens w3c (WCAG 2.0 van juni) is de expliciete methode te prefereren boven de impliciete

http://www.w3.org/TR/WCAG20-HTML-TECHS/#label-implicit

[ Voor 8% gewijzigd door Verwijderd op 04-08-2005 15:00 ]

[Rickets]

Ik probeer zoveel mogelijk optie 2 te gebruiken. Dat scheelt weer for-attributen die ik niet hoef te maken. Wat betreft semantiek zijn beide opties hetzelfde in mijn ogen; je koppelt een stuk tekst aan een control.

Wat me verder opvalt aan de voorbeelden en tutorials online, is dat ze vaak niet verder gaan dan simpele formulieren; contactformulieren e.d.. Zodra je wat lastigere formulierindelingen wilt maken, moet je echt een hoop kutten om het netjes te maken, zowel qua HTML, CSS en browserissues, en vaak lukt het dan nog maar voor de helft. In dat geval vind ik het geen probleem om een tabel daarvoor te gebruiken.

[alienfruit]

Aha, dus toch optie 1 eigenlijk, ik zie de laatste tijd namelijk veel formulieren gemaakt via optie 2.

[Verwijderd]

Rickets schreef op donderdag 04 augustus 2005 @ 15:00:
Wat me verder opvalt aan de voorbeelden en tutorials online, is dat ze vaak niet verder gaan dan simpele formulieren; contactformulieren e.d.. Zodra je wat lastigere formulierindelingen wilt maken, moet je echt een hoop kutten om het netjes te maken, zowel qua HTML, CSS en browserissues, en vaak lukt het dan nog maar voor de helft. In dat geval vind ik het geen probleem om een tabel daarvoor te gebruiken.

heb je een voorbeeld van een ingewikkelder vorm? Ik wil me er namelijk wel eens aan wagen, iha is dat namelijk erg leerzaam

[crisp]

Rickets schreef op donderdag 04 augustus 2005 @ 15:00:
Ik probeer zoveel mogelijk optie 2 te gebruiken. Dat scheelt weer for-attributen die ik niet hoef te maken.

In IE werkt het focussen van het input element niet als je label geen for-attribuut heeft die verwijst naar een ID op je input element.

[Rickets]

Verwijderd schreef op donderdag 04 augustus 2005 @ 15:48:
heb je een voorbeeld van een ingewikkelder vorm? Ik wil me er namelijk wel eens aan wagen, iha is dat namelijk erg leerzaam

Ik heb nog geen tijd gehad om er aandacht aan te besteden, en ik zie er zelf ook wel een uitdaging in Mocht het t.z.t. niet lukken laat ik het wel weten.

crisp schreef op donderdag 04 augustus 2005 @ 15:55:
In IE werkt het focussen van het input element niet als je label geen for-attribuut heeft die verwijst naar een ID op je input element.

Dat is me nooit opgevallen, ik kon m'n tijd beter gebruiken dan rondklikken in IE om te kijken wat er allemaal niet werkt Tnx iig

[crisp]

Verwijderd schreef op donderdag 04 augustus 2005 @ 15:48:
[...]


heb je een voorbeeld van een ingewikkelder vorm? Ik wil me er namelijk wel eens aan wagen, iha is dat namelijk erg leerzaam

Daarom ook mijn keuze hier op GoT voor een definition list; een dd-element mag weer blocklevel elementen bevatten wat je net weer wat meer mogelijkheden geeft.

[Verwijderd]

een fieldset mag toch sowieso blocklevel elementen bevatten ik snap je punt niet zo goed.

ik vind ook wel dat een dl semantisch bijzonder veel toe kan voegen aan een formulier, maar je zou ook gewoon met p's kunnen werken

[We Are Borg]

Even een vraag wat wel strekt met het onderwerp van dit topic:

Als je nu het volgend hebt:

<fieldset id="fs_1">
<legend>Adresgegevens</legend>

<label for="straatnaam">Straatnaam</label>
<input type="text" name="straatnaam" id="straatnaam" value="" class="type-text" />
</fieldset>

In hoeverre is dit nu sematisch correct. Ik kom namelijk steeds verschillende opties tegen. Soms het bovenstaande, maar ook:

- <p> om de labels en de input tesamen
- tabel
- definition list
- of niks zoals bij de topicstart, dus steeds puur een label + input

Wat is nu eigenlijk het meest correct ?

[ Voor 30% gewijzigd door We Are Borg op 05-08-2005 00:12 ]

[crisp]

Verwijderd schreef op donderdag 04 augustus 2005 @ 22:43:
een fieldset mag toch sowieso blocklevel elementen bevatten ik snap je punt niet zo goed.

Ik doelde eigenlijk op het nadeel van

HTML:

<label>text <input></label>

Uiteraard kan het ook zo:

HTML:

<p>
    <label>text</label>
    <input>
</p>

Maar een label heeft een 1-op-1 relatie met een input, wat nu als je meerdere inputs onder hetzelfde 'kopje' wilt laten vallen. Met een definition list kan je ze dan groeperen in een dd-element, of je kan zelfs meerdere dd-elementen onder een dt hangen.

[Woudloper]

Zelf zou ik gaan voor optie 1 aangezien deze (zoals crisp al aangeeft) beter werkt in combinatie met Internet Explorer.

Voor het lijstje van BtM909 heb ik nog de volgende link:

http://www.aplus.co.yu/css/forms/?css=1

Hier staat een goed voorbeeld voor het gebruikt met formulieren en de verschillende mogelijkheden (een stuk of 4) met betrekking tot het stylen met CSS.

[Verwijderd]

crisp schreef op vrijdag 05 augustus 2005 @ 00:28:
[...]

Ik doelde eigenlijk op het nadeel van

HTML:

<label>text <input></label>

Uiteraard kan het ook zo:

HTML:

<p>
    <label>text</label>
    <input>
</p>

Maar een label heeft een 1-op-1 relatie met een input, wat nu als je meerdere inputs onder hetzelfde 'kopje' wilt laten vallen. Met een definition list kan je ze dan groeperen in een dd-element, of je kan zelfs meerdere dd-elementen onder een dt hangen.

een <label> is geen kopje, daar heb je gewoon hx elementen voor, in een formulier werkt het wat dat betreft hetzelfde als in "gewone" html:

code:

<form>
  <h1>
  <fieldset>
    <legend>
    <h2>
    <p><label><input></p>
    <!-- etc -->
   </fieldset>
</form>

een label heeft altijd betrekking op maar 1 control, niet meer en ook niet minder.
Zet bovenstaande html eens tegenover "gewone" html:

code:

<div>
  <h1>
  <div>
    <h2>
    <p>text lalalala <span>foep</span></p>
    <!-- etc -->
   </div>
</div>

in principe zijn <form> en <fieldset> gewoon dedicated <div> elementen

[ Voor 51% gewijzigd door Verwijderd op 05-08-2005 09:39 . Reden: even aangepast ]

[crisp]

Verwijderd schreef op vrijdag 05 augustus 2005 @ 09:30:
[...]


een <label> is geen kopje, daar heb je gewoon hx elementen voor

Daarom zette ik het ook tussen aanhalingstekens Ik bedoel eigenlijk een term die kort de invoervelden beschrijft, niet noodzakelijk ook echt een heading (hoewel je het ook wel zo zou kunnen zien, en een heading heeft ook betrekking op hetgeen daarna volgt).

[Verwijderd]

fieldsets zijn ook te nesten he, je hebt dus altijd een grouping device. Ben verder wel met je eens hoor, dat dl's semantisch toevoegend kunnen zijn (verder ziet het er ook wel aardig uit zonder styles, maar dan zijn we eigenlijk weer html voor layout redenen aan het gebruiken, dus dat mag geen overweging zijn)

[faabman]

* faabman gaat altijd voor de volgende variant

HTML:

<fieldset>
  <label for="id"><span>naam veld</span><input id="id" type="text" /></label>
</fieldset>

radiogroups / checkboxes groepeer ik dan met een fieldset

Deze variant werkt in ieder geval voor IE. Je hebt genoeg mogelijkheden om te stylen. En je houdt de elementen bij elkaar.