Error

Los formularios bien diseñados ayudan a los usuarios y aumentan los porcentajes de conversiones. Una pequeña corrección puede marcar una gran diferencia.

Si prefieres aprender estas prácticas recomendadas con un instructivo, consulta los dos codelabs: codelab de prácticas recomendadas para formularios de pago y codelab de prácticas recomendadas para formularios de direcciones.

Este es un ejemplo de un formulario de pago que demuestra todas las prácticas recomendadas:

Este es un ejemplo de un formulario de dirección simple que demuestra todas las prácticas recomendadas:

Por ejemplo, el siguiente código HTML especifica la entrada de un año de nacimiento entre 1900 y 2020. El uso de type="number" limita los valores de entrada solo a números, dentro del rango especificado por min y max. Si intentas ingresar un número fuera del rango, la entrada se establecerá para tener un estado no válido.

En el siguiente ejemplo, se usa pattern="[\d ]{10,30}" para garantizar un número de tarjeta de pago válido y, al mismo tiempo, permitir espacios:

Los navegadores modernos también realizan una validación básica de las entradas con el tipo email o url.

Diseño de cuadrícula de CSS

El diseño de cuadrícula de CSS permite crear cuadrículas flexibles de forma sencilla. Si consideramos el ejemplo anterior de elementos flotantes, en lugar de crear nuestras columnas con porcentajes, podríamos usar el diseño de cuadrícula y la unidad fr, que representa una parte del espacio disponible en el contenedor.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

La cuadrícula también se puede usar para crear diseños de cuadrícula regulares, con tantos elementos como quepan. La cantidad de pistas disponibles se reducirá a medida que disminuya el tamaño de la pantalla. En la demostración, tenemos tantas tarjetas como quepan en cada fila, con un tamaño mínimo de 200px.

Más información sobre el diseño de cuadrícula de CSS

Diseño de varias columnas

Para algunos tipos de diseño, puedes usar el diseño de varias columnas (multicolumna), que puede crear cantidades de columnas responsivas con la propiedad column-width. En la demostración, puedes ver que se agregan columnas si hay espacio para otra columna 200px.