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><br />
     <fieldset><br />
          <legend>Título del Form</legend><br />
          <label>Nombre input: <input name="" type=""/></label><br />
     </fieldset><br />
</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
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.