Buenos días ramón y todos:
Entonces según lo que comentas bajo premisas de accesibilidad si es correcto
anidar un elemento input en un label, pero semánticamente según comenta
victoria no lo es?. disculpen pero aún me pierdo un poco con esto de los
formularios.
Por otro lado, quisiera hacerles una pregunta, pues si había leído en otras
partes opiniones sobre como maquetar correctamente un formulario, pero todavía
observo que algunos sugieren el uso de <br> y otros dicen que es incorrecto y
he aquí mi pregunta. supongamos que quiero hacer una planilla de inscripción a
un curso universitario .. esas que tienen muchos campos y datos que recolectar.
como podría hacer que en pantalla se posicionen dos campos uno al lado del otro
sin utilizar el <br> para forzar un salto de línea? intentaré explicarme mejor
con un ejemplo pequeñito:
<form method="post" action="planilla.php">
<fieldset>
<legend>Datos Requeridos para formalizar la inscripción</legend>
<label for="nombre">Nombre(s):<input type="text" name="nombre" id="nombre"
size="35" maxlength="35" value="" /></label>
<label for="apellidos">Apellido(s):<input type="text" name="Apellidos"
id="apellidos" size="30" maxlength="30" value="" /></label>
<label for="cedula">Cédula: <input type="text" name="cedula" id="cedula"
size="15" maxlength="15" value="" /></label>
<label for="correo">E-mail: <input type="text" name="correo" id="correo"
size="50" maxlength="50" value="" /></label></fieldset></form>
en este caso, como podría hacer para que los campos nombre y apellidos
queden en la línea superior y cédula y e-mail quedaran en la línea de abajo
sin utilizar <br />?
dejándo el comportamiento por defecto de que el label quede lineal al campo de
texto.
he leído y realizado ejercicios sobre formularios en columnas, pero lo que he
leído (quizás demasiado básico aún) es utilizar el <fieldset></fieldset> para
agrupar los campos relacionados y luego éstos encerrarlos en un <div></div> y
con width lograr que un fieldset quede al lado del otro. Y bueno si coloco
datos personales por un lado y quizás académicos por otro me vale y solo con
darle display : block; haría dos columnas, pero en ese caso tendría nombre,
apellidos, cédula y email uno debajo del otro. y yo quiero lograr una
dispocición en la que pueda tener dos o mas campos en una línea y quizás uno
solo en la siguiente y así. Y pues claro como recién aprendo no he logrado esto
sino usando <br />
Disculpen si es algo muy básico, pero ya que están tocando el tema me gustaría
saber como se haría pues no he visto un ejemplo de esto. quizás no he sabido
buscar bien, pero es que o los veo un campo bajo el otro, o en columnas con
fielset y no se si por ejemplo es correcto usar divd y hacer así las columnas
usando float o display inline .. espero no haberme liado demasiado. Gracias a
todos por su colaboración. Saludos cordiales, Halenita.
----- Original Message -----
From: Ramón Corominas
To: Ovillo, la lista de CSS en castellano
Sent: Thursday, September 11, 2008 4:39 AM
Subject: Re: [Ovillo] Correcta maquetacion de formulario
Hola, Victoria y todos.
Tanto en HTML 4.01 como en XHTML, incluso en sus versiones Strict, el
elemento <label> puede contener un elemento <input> (y sólo uno), como
se puede leer en los comentarios que hay en las propias DTD de HTML 4.01
[1] y de XHTML 1.0 [2]:
Comentario en la DTD de HTML 4.01:
<!-- Each label must not contain more than ONE field -->
Comentario en la DTD de XHTML 1.0:
<!--
Each label must not contain more than ONE field
Label elements shouldn't be nested.
-->
Por si esto fuera poco, en el documento de Técnicas HTML para las WCAG
1.0 [3], sobre accesibilidad, se especifica la manera idónea de asociar
implícitamente las etiquetas con sus controles de formulario:
<!--cita-->
A label is implicitly associated with its form control either through
markup or positioning on the page. The following example shows how a
label and form control may be implicitly associated with markup.
Example.
<LABEL for="firstname">First name:
<INPUT type="text" id="firstname" tabindex="1">
</LABEL>
<!-- fin de cita -->
Puedo estar de acuerdo contigo en que, semánticamente hablando, no suena
del todo bien que el control esté contenido en su etiqueta, pero vamos,
que como ser es una técnica perfectamente válida y además recomendada
por el W3C.
Y no es necesario añadir ningún contenido extra como <br /> ni nada por
el estilo para que ambos controles se muestren en distintas líneas,
basta con ponerle un display: block; al <input> y arreglado. Y si
quieres mostrar etiqueta y control en una sola línea basta darle ese
display: block; al <label>.
Eso sí, lo de la lista para cuando no hay estilos, me temo que no hay
manera de apañarlo, jejeje.
Un saludín,
Ramón.
[1] DTD HTML 4.01
http://www.w3.org/TR/html4/loose.dtd
http://www.w3.org/TR/html4/strict.dtd
[2] DTD XHTML 1.0
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
[3] Técnicas HTML para las WCAG 1.0
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-TECHS_es.html#forms-labels
Gracia escribió:
> Tanto en HTML 4.01 como para XHTML, el elemento <label> está pensado
> para ser un elemento per-se, y es el atributo "id" el que lo asocia con
> el control a que hace referencia. Puede anidarse el <input>, pero no es
> lo recomendable. Podéis verlo en las especificaciones del W3C [1]
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
