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=firstnameFirst 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
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 legendDatos Requeridos para formalizar la inscripción/legend label for=nombreNombre(s):input type=text name=nombre id=nombre size=35 maxlength=35 value= //label label for=apellidosApellido(s):input type=text name=Apellidos id=apellidos size=30 maxlength=30 value= //label label for=cedulaCédula: input type=text name=cedula id=cedula size=15 maxlength=15 value= //label label for=correoE-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=firstnameFirst 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
Re: [Ovillo] Correcta maquetacion de formulario
* Un ejemplo de mi primer intento de tabla con listas del que pregunte al principio. Si pueden verlo con la opcion de Sin estilo (o parecedido). En FF esta en el menu Ver desconosco en otros navegadores. Para que vean que se puede ver en 3 formas: En Tabla, en Vertical y en Lista. Lo malo es que sin javscript no funciona como debe de ser. Pero digo es el primer intento y ahorita que voy a hacer el 2 estoy preguntando http://siga.jalisco.gob.mx/miguel/phonebook.html * Y un ejemplo de como uso los div para simular tablas. Para ver su otro uso pongan Vista preliminar de impresion http://siga.jalisco.gob.mx/miguel/credencial.html ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Correcta maquetacion de formulario
Hola Lista, tengo poca experiencia en CSS. La ultima vez que hice algo
fue como hace 2 años y algunas cosas todavia las recuerdo. Bueno hace
unas semanas pregunte algo pero es esto es del mismo proyecto :).
Tengo el siguiete formulario
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Con esta hoja:
form.formulario {
border: 1px dotted blue;
padding: 4px;
}
.formulario ul {
list-style-type:none;
float: left;
/* border: 1px solid red;*/
}
.formulario hr {clear: both;}
.formulario li {
float: left;
margin: 2px;
padding: 0;
border: 0;
height: 3em;
}
.dato, .titulo {
display: block;
}
.titulo {
clear: right;
}
Leyendo la lista creo que esto que tengo span=titulo no es lo mejor.
¿qué me recomiendan? Lo tengo con un span=titulo porque no se me
ocurrio otra cosa. ¿Qué es lo correcto, usar p, strong, legend?
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
No voy a opinar sobre el CSS, porque es solo tema de como se ve, pero el
html si lo mejoraría.
form class=formulario action=estado.html id=alta *name=alta*
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Name no valida en XHTML estricto, y lo que llamas span class=titulo debe
ser un label.
Osea que debería quedar así:
form class=formulario action=estado.html id=alta**
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
li
label for=btallTALLER/label
span class=dato
input type=text name=btall id=btall size=4 /
/span
/li
li
label for=brfcRFC/label
span class=dato
input type=rfc name=brfc id=brfc size=15 /
/span
/li
/ul
/form
Nacho.
On Wed, Sep 10, 2008 at 3:49 PM, Miguel Beltran R. [EMAIL PROTECTED]wrote:
Hola Lista, tengo poca experiencia en CSS. La ultima vez que hice algo
fue como hace 2 años y algunas cosas todavia las recuerdo. Bueno hace
unas semanas pregunte algo pero es esto es del mismo proyecto :).
Tengo el siguiete formulario
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Con esta hoja:
form.formulario {
border: 1px dotted blue;
padding: 4px;
}
.formulario ul {
list-style-type:none;
float: left;
/* border: 1px solid red;*/
}
.formulario hr {clear: both;}
.formulario li {
float: left;
margin: 2px;
padding: 0;
border: 0;
height: 3em;
}
.dato, .titulo {
display: block;
}
.titulo {
clear: right;
}
Leyendo la lista creo que esto que tengo span=titulo no es lo mejor.
¿qué me recomiendan? Lo tengo con un span=titulo porque no se me
ocurrio otra cosa. ¿Qué es lo correcto, usar p, strong, legend?
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Al igual que Ignacio de momento no opinaré sobre el CSS, pero sigue
pudiéndose mejorar el HTML
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lilabel for=btall class=tituloTALLER/label
input type=text name=btall size=4 /
/li
lilabel for=rfc class=tituloRFC/label
input type=rfc name=brfc size=15 /
/li
/ul
/form
Las etiquetas label precisamente se inventaron para colocar las leyendas
de los controles del formulario y, de paso, que los dispositivos de
tecnologías asistivas pudieran relacionar la etiqueta con el control
correspondiente.
Sobre lo de usar el span adicional con clase dato, si es estrictamente
necesario pues adelante... si no lo es podrías eliminarlo.
Un saludo
Victoria
Ignacio Ricci escribió:
No voy a opinar sobre el CSS, porque es solo tema de como se ve, pero el
html si lo mejoraría.
form class=formulario action=estado.html id=alta *name=alta*
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Name no valida en XHTML estricto, y lo que llamas span class=titulo debe
ser un label.
Osea que debería quedar así:
form class=formulario action=estado.html id=alta**
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
li
label for=btallTALLER/label
span class=dato
input type=text name=btall id=btall size=4 /
/span
/li
li
label for=brfcRFC/label
span class=dato
input type=rfc name=brfc id=brfc size=15 /
/span
/li
/ul
/form
Nacho.
On Wed, Sep 10, 2008 at 3:49 PM, Miguel Beltran R. [EMAIL PROTECTED]wrote:
Hola Lista, tengo poca experiencia en CSS. La ultima vez que hice algo
fue como hace 2 años y algunas cosas todavia las recuerdo. Bueno hace
unas semanas pregunte algo pero es esto es del mismo proyecto :).
Tengo el siguiete formulario
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Con esta hoja:
form.formulario {
border: 1px dotted blue;
padding: 4px;
}
.formulario ul {
list-style-type:none;
float: left;
/* border: 1px solid red;*/
}
.formulario hr {clear: both;}
.formulario li {
float: left;
margin: 2px;
padding: 0;
border: 0;
height: 3em;
}
.dato, .titulo {
display: block;
}
.titulo {
clear: right;
}
Leyendo la lista creo que esto que tengo span=titulo no es lo mejor.
¿qué me recomiendan? Lo tengo con un span=titulo porque no se me
ocurrio otra cosa. ¿Qué es lo correcto, usar p, strong, legend?
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Si, tal cual. Yo lo deje por las dudas :p
2008/9/10 Victoria Gracia [EMAIL PROTECTED]
Al igual que Ignacio de momento no opinaré sobre el CSS, pero sigue
pudiéndose mejorar el HTML
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lilabel for=btall class=tituloTALLER/label
input type=text name=btall size=4 /
/li
lilabel for=rfc class=tituloRFC/label
input type=rfc name=brfc size=15 /
/li
/ul
/form
Las etiquetas label precisamente se inventaron para colocar las leyendas
de los controles del formulario y, de paso, que los dispositivos de
tecnologías asistivas pudieran relacionar la etiqueta con el control
correspondiente.
Sobre lo de usar el span adicional con clase dato, si es estrictamente
necesario pues adelante... si no lo es podrías eliminarlo.
Un saludo
Victoria
Ignacio Ricci escribió:
No voy a opinar sobre el CSS, porque es solo tema de como se ve, pero el
html si lo mejoraría.
form class=formulario action=estado.html id=alta *name=alta*
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Name no valida en XHTML estricto, y lo que llamas span class=titulo
debe
ser un label.
Osea que debería quedar así:
form class=formulario action=estado.html id=alta**
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
li
label for=btallTALLER/label
span class=dato
input type=text name=btall id=btall size=4 /
/span
/li
li
label for=brfcRFC/label
span class=dato
input type=rfc name=brfc id=brfc size=15 /
/span
/li
/ul
/form
Nacho.
On Wed, Sep 10, 2008 at 3:49 PM, Miguel Beltran R. [EMAIL PROTECTED]
wrote:
Hola Lista, tengo poca experiencia en CSS. La ultima vez que hice algo
fue como hace 2 años y algunas cosas todavia las recuerdo. Bueno hace
unas semanas pregunte algo pero es esto es del mismo proyecto :).
Tengo el siguiete formulario
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Con esta hoja:
form.formulario {
border: 1px dotted blue;
padding: 4px;
}
.formulario ul {
list-style-type:none;
float: left;
/* border: 1px solid red;*/
}
.formulario hr {clear: both;}
.formulario li {
float: left;
margin: 2px;
padding: 0;
border: 0;
height: 3em;
}
.dato, .titulo {
display: block;
}
.titulo {
clear: right;
}
Leyendo la lista creo que esto que tengo span=titulo no es lo mejor.
¿qué me recomiendan? Lo tengo con un span=titulo porque no se me
ocurrio otra cosa. ¿Qué es lo correcto, usar p, strong, legend?
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Y siguiendo con las mejoras...
En alguna otra parte que no sea el form...
document.getElementById('formulario').onsubmit = function () {
bitacora_alta();
return false;
}
Y el código del form...
form class=formulario action=estado.html id=alta name=alta
input type=hidden name=accion value=insertar /
ul
lilabel for=btall class=tituloTALLER
input type=text name=btall size=4 /
/label
/li
lilabel for=rfc class=tituloRFC
input type=rfc name=brfc size=15 /
/label
/li
/ul
...
/form
Además de la asociación explícita con for/id, al encerrar los input
dentro de los label se asocian también implícitamente, lo que es más
compatible con algunas ayudas técnicas (más accesible, vamos). Por
cierto que tampoco sé si realmente es necesaria la lista, al fin y al
cabo se da por hecho que las diferentes etiquetas/campos de formulario
son elementos independientes del formulario, y puedes asignar estilos
perfectamente para crear el efecto de listado.
Saludos,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
La lista en sí no es necesaria a menos que quieras maquetar el
formulario de una determinada manera, ya que eso parece que da más
control para la maquetación. Digo 'parece' puesto que he encontrado
varios ejemplos de maquetación así que, de no usar listas, serían
inviables. No obstante, yo sigo maquetando formularios sin las listas.
De hecho parece que CSS ha traído dos manías: anidar divs hasta la
saciedad y utilizar listas para todo, no siempre de forma acertada.
Ayer leí un artículo en el que un tipo utilizaba una colección indecente
de divs anidados para colocar a modo de tabla elementos en la página
utilizando la propiedad de display=table que ya empiezan a soportar los
navegadores FF3, IE8 y similares... ¡Lo que hay que ver!
Saludos
Ramón Corominas escribió:
Y siguiendo con las mejoras...
En alguna otra parte que no sea el form...
document.getElementById('formulario').onsubmit = function () {
bitacora_alta();
return false;
}
Y el código del form...
form class=formulario action=estado.html id=alta name=alta
input type=hidden name=accion value=insertar /
ul
lilabel for=btall class=tituloTALLER
input type=text name=btall size=4 /
/label
/li
lilabel for=rfc class=tituloRFC
input type=rfc name=brfc size=15 /
/label
/li
/ul
...
/form
Además de la asociación explícita con for/id, al encerrar los input
dentro de los label se asocian también implícitamente, lo que es más
compatible con algunas ayudas técnicas (más accesible, vamos). Por
cierto que tampoco sé si realmente es necesaria la lista, al fin y al
cabo se da por hecho que las diferentes etiquetas/campos de formulario
son elementos independientes del formulario, y puedes asignar estilos
perfectamente para crear el efecto de listado.
Saludos,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
- Original Message -
From: Miguel Beltran R.
To: ovillo@lists.ovillo.org
Sent: Wednesday, September 10, 2008 2:19 PM
Subject: [Ovillo] Correcta maquetacion de formulario
Hola Lista, tengo poca experiencia en CSS. La ultima vez que hice algo
fue como hace 2 años y algunas cosas todavia las recuerdo. Bueno hace
unas semanas pregunte algo pero es esto es del mismo proyecto :).
Tengo el siguiete formulario
form class=formulario action=estado.html id=alta name=alta
onsubmit=bitacora_alta(); return false;
input type=hidden name=accion value=insertar /
ul
lispan class=tituloTALLER/span
span class=dato
input type=text name=btall size=4 /
/span
/li
lispan class=tituloRFC/span
span class=dato
input type=rfc name=brfc size=15 /
/span
/li
/ul
/form
Con esta hoja:
form.formulario {
border: 1px dotted blue;
padding: 4px;
}
.formulario ul {
list-style-type:none;
float: left;
/* border: 1px solid red;*/
}
.formulario hr {clear: both;}
.formulario li {
float: left;
margin: 2px;
padding: 0;
border: 0;
height: 3em;
}
.dato, .titulo {
display: block;
}
.titulo {
clear: right;
}
Leyendo la lista creo que esto que tengo span=titulo no es lo mejor.
¿qué me recomiendan? Lo tengo con un span=titulo porque no se me
ocurrio otra cosa. ¿Qué es lo correcto, usar p, strong, legend?
Yo diría: form
fieldset
legend/legend
label for= input/label
/fieldset/form
cada etiqueta con sus atributos y los label encerrando los input .. si te
preocupa como disponerlos con css .. pues acá te dirán mejor que yo, pero
dependiendo que quieras pues puedes colocar display bloc a los label por
ejemplo y hacer un bonito formulario .. eso si quieres que el texto del label
te quede sobre el cuadro de texto .. en fin que yo con cosas visuales mejor no
me meto mucho y que alguien mas ilustrado te comente .. Saludos cordiales,
Halenita.
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Voy a agregar porque hice algunas cosas
#Victoria
label for=btall class=tituloTALLER/label
Esto me va a servdir
El día 10 de septiembre de 2008 15:25, Victoria Gracia
[EMAIL PROTECTED] escribió:
La lista en sí no es necesaria a menos que quieras maquetar el
formulario de una determinada manera, ya que eso parece que da más
control para la maquetación. Digo 'parece' puesto que he encontrado
varios ejemplos de maquetación así que, de no usar listas, serían
inviables. No obstante, yo sigo maquetando formularios sin las listas.
Uso la lista para juntar el titulo y el input, y aparecesca el titulo
encima del input siempre. Ya que los 2 los pongo como block el input
se baja.
Esto tambien lo hago por si el navegador no soporta CSS (algo raro ya)
se vea como una lista y por renglon este a la izquierda el titulo y a
la derecha el input. Porque como no soporta CSS, no pone los span como
block.
--
| titulo |
--
| input|
--
De hecho parece que CSS ha traído dos manías: anidar divs hasta la
saciedad y utilizar listas para todo, no siempre de forma acertada.
Ayer leí un artículo en el que un tipo utilizaba una colección indecente
de divs anidados para colocar a modo de tabla elementos en la página
utilizando la propiedad de display=table que ya empiezan a soportar los
navegadores FF3, IE8 y similares... ¡Lo que hay que ver!
Hice un sistema de este tipo con puros div para hacer tablas en media
SCREEN, porque en media PRINT me cambia todo de lugar y queda como una
credencial. Aqui si le veo mucho la ayuda. Luego lo subo para que lo
vean.
#Ramon
En alguna otra parte que no sea el form...
document.getElementById('formulario').onsubmit = function () {
bitacora_alta();
return false;
}
Y el código del form...
form class=formulario action=estado.html id=alta name=alta
input type=hidden name=accion value=insertar /
Esto con lo que estoy empezando a usar de prototype.js va a ser muy
util para separar presentacion de programacion.
#Halenita
Yo diría: form
fieldset
legend/legend
label for= input/label
/fieldset/form
Voy a checar como funciona esto
Gracias a todos
--
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Yo no añadiría fieldset salvo que realmente haya agrupación de controles en el formulario. Normalmente si son pocos controles no es necesario el fieldset y sólo añade complejidad sin dar nada a cambio. En cuanto a lo que dice Victoria de los que usan las propiedades tipo display: table, display: table-cell, etc., la verdad es que a veces uno está tentado de usarlas con algunas cosas que echa de menos del comportamiento de las tablas, pero vamos, lo suyo es que los datos tabulares se marquen con tablas, no con divs, jejeje. Saludos, Ramón. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Una sugerencias El 10 de septiembre de 2008 23:04, Miguel Beltran R. [EMAIL PROTECTED]escribió: Voy a agregar porque hice algunas cosas #Victoria label for=btall class=tituloTALLER/label Esto me va a servdir El día 10 de septiembre de 2008 15:25, Victoria Gracia [EMAIL PROTECTED] escribió: La lista en sí no es necesaria a menos que quieras maquetar el formulario de una determinada manera, ya que eso parece que da más control para la maquetación. Digo 'parece' puesto que he encontrado varios ejemplos de maquetación así que, de no usar listas, serían inviables. No obstante, yo sigo maquetando formularios sin las listas. Uso la lista para juntar el titulo y el input, y aparecesca el titulo encima del input siempre. Ya que los 2 los pongo como block el input se baja. Esto tambien lo hago por si el navegador no soporta CSS (algo raro ya) se vea como una lista y por renglon este a la izquierda el titulo y a la derecha el input. Porque como no soporta CSS, no pone los span como block. -- | titulo | -- | input| -- Si lo que quieres conseguir es eso lo mejor es usar br / y el código te quedaría label for=nombreTexto: br / input name=nombre id=nombre size=15 maxlength=32 type=password /label así te ahorras el uso de listas que en tu caso no lo veo semánticamente correcto. -- We don't need no education - Pink Floyd ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
Glupppsss, segunda sugerencia, escribe el label como elemento
independiente y el input también:
label for=nombreTexto:/label
input name=nombre id=nombre size=15 maxlength=32
type=password
Mediante el CSS puedes darle esa alineación sin ninguna necesidad de
introducir br / o listas:
.label {
display: block;
}
Espero que esto te sirva.
Un saludo
Victoria
Almorca escribió:
Una sugerencias
El 10 de septiembre de 2008 23:04, Miguel Beltran R.
[EMAIL PROTECTED]escribió:
Voy a agregar porque hice algunas cosas
#Victoria
label for=btall class=tituloTALLER/label
Esto me va a servdir
El día 10 de septiembre de 2008 15:25, Victoria Gracia
[EMAIL PROTECTED] escribió:
La lista en sí no es necesaria a menos que quieras maquetar el
formulario de una determinada manera, ya que eso parece que da más
control para la maquetación. Digo 'parece' puesto que he encontrado
varios ejemplos de maquetación así que, de no usar listas, serían
inviables. No obstante, yo sigo maquetando formularios sin las listas.
Uso la lista para juntar el titulo y el input, y aparecesca el titulo
encima del input siempre. Ya que los 2 los pongo como block el input
se baja.
Esto tambien lo hago por si el navegador no soporta CSS (algo raro ya)
se vea como una lista y por renglon este a la izquierda el titulo y a
la derecha el input. Porque como no soporta CSS, no pone los span como
block.
--
| titulo |
--
| input|
--
Si lo que quieres conseguir es eso lo mejor es usar br / y el código te
quedaría
label for=nombreTexto: br /
input name=nombre id=nombre size=15 maxlength=32 type=password
/label
así te ahorras el uso de listas que en tu caso no lo veo semánticamente
correcto.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
A ver...
labelNombre:
input type=text /
/label
Si quieres que aparezcan en dos líneas:
label, input {
display: block;
}
Y si quieres que aparezcan en la misma línea, añades (por ejemplo):
label input {
margin-top: -1.0em;
margin-left: 10em;
}
Así te ahorras listas y br /, y sigues manteniendo la asociación
implícita guiño
Nota: esto afectaría a todos los input independientemente de que
fueran tipo texto, password o submits, así que si quieres puedes asignar
diferencias:
input[type=text], input[type=password] {
margin-top: -1.0em;
margin-left: 10em;
}
Eso sí, sólo funcionará con CSS 2, así que a lo mejor en la práctica
tendrás que usar clases distintas.
Saludos,
Ramón.
Glupppsss, segunda sugerencia, escribe el label como elemento
independiente y el input también:
label for=nombreTexto:/label
input name=nombre id=nombre size=15 maxlength=32
type=password
Mediante el CSS puedes darle esa alineación sin ninguna necesidad de
introducir br / o listas:
.label {
display: block;
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
El label no dede anidar un campo!
2008/9/10 Ramón Corominas [EMAIL PROTECTED]
A ver...
labelNombre:
input type=text /
/label
Si quieres que aparezcan en dos líneas:
label, input {
display: block;
}
Y si quieres que aparezcan en la misma línea, añades (por ejemplo):
label input {
margin-top: -1.0em;
margin-left: 10em;
}
Así te ahorras listas y br /, y sigues manteniendo la asociación
implícita guiño
Nota: esto afectaría a todos los input independientemente de que
fueran tipo texto, password o submits, así que si quieres puedes asignar
diferencias:
input[type=text], input[type=password] {
margin-top: -1.0em;
margin-left: 10em;
}
Eso sí, sólo funcionará con CSS 2, así que a lo mejor en la práctica
tendrás que usar clases distintas.
Saludos,
Ramón.
Glupppsss, segunda sugerencia, escribe el label como elemento
independiente y el input también:
label for=nombreTexto:/label
input name=nombre id=nombre size=15 maxlength=32
type=password
Mediante el CSS puedes darle esa alineación sin ninguna necesidad de
introducir br / o listas:
.label {
display: block;
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Correcta maquetacion de formulario
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]
Si bien es cierto que el elemento _admite_ tener un input anidado, no
es el uso preferido y sólo se utiliza por comodidad en casos en que
realmente no sea necesario asociar el label con el input mediante
ese atributo, pero eso puede no tener implementaciones iguales en todos
los dispositivos (el uso de id, por ejemplo, hace que incluso en
lectores de pantalla se asocie el label con el input
correspondiente). Si además eso nos hace introducir un elemento br /
para separar las líneas estamos cometiendo un error de mezcla de
contenido y presentación.
W3C ejemplifica el uso de label del siguiente modo:
form action=http://somesite.com/prog/adduser; method=post
label for=firstnameFirst name: /label
input type=text id=firstname /
label for=lastnameLast name: /label
input type=text id=lastname /
label for=emailemail: /label
input type=text id=email /
input type=submit value=Send /
input type=reset /
/form
Si utilizamos de ese modo los elementos se puede seguir presentado de
varios modos la información al usuario:
1. Cuando queramos que estén en líneas distintas (uno sobre otro)
.label, .input {
display: block;
}
2. Cuando queramos que estén en la misma línea (uno al lado del otro)
no hace falta poner ninguna característica especial en el CSS
puesto que es el comportamiento por defecto. No obstante, en este
caso el uso de listas para contener los elementos label e
input nos garantiza que incluso en ausencia de CSS el usuario
verá el formulario como una ristra vertical de controles con la
etiqueta a su izquierda (de no ser así la ristra no se rompe en
cada nuevo control o etiqueta).
Si volvemos al ejemplo del W3C, utilizando listas tendríamos:
form action=http://somesite.com/prog/adduser; method=post
ul
lilabel for=firstnameFirst name: /label
input type=text id=firstname //li
lilabel for=lastnameLast name: /label
input type=text id=lastname //li
lilabel for=emailemail: /label
input type=text id=email //li
/ul
input type=submit value=Send /
input type=reset /
/form
que nos da el control de mostrar al usuario el formulario de una forma
bastante ordenada aún en ausencia de CSS.
El uso de br / en este caso no está justificado, a menos que realmente
queramos pensar en alguien que extrañamente no dispone de otro medio de
navegar por internet que un navegador gráfico que no disponga de soporte
suficiente para siquiera entender el uso de listas (realmente mostrar
las etiquetas sobre el control siempre tiene sus desventajas de
legibilidad según sea el formulario).
Un saludo,
Victoria
[1] Especificación de HTML 4.01:
http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Ramón Corominas escribió:
A ver...
labelNombre:
input type=text /
/label
Si quieres que aparezcan en dos líneas:
label, input {
display: block;
}
Y si quieres que aparezcan en la misma línea, añades (por ejemplo):
label input {
margin-top: -1.0em;
margin-left: 10em;
}
Así te ahorras listas y br /, y sigues manteniendo la asociación
implícita guiño
Nota: esto afectaría a todos los input independientemente de que
fueran tipo texto, password o submits, así que si quieres puedes asignar
diferencias:
input[type=text], input[type=password] {
margin-top: -1.0em;
margin-left: 10em;
}
Eso sí, sólo funcionará con CSS 2, así que a lo mejor en la práctica
tendrás que usar clases distintas.
Saludos,
Ramón.
Glupppsss, segunda sugerencia, escribe el label como elemento
independiente y el input también:
label for=nombreTexto:/label
input name=nombre id=nombre size=15 maxlength=32
type=password
Mediante el CSS puedes darle esa alineación sin ninguna necesidad de
introducir br / o listas:
.label {
display: block;
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
Re: [Ovillo] Correcta maquetacion de formulario
Ok, pues gracias por explicar eso... Pensaba que el fieldset era obligatorio .. saludos Halenita. - Original Message - From: Ramón Corominas To: Ovillo, la lista de CSS en castellano Sent: Wednesday, September 10, 2008 5:20 PM Subject: Re: [Ovillo] Correcta maquetacion de formulario Yo no añadiría fieldset salvo que realmente haya agrupación de controles en el formulario. Normalmente si son pocos controles no es necesario el fieldset y sólo añade complejidad sin dar nada a cambio. En cuanto a lo que dice Victoria de los que usan las propiedades tipo display: table, display: table-cell, etc., la verdad es que a veces uno está tentado de usarlas con algunas cosas que echa de menos del comportamiento de las tablas, pero vamos, lo suyo es que los datos tabulares se marquen con tablas, no con divs, jejeje. Saludos, Ramón. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
