Formularios Semánticos: el regreso

13/oct/2006 7

En una oportunidad previa, mostré una técnica para construir formularios tableless, o sea, sin las famosas tablas que tanto nos ayudaron hace algún tiempo. Sin div’s, solamente label e input fueron necesarios. Bien, en esta ocasión, seguiré con este apasionante e intrigante tema, pero se motrarán 2 variaciones del mismo formulario, pero con diferentes diseños. Dependiendo de tus necesidades, más de alguno puede servirte.

El concepto de hoy: construir semánticamente (hacerlo accesible a los browsers y que sean relevantes para los buscadores, tal como lo recomienda la W3C). La clave está en 3 tags: fieldset, legend y label.

  • La etiqueta fieldset permite agrupar controles y etiquetas que estén relacionados, haciendo que el formulario sea más comprensible para los usuarios desde un punto de vista visual y conceptual, a la vez que incrementa la usabilidad y la accesibilidad, ya que estos campos podrían ser utilizados al realizar saltos entre campos con la tecla tab o interpretados por navegadores que incorporen funciones de generación de voz (recuerden, accesibilidad a discapacitados).
  • La etiqueta legend permite asignar un título a un fieldset, aumentando los valores de usabilidad y accesibilidad.
  • La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde.

La forma de diseñar un formulario correctamente, es la siguiente:

<form>
     <fieldset>
          <legend>Título del Form</legend>
          <label>Nombre input: <input name="" type=""/></label>
     </fieldset>
</form>

Ahora puedes darle el estilo que quieras a las etiquetas, o tags, logrando el diseño que estimes adecuado para tu proyecto web. Nótese que el fieldset, por defecto, agrupa visualmente todo lo que contiene, con un borde gris contínuo. Esto suele utilizarse con fines estéticos, lo que puede quitarse fácilmente con un border: none; Otro detalle es que si no deseas que tu formulario tenga un título en legend, basta con darle la propiedad display:none; en tu hoja de estilos. Pero es importante tenerla siempre en tu HTML con el texto correspondiente, sólo que no se desplegará.

Formulario Vertical: es el clásico formulario encontrado en miles de millones de sitios. Nada de otro mundo, pero esta vez estará bien construído.

Ver ejemplo formulario vertical.

Formulario Horizontal: este tipo de formulario no es muy común de verse, salvo en barras de logueo horizontales. El botón de Enviar puede estar al lado de los elementos, o bajo ellos, según se prefiera (basta quitar el <br /> que lo antecede). En este caso, el secreto está en flotar los labels a la izquierda, cosa que cada nuevo campo de texto se vaya poniendo al lado derecho del anterior. Véase el código fuente para hacerse la idea.

Ver ejemplo formulario horizontal.

Dudas, consultas y sugerencias, ya saben. Comenten.

Comentarios

  1. freddy [#]

    La verdad que esta muy bueno el post

    Desde hace tiempo que vengo haciendo formularios con label e impust solamente y esta variante usando fieldset esta muy interesante.

    La tendre en cuenta cuando tenga q hacer algun formulario

    Saludos

  2. gabriel charris [#]

    gracias por las notas, mut interesantes me ayudaran mucho en la posicion de los input

    gracias

  3. storo [#]

    Muy bueno .. nunca lograba hacer un formulario q se viera bien a la perfeccion pero con esto me quedan sin ningun esfuerzo muy buenos 😀 gracias

  4. Alejandro [#]

    Muy bueno!!!, me sirve de mucho, ahora no se si podrías publicar un ejemplo con CheckBox y Option

  5. CSSLab » Esas botoneras: centrándolas [#]

    […] a lo que nos reúne. Construído el lindo formulario, con <fieldset>, <legend>, varios <label>, <input /> y <textarea> […]

  6. JayPorn [#]

    q bueno, buscando formularios semánticos llegue hasta aquí :)

    ahora con firefox 3.5 se ve el text-shadow del nombre de la entrada, excelente!!

    saludos!!

  7. Jorge Epuñan [#]

    Hey jPorn, q bueno q las buenas busquedas te traen por aqui; fijate q este articulo es del 2006 y tiene algunos detalles q ya con la experiencia he refinado: el atributo for=”” en el label y los atributos name=”” y e id=”” en cada input para su validacion; ademas de q ya no utilizo la etiqueta <form> ni su id para crear estilos, esta etiqueta es solo para conectar datos del formulario.

    salu2 a los cardumiantes

Responder a freddy ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab