Element "label" en formularis i CSS
Bernat Lleonart
Voldria saber què creieu que és més eficient a l'hora de construir
formularis, i quina opció acostumeu a utilitzar:
-Utilitzar associacions implícites entre "label" i "input":
<label>Nom: <input type="text"/></label>.
-Utilitzar associacions explícites entre "label" i "input":
<label for="nom">Nom:</label> <input id="nom" type="text"/>.
-Utilitzar una combinació dels anteriors:
<label for="nom">Nom: <input id="nom" type="text"/></label>.
De cara a l'accessibilitat crec que és millor l'associació implícita,
però a l'hora de donar-li estil mitjançant CSS veig que amb una
associació implícita és més complicat muntar una estructura tipus:
label input
label input
label input
i que tots els input quedin alineats per l'esquerra, de manera que
quedi una columna de labels a l'esquerra, una columna d'inputs a la
dreta i un espai uniforme entre les dues.
Per quin mètode us decanteu?
Oscar Sanchez Casamitjana
explícita sempre; implicita només per radios/checks. raons:
* obligat si vols AA de les WCAG [1]
* semànticament més apropiat (IMO)
* més flexible a l'hora d'aplicar estils
per si t'interessa, l'Arnau va escriure no fa gaire res un post sobre
estructures de formulari més riques, amb les que sempre t'acabes
trobant [2].
oscar.
++
[1] http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-associate-labels
[2] http://css.artnau.com/dependencia-de-camps-en-formularis/
Alejandro Exojo
> De cara a l'accessibilitat crec que és millor l'associació implícita,
> però a l'hora de donar-li estil mitjançant CSS veig que amb una
> associació implícita és més complicat muntar una estructura tipus:
>
> label input
> label input
> label input
>
> i que tots els input quedin alineats per l'esquerra, de manera que
> quedi una columna de labels a l'esquerra, una columna d'inputs a la
> dreta i un espai uniforme entre les dues.
Si el que has de escriure es simple, l'estructura implícita és també molt
simple. Si has de alinear, llavors el més natural suposo que seria una taula,
i llavors no et queda més remei que fer-ho explícit.
No sé massa d'accessibilitat, però fa poc vaig fer un formulari, i amb
l'estructura explícita no vaig notar res estrany o diferent de la forma
implícita.
La tercera forma que proposes, crec que és redundant, i jo no la faria servir.
--
Alex (a.k.a. suy) - GPG ID 0x0B8B0BC2
http://barnacity.net/ - Jabber ID: s...@bulmalug.net
Arnau Siches
Bernat Lleonart wrote:
>
> Voldria saber què creieu que és més eficient a l'hora de construir
> formularis, i quina opció acostumeu a utilitzar:
>(...)
>
> De cara a l'accessibilitat crec que és millor l'associació implícita,
> però a l'hora de donar-li estil mitjançant CSS veig que amb una
> associació implícita és més complicat muntar una estructura tipus:
>
> Per quin mètode us decanteu?
L'una no exclou l'altre. Per millorar l'accessibilitat i l'usabilitat la
explícita cal usar-la sempre (12.4 Associeu de manera explícita les
etiquetes amb els seus controls [Prioritat 2].)
La implícita la recomanen a les WCAG 1.0 però actualment no es considera
necessari sempre que estiguin LABEL i INPUT consecutius.
De tota manera, posar l'INPUT dins del LABEL pot interessar en segons
quina maquetació.
Una taula rarament. Única i exclusivament quan el formulari siguin dades
tabulars editables (pocs me n'he trobat).
De normal jo no uso associació implícita excepte per controls de tipus
checkbox i radiobutton ja que m'interessa tractar aquests INPUT com a
elements inline per facilitar l'aliniació vertical amb el text del LABEL.
--
arnau siches
css.artnau.com
Bernat Lleonart
Us passo un article on es parla de marcat i maquetació de formularis,
que sembla força interessant [1].
No sé com veieu l'opció de marcar els diferents camps del formulari
com a ol. A vegades he optat per utilitzar dl, però tinc els meus
dubtes. De totes maneres, una llista d'algun tipus em sembla
semànticament més apropiada que utilitzar elements p o div.
Salut.
--
[1] http://www.alistapart.com/articles/prettyaccessibleforms
Arnau Siches
> Gràcies a tots, ja em queda més clar el tema.
>
> Us passo un article on es parla de marcat i maquetació de formularis,
> que sembla força interessant [1].
>
> No sé com veieu l'opció de marcar els diferents camps del formulari
> com a ol. A vegades he optat per utilitzar dl, però tinc els meus
> dubtes. De totes maneres, una llista d'algun tipus em sembla
> semànticament més apropiada que utilitzar elements p o div.
En realitat HTML no dóna prou nivell de detall semàntic com per poder
afirmar això.
Crec més aviat que depèn dels casos. Igual que tens paràgrafs, llistes,
etc. que no són editables, pots tenir la mateixa riquesa amb els formularis.
--
arnau siches
css.artnau.com