Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Cómo Construir un Formulario Adaptativo con Flexbox

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Miguel Sánchez (you can also view the original English article)

En este tutorial, aprenderemos cómo aprovechar flexbox para crear un formulario adaptativo. Lo interesante (y emocionante al mismo tiempo) es que flexbox nos permite construir nuestro formulario sin necesidad de utilizar las consultas de medios ('media queries').

Antes de empezar, echemos un vistazo a lo que vamos a desarrollar (comprueba la versión más grande para ver cómo cambia el diseño de formulario):

Estructura del Formulario

Empezando por lo primero, profundicemos en la estructura del formulario. Lo marcaremos como sigue:

  • Utilizaremos la lista desordenada .flex-outer para agrupar los diversos elementos de formulario
  • y la lista desordenada .flex-inner para agrupar las casillas de verificación ('checkboxes').
  • Casi todos los controles del formulario vienen con su etiqueta correspondiente.

¡Eso es todo! Definiendo simplemente dos listas desordenadas (también podríamos haber utilizado ordenadas), hemos construido un formulario muy limpio. Así es como se muestra:

Nota: utilizamos el elemento p, en lugar de label, antes de la lista .flex-inner . Esto es porque, en este caso particular, no tiene ningún sentido utilizar la etiqueta label. Esta etiqueta debe utilizarse sólo para asociar una etiqueta de texto con un control de formulario.

Aquí está el marcado para las casillas de verificación:

Con el marcado listo, el formulario sin estilos se muestra así:

No será el formulario más atractivo que hayas visto, pero ¡funciona! Es semántico, accesible y fluido; aspectos que son sin duda más importantes que cualquier cosa.

En este punto, ya estamos listos para empezar a aplicarle algunos estilos.

Estilos del Formulario

Comencemos añadiendo normalize y autoprefixer a la configuración de nuestro 'pen':

A continuación, identificamos los contenedores flex. En nuestro caso, los siguientes elementos:

  • Cada uno de los elementos de la lista .flex-outer .
  • La lista .flex-inner que contiene todas las casillas de verificación.

Además, queremos centrar verticalmente los elementos flex a lo largo del eje transversal.

Para lograr este comportamiento, creamos algunas reglas CSS iniciales:

El siguiente paso es especificar los anchos para los elementos flex. Comenzamos con los elementos flex de la lista .flex-outer .

Los requisitos principales:

  • El ancho de las etiquetas debe ser de al menos 120px y como mucho de 220px.
  • La anchura de los elementos del formulario que van tras las etiquetas debe ser de al menos 220px.

¿Qué resultado nos da esto? Cada etiqueta, junto con su elemento de formulario asociado, se mostrará en una sola fila horizontal cuando el ancho del formulario sume por lo menos 340px. En cualquier otro caso, todos los elementos del formulario (salvo las casillas de verificación, como veremos en un momento) se apilará verticalmente.

Nota: los valores mencionados son arbitrarios – puedes modificarlos según tus necesidades.

Botón de Enviar

Por último, para el botón de enviar, que es también un elemento flex, definimos unos estilos básicos:

Casillas de Verificación

Demos ahora estilos a las casillas de verificación. Recuerda que su contenedor flex tiene una anchura mínima de 220px.

Primero establecemos en 100px la anchura de los elementos flex que son padres inmediatos de las casillas de verificación:

Luego, aprovechamos la propiedad justify-content para alinearlas a lo largo del eje principal. Ten en cuenta que esta propiedad tiene diferentes valores pero, para este ejemplo, nos interesa sólo el valor de space-between:

Este valor funciona bien y nos permite lograr una alineación consistente para las casillas de verificación y sus respectivas etiquetas. Una cosa que debemos destacar es que este valor de la propiedad puede distribuir torpemente los elementos de la fila final. En ciertos anchos de ventana verás algo como esto:

Observa la alineación de los dos últimos elementos flex. Si, por alguna razón, no te gusta esa composición y prefieres que aparezcan uno al lado del otro, puedes probar algo como esto:

  • Elimina la propiedad justify-content del contenedor flex.
  • Utiliza porcentajes para añadir un ancho fijo a los elementos flex (por ejemplo, width: 50%).
  • Usa consultas de medios ('media queries') para reemplazar esta anchura. Por ejemplo, cuando el ancho de la ventana sea mayor que 992px, da a los elementos flex width: 25% en lugar de width: 50%.

Sobre todo, es importante entender dos cosas:

  • Flexbox nos da gran flexibilidad para crear rápidamente formularios bonitos
  • y todos los valores antes mencionados funcionan bien para este ejemplo concreto. Para tus propios diseños, probablemente necesitarás valores diferentes. Por ejemplo, aquí las etiquetas de las casillas de verificación son bastante pequeñas y por ello damos a sus padres un ancho fijo (es decir, 100px). Sin embargo, si tuvieran otras anchuras, sería más inteligente darles flex: 1 100px.

Estilos Finales

Antes de irnos, vamos a añadir un poco más de estética para hacer las cosas más presentables. Selecciona la pestaña de la CSS en la demostración inferior para ver dónde se han añadido colores y espaciado:

Conclusión

Como se puede ver, con un marcado mínimo y el poder de flexbox, logramos construir un formulario adaptativo. Esperamos que hayas conseguido algunos conocimientos útiles que te ayuden a crear tus propios formularios con flexbox.

Próximos Pasos

Si quieres llevar este formulario un paso más allá, tengo dos desafíos para ti:

  • Mejora su apariencia reemplazando los estilos predeterminados (por ejemplo, agregando casillas de verificación personalizadas)
  • y hazlo dinámico. Por ejemplo, si estás familiarizado con WordPress, mira si es posible crear un formulario de contacto con Contact Form 7 o Ninja Form que conserve la estructura y estilos de este formulario.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.