Maquetación de formularios con CSS
[Vía Sitepoint] Personalmente considero que una de las cosas mas complicadas de maquetar, cuando uno utiliza estándares para dicha labor, son los formularios.
El artículo de Sitepoint al que hago referencia (realmente es un capítulo del libro “The Art and Science of CSS“, en inglés) es el más completo que he leído sobre el tema; resume las mejores técnicas a utilizar en esta tediosa e ingrata labor y te ayudará a crear formularios con elementos estándares y a hacerlos medianamente accesibles.
Resumiendo:
- Utiliza
labelpara etiquetar los campos - Utiliza
fieldsetpara agrupar bloques de elementos - Utiliza
legendpara describir un grupo (o el grupo) de campos del formulario
Pero yo sigo teniendo problemas con los formularios complejos, normalmente usados por los departamentos de márketing de las empresas para intentar obtener multitud de datos de un usuario, en los que la abundancia de opciones con checkbox o radio me obligan a utilizar una tabla (no se lo digáis a nadie) para que la presentación quede más o menos agrupada.
Y no es que no se pueda hacer con layout en CSS, es que hacerlo es muy complejo, costoso en tiempo, y supone una cantidad de atentados contra la limpieza de la hoja de estilo que realmente considero que no vale la pena.
June 5th, 2007 at 8:46 am
Ya que has abierto la veda de reconocimiento público de nuestras vergüenzas codificando… yo también uso tablas en los formularios.
¿Alguien tiene un pañuelo?
Mi problema es la inercia en las aplicaciones con las que trabajo. Ya tienen mucha “solera”.
Por lo demás, muchísimas gracias por el recurso. Se me había olvidado la existencia de Sitepoint, en una de esas catastrófica pérdida de favoritos.
June 5th, 2007 at 9:52 am
xDDD. Podemos exculparnos en poco echándole la culpa a la falta de capacidad de CSS2 y html4 para estas cosas :)
June 6th, 2007 at 8:13 am
Yo creo que ni creando un clon superior a CSS Zen Garden podría exculpar mis pecados :)
June 6th, 2007 at 8:27 am
En esta dirección hay buenos y diferentes ejemplos de maquetación con formularios vía css:
http://www.themaninblue.com/experiment/InForm/
June 6th, 2007 at 9:34 am
Genial Félix… deliciouseado!
June 14th, 2007 at 11:23 am
Interesante el enlace que proporcionas. Yo hace algún tiempo que intento hacerlos siempre con CSS aunque se pierda más tiempo que con unas tablas.
June 15th, 2007 at 11:48 am
¡No os rindais!, con display block y floats quién necesita tablas??
No os rindais
June 15th, 2007 at 2:00 pm
XD… pos nada… como estas de freelance el próximo formulario como el que pongo en el ejemplo (que por cierto es una pequeña parte del mismo)… te lo paso ;)
August 26th, 2008 at 6:00 pm
Llego a esta web buscando cómo maquetar un formulario con CSS y me encuentro gente comentando al respecto, a donde fueres, hacer lo que vieres:
¿Pues qué les puedo decir de CSS?
Que al principio yo también maquetaba con tablas, mis primeras webs tienen tablas (algún día se las quitaré), ahora que empiezo a trabajar con CSS, empiezan los dolores de cabeza, sobre todo con IE, lo malo que los clientes ni se enteran, por eso no valoran el trabajo, pero hay que adaptarse a los estándares así que a trabajar y esperar el CSS3. Que no nos pagan por llorar ;P y menos si somos freelancers.
Gracias Felix por el enlace, voy a visitarlo a ver qué aprendo de ahí.
Saludos
Pepe