Los formularios bien diseñados ayudan a los usuarios a aumentar los porcentajes de conversiones. Una pequeña corrección puede marcar una gran diferencia.
Este es un ejemplo de un formulario de pago simple 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 HTML especifica la entrada para un año de nacimiento entre 1900 y 2020. El uso de type="number" restringe los valores de entrada a solo números, dentro del rango especificado por min y max. Si intentas ingresar un número fuera del rango, se configurará la entrada para que tenga 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 la creación directa de cuadrículas flexibles.
Si consideramos el ejemplo flotante anterior, en lugar de crear las 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.
A medida que se reduzca el tamaño de la pantalla, se reducirá la cantidad de segmentos disponibles.
En la siguiente demostración, tenemos todas las tarjetas que caben 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 (Multicol), que puede crear números responsivos de columnas con la propiedad column-width.
En la siguiente demostración, puedes ver que las columnas se agregan si hay espacio para otra columna 200px.