Maquetación de formularios a dos columnas con CSS

En esta ocasión voy a tratar un tema que debería ser bastante sencillo de llevar a la práctica, pero que muchas veces deriva en terribles complicaciones. Maquetar formularios puede convertirse en una tarea difícil cuando se quiere mantener la compatibilidad en todos los navegadores, en especial con Internet Explorer que es el que suele tener el comportamiento menos esperado.

Los formularios consisten básicamente de una lista de componentes. Cada uno tiene una etiqueta y un elemento de formulario. Pero no hay que olvidar que los formularios se envían y también se validan, por lo tanto hay que tener un tercer componente que permita agregar un mensaje vinculado a como resultó la validación. Este elemento puede no ser visible al cargar el formulario por primera vez, pero deberá aparecer en cuanto ocurra un error de validación.

Maquetar los formularios con la etiqueta encima del elemento de formulario es lo más sencillo y es lo que recomiendo si no quieren tener ningún tipo de complicaciones. Debajo de ambos, se puede poner el mensaje de validación.

Ahora, puede que quieran mostrar el formulario ubicando la etiqueta a la izquierda y el elemento de formulario a la derecha con el mensaje de validación debajo, alineado con el segundo.

formularios-dos-columnas

El siguiente código lo tomé de la web hace unos años y lo modifiqué, pero en esencia la estructura sigue siendo la misma y puede servir de base para quienes quieran maquetar formularios a dos columnas.

Y ahora, el estilo CSS

Pueden ver este mismo código en acción en el siguiente ejemplo: Ejemplo maquetación de formularios a dos columnas.

El código tiene una respuesta similar en todos los navegadores pero hay que tener en cuenta que hasta el más mínimo cambio, puede empezar a generar comportamientos extraños, especialmente en Internet Explorer.

Algo que me gustaría destacar es el último atributo de la última regla. En realidad, habría que usar un margen, pero justamente el navegador de Microsoft no lo toma, así que se utiliza un relleno y por eso aparece un padding-bottom en lugar de un margin-bottom.

Si necesitan maquetar formularios a dos columnas pueden empezar con este código e ir modificándolo. Pueden aparecer problemas, por ejemplo, si el mensaje de validación es muy largo, o si hay que agregar algún otro elemento de formulario como selects o radio buttons.

Espero que les sirva tanto como a mí.

 

Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

2 thoughts on “Maquetación de formularios a dos columnas con CSS

  1. Excelente blog y buen tip. El único detalle con esta manera es que al utilizar medidas estáticas se pierde la flexibilidad. Últimamente he estado probando con inline-block y funciona muy bien, claro, hay que tener en cuenta el cross-browsing pero para mi solo existe IE8+.
    Saludos.

  2. Sí, la compatibilidad entre los navegadores dificulta las tareas. En la próxima oportunidad que tenga voy a probar el inline-block.

    Gracias por tu comentario
    Saludos.

Deja un comentario

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


*