XHTML: formularios
Visita este artículo en http://www.estadobeta.com/2006/07/05/xhtml-formularios/
Por Ismael en (X)HTML, CSS, Estándares, artículosDiseño de formularios accesibles con (X)HTML y CSS
El diseño de formularios web suele ser mirado en menos, pero puede ser uno de los desafíos más interesantes para algunos diseñadores de interfaces con tiempo en sus manos.
Tradicionalmente resueltos por medio de tablas y gifs transparentes, los formularios HTML bien estructurados son fundamentales si el proyecto tiene en cuenta la accesibilidad: los formularios y sus elementos son las herramientas que ofrece el estándar HTML para manipular los contenidos.
Sigue leyendo para ver ejemplos y código sabrosón.
El cómo estructurar y diseñar formularios es aún un punto a debatir. Actualmente se trabaja en nuevos estándares y tecnologías como xForms que darán más control a usuarios y desarrolladores. Por ahora, describo la estructura que me ha dado mejores resultados en los últimos años.
<fieldset id="ejemplo-1">
<legend>Datos personales</legend>
<p>
<label for="nombre">nombre:</label>
<input type="text" name="nombre" id="nombre" />
</p>
<p>
<label for="email">email:</label>
<input type="text" name="email" id="email" />
</p>
</fieldset>
Vamos por partes.
<fieldset>
La etiqueta <fieldset> es parte de HTML y, como su nombre lo indica, su propósito es contener un conjunto de campos o controles como <textarea>’s, <input>’s, <select>’s y otros.
<legend>
La etiqueta <legend> es obligatoria dentro de cada fieldset y lleva el título del conjunto o subconjunto de campos (por ejemplo “datos personales”, “datos requeridos”, etc.). Es válido poner fieldsets dentro de fieldsets.
<label>
La etiqueta <label> se usa para anotar los títulos de cada campo y, si su atributo for es igual a la id del campo o control, tiene la ventaja de posicionar el foco en el control aún si el usuario hace click en el título. Esto mejora la accesibilidad al ampliar el area sensible de cada control y relaciona los campos y sus títulos para lectores de pantalla y otros dispositivos con restricciones de diseño visual.
El ejemplo de arriba, sin CSS, se ve así.
Cómo verán, la mayoría de los browsers agregan un borde en relieve a los fieldsets y sitúan los legend> en una posición particular sobre el borde superior del fieldset. Los bordes se controlan fácilmente con un poco de CSS:
fieldset {
border: solid gray 2px;
}
fieldset.sin-bordes {
border-width:0;
}
<legend> es un poco más difícil. Por mi experiencia los navegadores actuales no ofrecen una interpretación de CSS consistente para ese elemento. Personalmente opto por esconderlo con legend {display:none;} si no lo ocupo, o incluír un h3 o h4 más controlable dentro del fieldset, manteniendo el legend aún invisible para mejorar a accesibilidad *1
La forma elegida para ordenar los elementos dentro de los fieldsets es arbitrária. Muchos eligen separar cada par label/input por cambios de línea (<br />). Otros ponen complicadas tablas dentro de los fieldsets. Yo prefiero la estructura de arriba porque permite los diseños más habituales para formularios. Por ejemplo, los títulos a la izquierda de los campos, alineados a la derecha:
input {
border:solid black 1px;
padding:.25em;
}
fieldset {
width: 25em;
}
/* Alinear labels a la izquierda de los campos */
#ejemplo-1 label {
float:left;
width:10em;
background:silver;
text-align:right;
margin-right:.5em;
padding:.25em;
}
Eso se ve así.
Con un pequeño ajuste a los floats podemos invertir el diseño y situar los títulos a la derecha de los campos. Si en lugar de floats usamos display:block para los labels podemos posicionarlos sobre el campo correspondiente, así.
Por supuesto esos son ejemplos ilustrativos. Aquí se puede ver algo un poco más complejo y funcional (perdónenme, no soy diseñador).
Por último, hay una serie de opciones posibles para estructurar formularios acesibles en (X)HTML. Una muy interesante que vi recientemente es usar el elemento <dl> (Definition List) y sus sub-elementos dt y dd para los labels y los campos, respectívamente:
<fieldset id="ejemplo-2">
<legend>Datos personales</legend>
<dl>
<dt>
<label for="nombre">nombre:</label>
</dt>
<dd>
<input type="text" name="nombre" id="nombre" />
</dd>
<dt>
<label for="email">email:</label>
</dt>
<dd>
<input type="text" name="email" id="email" />
</dd>
</dl>
</fieldset>
Más complicado que mi ejemplo pero también más flexible para manipular con CSS e infinítamente más sencillo y accesible que una tabla.
Cuestión de opción.
Algunos links
Los lectores de pantalla para no videntes declaran, en voz alta, el texto del elemento legend justo antes de cada campo. Esto significa que, por ejemplo, al agrupar todos los campos requeridos en un fieldset con el legend “requerido”, el programa emitirá:
"requerido: nombre; requerido: email; requerido: teléfono..." (etc).
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
7/6/2006 at 12:40 am
A los links que colocaste yo agregaría el siguiente:
http://www.alistapart.com/articles/prettyaccessibleforms
El autor de ese artículo logra crear un formulario accesible y bello (yo lo revisé en varios navegadores y funcionaba impeque).
7/6/2006 at 12:49 am
Excelente link José Luis, gracias.
Lástima que necesite tanto JavaScript sólo para corregir bugs en Mozilla.
7/7/2006 at 12:41 am
Sí, estoy de acuerdo contigo.
7/7/2006 at 1:35 pm
Bueno lo de los formularios, como no se mucho de desarrollo la duda que me queda es como se envian los datos, o sea despues de completar los datos como es que funciona el “enviar”. De acuerdo a lo que he leido la función se escribe en el (x)html, pero quisiera preguntar como es el funcionamiento?
Gracias.
Saludos.
Ahhh a tod esto muy bueno el link de Veerle.
7/7/2006 at 1:45 pm
Sebastian: si encierras los campos en un <form> y le dices a dónde enviar los datos en el atributo “action”, los datos se enviarán a esa dirección una vez que apretes el input “submit”, así:
También puedes validar los campos con javascript antes de enviar pero eso ya es otro artículo.
7/31/2006 at 10:12 am
[…] html CSS Drive- Tableless forms using CSS Subtraction Form 0.1 Forms Accessibility | HTMLSource Particletree · 10 Tips To A Better Form Simply Accessible Simple Tricks for More Usable Forms Intenta » “Default text” en campos de un formulario Dynamic Drive CSS Library- CSS Tableless Form EstadoBeta » Archivo » XHTML: formularios Awesome Form: The Simple, Semantic CSS Form […]
8/22/2006 at 4:59 pm
Excelente aporte… Aunque, no me llevo bien con JavaScript… creo que debo dedicar más café y cigarros a buscar la solución solo con CSS…
9/24/2006 at 12:36 am
la verdad es que soy un poco novato en esto
y quisiera saber como inserto el boton de submit
y como darle la la direccion de enviar
gracias
3/28/2007 at 7:08 pm
Excelente site!! muy utiles las explicaciones
Salu2 desde
mas Tecno .com
5/19/2007 at 11:22 am
esta muy bueno
6/14/2008 at 12:48 am
Hola
Muchas gracias por la informacion aqui proporcionada. Aclararon una duda que tenia desde hace mucho tiempo sobre Javascript.
6/14/2008 at 12:50 am
hola
mis disculpas por lo del anterior comentario lo que pasa es que presione la tecla intro sin querer
pero el secreto se trata de como posicionarte en google utilizando videos jaja acabo de decirles mi secreto sin querer. para los que les interese hagan una prueba y veran que no miento
6/14/2008 at 12:51 am
Hola ..
Yo creo que esto vale la pena
solo vean que tanto le afuncionado este sistema a mi pagina:
Personalmente creo que en unos 5 años la publicidad sera mas efectiva por internet y estara al alcance de cualquiera
Asi que sera mas dificil acaparar el mercado para
estas grandes empresas dejando asi campo para la chica y micro empresa
Saludos
9/16/2008 at 1:18 am
Quise agregar que estos ejemplos me sirvieron de mucho, la batalla me la dieron los navegadores (es decir: como muestran …). En mi caso, la tabla estaba dentro del tag , sólo FF representa bien, mientras que IE y Opera no. He resuelto quitar la tabla y listas (aquí publicadas) y vilví a la vieja distribución:
Datos de contacto
Nombre
email
Comentario
<textarea name=”consulta” cols=”60″ rows=”8″
Con Css fue suficiente, sólo necesité JScript para validar los campos.
Salu2
9/17/2008 at 8:39 am
@Mario, que tabla? No hay tablas en los ejemplos de este articulo…
3/27/2009 at 10:06 pm
Cuando cambio de tamaño al explorador (uso ie7), esta pagina se ve muy mal.
5/22/2009 at 3:07 pm
ouhuhouhohhohoohoihoihohoihohoihoihioh Son unos loosers