[HTML] <label> element en invoervelden

[remcotolsma]

Ik maak tijdens het ontwikkelen van HTML formulieren regelmatig gebruik van de volgende constructie:

HTML:

<label>
  <strong>Naam:</strong>
  <input name="name" type="text" />
</label>

Ik bedacht me vandaag dat dit eigenlijk wel een rare constructie is. Het invoerveld bevindt zich immers binnen het <label> element. Terwijl het invoerveld eigenlijk niet een label is (of wel?). Toch is deze constructie wel correct volgens het W3C:
http://www.w3.org/TR/html401/interact/forms.html#idx-label-2

Nu ik er wat langer over na denk vind ik de volgende constructie veel mooier.

HTML:

<label for="name_field">Naam:</label>
<input id="name_field" name="name" type="text" />

Ik ben wel benieuwd naar welke constructie jullie voorkeur uit gaat en waarom? De eerste constructie is niet altijd in alle situaties mogelijk, maar gebruiken jullie die wel?

[Snake]

Tweede is semantisch correcter, vind ik toch, label hoort bij een input, de input zelf hoort niet in het label!

Vandaar de 'for' attribute in het label tag

[ Voor 17% gewijzigd door Snake op 01-09-2007 16:11 ]

[orf]

Altijd de tweede, IE biedt geen functionaliteit als je de eerste gebruikt (klikken op een label zou focus moeten geven aan het inputfield)

[Blaise]

Vanaf IE7 ondersteunt IE die focus gelukkig wel.

[BikkelZ]

De tweede, al vind ik die for constructie wel een beetje geforceerd.

[Fuzzillogic]

Dat de eerste optie ook kan wist ik niet eens meer Toch zal ik het niet gebruiken, de 2de optie vind ik semantisch beter, en maakt het stijlen ook wat makkelijker. Nadeel is wel dat je overal weer ID's moet invoeren.

[killercow]

Fuzzillogic schreef op zondag 02 september 2007 @ 15:37:
Dat de eerste optie ook kan wist ik niet eens meer Toch zal ik het niet gebruiken, de 2de optie vind ik semantisch beter, en maakt het stijlen ook wat makkelijker. Nadeel is wel dat je overal weer ID's moet invoeren.

De for combinatie kan ook gebruikt worden door screenreaders om bij een invoer veld een mooie tekst uit te spreken in plaats van de inhoud van het name argument van de input.

Misschien had het beter zo gekund:

HTML:

<input label="First Name">
 <strong>First Name</strong>
 <inputfield type="text" />
</input>

Maar dat gaat niet gebeuren zolang IE6 nog bestaat (of MS op zich).

Zo gek is het dus niet.

[Verwijderd]

killercow schreef op maandag 03 september 2007 @ 11:59:
Misschien had het beter zo gekund:

HTML:

<input label="First Name">
 <strong>First Name</strong>
 <inputfield type="text" />
</input>

Maar dat gaat niet gebeuren zolang IE6 nog bestaat (of MS op zich).

Ook zonder IE6 gaat dat er niet van komen; met HTML5 richt men zich voornamelijk op backwards compatibility.

[crisp]

killercow schreef op maandag 03 september 2007 @ 11:59:
[...]

De for combinatie kan ook gebruikt worden door screenreaders om bij een invoer veld een mooie tekst uit te spreken in plaats van de inhoud van het name argument van de input.

Misschien had het beter zo gekund:

HTML:

<input label="First Name">
 <strong>First Name</strong>
 <inputfield type="text" />
</input>

Maar dat gaat niet gebeuren zolang IE6 nog bestaat (of MS op zich).

Zo gek is het dus niet.

Dat ziet er nogal verbose en zelfs dubbelop uit vind ik. Daarbij zou het een vervanging zijn van een oplossing voor een probleem waar dus al een prima oplossing voor bestaat; ik vraag me af waarom je dat zou willen doen?

Ik vind het idee van een element dat een implicit binding en een explicit binding kan hebben met een interactief element eigenlijk helemaal niet zo gek. Het geeft je de vrijheid waar nodig maar ook een minder verbose syntax waar mogelijk.

Ik snap ook niet zo goed waarom de impliciete vorm verwarrend zou zijn; wellicht is dat weer een gevolg van het te letterlijk nemen van de naam van het element ipv wat meer buiten de box te kijken; elementen zijn niet alleen bedoelt om de inhoud een betekenis te geven die een directe relatie heeft met de tagnaam (wat sowieso een verkeerde aanname is), ze zijn er ook om structuur aan te geven. In dit geval is het label element in zijn impliciete vorm gewoon meer een structuur-element dan in zijn expliciete vorm (met een for-id relatie).

Wat ik raar vind in de constructie van de topicstarter is het gebruik van <strong>. Is dat daar met recht bedoelt om belangrijkheid aan te geven (een aanduiding dat het een verplicht veld is bijvoorbeeld), of is het presentationeel?

[ Voor 5% gewijzigd door crisp op 03-09-2007 14:34 ]

[Janoz]

Ikzelf zou ook de voorkeur aan de tweede geven, maar deel verder wel het laatste stukje van crisp. Waarom die strong?

Ikzelf zou het oplossen door het label een extra class 'required' te geven. Iets verplicht stellen kan, naast met bold, ook met een sterretje, of een rode border om het inputveld aangeduid worden. In dat geval is trouwens de eerste notatievorm makkelijker omdat je dan ook makkelijk het inputveld kunt identificeren in je css.

[BikkelZ]

Het hangt er van af, als je echt wilt dat iemand weet dat het een benadrukt stuk tekst is dan moet je geen class gebruiken. Want een screen reader leest dat natuurlijk niet.

[crisp]

'required' is typisch een attribuut bedoelt voor het input-element zelf, WebForms 2 introduceert dat attribuut dan ook: http://www.whatwg.org/spe...s/current-work/#required0
In CSS kan je dan vervolgens een attribute-selector gebruiken om daar styling aan toe te kennen

Janoz maakt wel een goed punt: implicit binding heeft juist omdat het duidelijker structuur aangeeft soms voordelen boven explicit binding.

Beide vormen zijn overigens even semantisch aangezien er feitelijk geen verschil is in de extra betekenis die hier mbv het label-element aan het inputveld wordt toegekent, het is puur de vorm die verschilt.

[crisp]

BikkelZ schreef op maandag 03 september 2007 @ 15:12:
Het hangt er van af, als je echt wilt dat iemand weet dat het een benadrukt stuk tekst is dan moet je geen class gebruiken. Want een screen reader leest dat natuurlijk niet.

http://www.w3.org/TR/CSS21/aural.html

[Verwijderd]

ik merk net dat IE de mist in gaat met de implicit label constructie en marge op je input. De box wordt dan gesplitst

HTML:

<style type="text/css">
label {
border: 1px solid
}
input {
margin-right: 1px;
}
</style>
<label>
  <input>
  foo
</label>

tikje vreemd imho