Estructura d'un formulari

20/06/06

Normalment a l'hora d'estructurar un formulari utilitzo una estructura de paràgrafs tipus:


<p>
   <label for="nom">Nom:</label>
   <input type="text" id="nom" />
</p>
<p>
   <label for="password">Contrasenya:</label>
   <input type="password" id="password" />
</p>

És fàcil trobar-se amb altres estructures, ja sigui usant dl o ul o ol. Tot i que en algun cas puntual m'ha semblat més adequat un d'aquests altres casos mai he tingut prou arguments per canviar.

Però a l'artícle Prettier Accessible Forms d'en Nick Rigby diu un argument interessant:

[...] Additionally, the ol provides additional information for some screen readers that announce the number of list-items when they first encounter the list. [...]

Tot i que potser no valgui la pena per tots els casos, en formularis llargs és un bon punt a tenir en compte.

Comentaris

Comentat per ricardo el 21/06/06

Pero es una información que sólo algunos lectores de pantalla muestran. Lo ideal sería mostrarles a todos esa información, lo que nos lleva de nuevo al eterno problema de cómo transmitir información sobre la estructura de la página a una persona que no pueda verla, sin "liar" a las personas que "escuchen y a la vez vean" la página...
Comentat per Gonzalo el 21/06/06

No estaría mal que los lectores de pantalla ante una lista de elementos, ya sea ordenada, desordenada o de definición, indicasen al principio el número de elementos, y así podríamos evitar el problema que menciona ricardo...
Comentat per Ramon Fuguet el 21/06/06

bona idea la d'usar llistes per als formularis.

Fins ara, sempre que he fet un formulari he anat a base de , pero mai ho he acabat de veure semànticament correcte.

De les llistes anteriorment dites quina seria la mes correcte?

potser?
Comentat per are el 21/06/06

Doncs crec que la més correcte depèn del cas. En el fons un formulari només és un fragment de text editable, i no està lligat a una estructura.
Comentat per choan el 22/06/06

Lo de usar una lista ordenada no me parece ni bien ni mal. Lo que sí veo descabellado es utilizar listas de definición, puesto al utilizar pares dt/dd duplicamos de manera innecesaria la relación label/input.

Por otra parte, Are, hoy vengo peleón: ¿por qué párrafos? Si lo que necesitas son divisiones estructurales sin valor semántico, un div parece el elemento más adecuado.

Para mí, un párrafo sin texto no es un párrafo. En fin, para gustos, marcados ;)

En cuanto al artículo de ALA, utilizar jQuery me parece matar moscas a cañonazos. Si ya estamos utilizando jQuery para otras cosas, pase. Si no lo utilizamos... ¿~16 KB de javascript para manipular el marcado de un formulario? No way. En este caso sería mejor utilizar un script encapsulado y autosuficiente.
Comentat per are el 22/06/06

Se m'acudeix, un formulari que fos una enquesta (pregunta/resposta), seria una forma d'usar un dl on es podria donar el cas que la parella dt/dd correspongués a label/input.
Coincideixo que per un formulari tipus el de comentar d'aquest blog seria massa redundant.

Sobre perquè paràgrafs i no div, trobo interessant el valor semàntic dels paràgrafs ja que considero un label/input com a un paràgraf editable :)
Potser estigui agafat pels pèls :D

Sobre jQuery, sens dubte, usar una biblioteca per una coseta com la de l'exemple no és raonable.
Molt recomanable el punt de vista sobre aquest tema de dizque ;)

a.css

Menú

Estructura d'un formulari

Comentaris