Cómo diseñar formularios con CSS: una guía para principiantes

Las aplicaciones recopilan datos principalmente a través de formularios. Tome un formulario de registro genérico, por ejemplo: hay varios campos para que los usuarios ingresen información como su nombre, correo electrónico, etc.

En los viejos tiempos, los sitios web solo tenían formularios HTML simples y aburridos con sin estilos. Eso fue antes de que CSS cambiara todo. Ahora podemos crear formularios más interesantes y animados utilizando las últimas funciones de CSS.

No se limite a creer en mi palabra. A continuación se muestra cómo se ve un formulario HTML típico sin CSS.

Aquí está el mismo formulario mejorado con un poco de CSS .

En este tutorial, le mostraremos cómo recrear el formulario que se muestra arriba, así como algunos otros sorprendentes modificaciones que puede implementar para crear formularios visualmente impresionantes y fáciles de usar.

Demostraremos cómo diseñar formularios con CSS en seis pasos:

1. Configuración box-sizing
2. Selectores CSS para elementos de entrada
3. Métodos básicos de estilo para campos de entrada de texto
4. Aplicar estilo a otros tipos de entrada
5. Pseudoclases de UI
6. Entradas no personalizables

Antes de sumergirnos, es importante comprender que no existe un estilo específico para los formularios. Las posibilidades están limitadas solo por tu imaginación. Esta guía está destinada a ayudarlo a comenzar en el camino para crear sus propios diseños únicos con CSS.

¡Comencemos!

Configuración del tamaño de caja

Por lo general, configuro * {box-sizing:border-box;} no solo para formularios, sino también para páginas web. Cuando lo establezca, el ancho de todos los elementos contendrá el relleno.

Por ejemplo, establezca el ancho y el relleno de la siguiente manera.

.some-class { width:200px; padding:20px;}

El .some-class sin box-sizing:border-box tendrá un ancho de más de 200px, que puede ser un problema. Es por eso que la mayoría de los desarrolladores usan border-box para todos los elementos.

A continuación se muestra una mejor versión del código. También es compatible con los pseudoelementos :before y :after.

*, *:before, *:after { box-sizing: border-box;}

Sugerencia: El selector * selecciona todos los elementos del documento.

Selectores CSS para elementos de entrada

La forma más fácil de seleccionar elementos de entrada es utilizar selectores de atributos CSS.

Estos selectores seleccionarán todos los elementos de entrada en el documento. Si necesita especificar algún selector, deberá agregar clases a los elementos.

<input type="text" class="signup-text-input" />

Entonces:

.signup-text-input { // styles here}

Métodos básicos de estilo para campos de entrada de texto de una sola línea

Los campos de una sola línea son los campos de entrada más comunes que se utilizan en los formularios. Por lo general, una entrada de texto de una sola línea es un cuadro simple con un borde (esto depende del navegador).

Aquí está el marcado HTML para un campo de una sola línea con un marcador de posición.

<input type="text" placeholder="Name" />

Se verá así:

Puede utilizar lo siguiente Propiedades CSS para hacer que este campo de entrada sea más atractivo.

• Relleno (para agregar espacio interior)
• Margen (para agregar un margen alrededor del campo de entrada)
• Borde
• Sombra del cuadro
• Radio del borde
• Ancho
• Fuente

Hagamos zoom en cada una de estas propiedades.

Relleno

Agregar algo de espacio interior al campo de entrada puede ayudar a mejorar la claridad. Puede lograr esto con la propiedad padding.

input { padding: 10px;}

Margen

Si hay otros elementos cerca de su campo de entrada, es posible que desee agregar un margen alrededor para evitar la agrupación.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Borde

En la mayoría de los navegadores, los campos de entrada de texto tienen bordes, que puede personalizar.

.border-customized-input { border: 2px solid #eee;}

También puede eliminar un borde por completo.

.border-removed-input { border: 0;}

Consejo: asegúrese para agregar un color de fondo o box-shadow cuando se elimina el borde. De lo contrario, los usuarios no verán la entrada.

Algunos diseñadores web prefieren mostrar solo el borde inferior porque se siente un poco como escribir en una línea en un cuaderno.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Sombra de caja

Puede usar la propiedad box-shadow de CSS para agregar una sombra paralela. Puede lograr una variedad de efectos jugando con los cinco valores de la propiedad.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Radio del borde

La propiedad border-radius puede tener un impacto masivo en la sensación de sus formularios. Al curvar los bordes de los cuadros, puede alterar significativamente la apariencia de sus campos de entrada.

.rounded-input { padding:10px; border-radius:10px;}

Puede lograr una apariencia diferente usando box-shadow y border-radius juntos.

Ancho

Utilice la propiedad width para establezca el ancho de las entradas.

input { width:100%;}

Fuentes

La mayoría de los navegadores utilizan una familia de fuentes y un tamaño diferentes para los elementos de formulario. Si es necesario, podemos heredar la fuente del documento.

input, textarea { font-family:inherit; font-size: inherit;}

Aplicar estilo a otros tipos de entrada

Puede diseñar otros tipos de entrada como área de texto, botón de radio, casilla de verificación y más. Echemos un vistazo más de cerca.

Áreas de texto

Las áreas de texto son similares a las entradas de texto, excepto que permiten entradas de varias líneas. Por lo general, los usaría cuando desea recopilar datos de formato más largo de los usuarios, como comentarios, mensajes, etc. Puede usar todas las propiedades básicas de CSS que discutimos anteriormente para diseñar áreas de texto.

La propiedad resize también es muy útil en áreas de texto. En la mayoría de los navegadores, las áreas de texto se pueden cambiar de tamaño a lo largo de los ejes x e y (valor: both) de forma predeterminada. Puede configurarlo en both, horizontal o vertical.

Mira este área de texto que diseñé:

Ver el lápiz
dyomzez de Supun Kavinda (@SupunKavinda)
en CodePen.

En este ejemplo, utilicé resize:vertical para permitir solo el cambio de tamaño vertical. Esta práctica se utiliza en la mayoría de los formularios porque evita las molestas barras de desplazamiento horizontales.

Nota: si necesita crear áreas de texto con cambio de tamaño automático, deberá utilizar un enfoque de JavaScript, que está fuera del alcance de este artículo.

Casillas de verificación y botones de opción

La casilla de verificación y los botones de opción predeterminados son difíciles de diseñar y requieren CSS (y HTML) más complejos.

Para diseñar una casilla de verificación, use el siguiente código HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Algunas cosas a tener en cuenta:

• Ya que estamos usando <label> para ajustar <input>, si hace clic en cualquier elemento dentro de <``label``>, el <input> se hará clic
• Ocultaremos el <input> porque los navegadores no nos permiten modificarlo mucho
• <span> crea una casilla de verificación personalizada
• Usaremos el input:checked selector de pseudoclases para obtener el estado marcado y el estilo de la casilla de verificación personalizada

Aquí hay una casilla de verificación personalizada (consulte los comentarios en el CSS para obtener más explicaciones):

Vea el lápiz
yLNKQBo de Supun Kavinda ( @SupunKavinda)
en CodePen.

Aquí hay un botón de opción personalizado:

Ver el lápiz
eYNMQNM de Supun Kavinda (@SupunKavinda)
en CodePen.

Usamos el mismo concepto (input:checked) para crear elementos personalizados en ambos ejemplos.

En los navegadores, las casillas de verificación tienen forma de caja, mientras que los botones de opción son redondos. Es mejor mantener esta convención en las entradas personalizadas para evitar confundir al usuario.

Seleccionar menús

Seleccionar menús permiten a los usuarios seleccionar un elemento entre múltiples opciones.

Puede diseñar el elemento <select> para que se vea más atractivo.

select { width: 100%; padding:10px; border-radius:10px;}

Sin embargo, no puede diseñar el menú desplegable (o los elementos <option>) porque tienen un estilo predeterminado según el sistema operativo. La única forma de diseñar esos elementos es usar menús desplegables personalizados con JavaScript.

Botones

Como la mayoría de los elementos, los botones tienen estilos predeterminados.

<button>Click Me</button>

Condimentemos esto un poco.

Pseudoclases de IU

A continuación se muestran algunas pseudoclases de IU que se usan comúnmente con elementos de formulario.

Se pueden usar para mostrar avisos según los atributos de un elemento:

• :required
• :valid y :invalid
• :checked (ya usamos esto)

Estos se pueden usar para crear efectos en cada estado:

• :hover
• :focus
• :active

Mensajes generados con: required

Para mostrar un mensaje que se requiere entrada:

Si elimina el atributo con JavaScript, el mensaje "Required" se eliminará automáticamente.

Podemos hacer lo mismo con el :valid y :invalid pseudoclases.

: hover y: focus

:hover selecciona un elemento cuando el puntero del mouse pasa sobre él. :focus selecciona un elemento cuando está enfocado.

Estas pseudoclases se utilizan a menudo para crear transiciones y ligeros cambios visuales. Por ejemplo, puede cambiar el ancho, el color de fondo, el color del borde, la intensidad de la sombra, etc.El uso de la propiedad transition con estas propiedades hace que esos cambios sean mucho más suaves.

A continuación, se muestran algunos efectos de desplazamiento sobre los elementos del formulario (intente desplazarse sobre los elementos).

Vea el lápiz
yLNKZqg de Supun Kavinda (@SupunKavinda)
en CodePen.

Cuando los usuarios ven que los elementos cambian sutilmente cuando si se ciernen sobre ellos, tienen la sensación de que el elemento es procesable. Esta es una consideración importante al diseñar elementos de formulario.

¿Notó que (en algunos navegadores) aparece un contorno azul cuando se enfoca en elementos de formulario? Puede usar la pseudoclase :focus para eliminarla y agregar más efectos cuando el elemento está enfocado.

El siguiente código elimina el esquema de enfoque para todos los elementos.

*:focus {outline:none !important}

Para agregar un esquema de enfoque:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

¿Ha visto entradas de búsqueda que escala cuando se enfoca? Pruebe esta entrada.

Vea el lápiz
KKpoJJa de Supun Kavinda (@SupunKavinda)
en CodePen.

Entradas no personalizables

Históricamente, diseñar elementos de formulario ha sido una tarea difícil. Hay algunos elementos de formulario sobre los que no tenemos mucho control sobre el estilo. Por ejemplo:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Estos elementos los proporciona el navegador y se diseñan según el sistema operativo. La única forma de aplicar estilo a estos elementos es usar controles personalizados, que se crean con elementos HTML modificables como div, span, etc.

Por ejemplo, al aplicar estilo a <input type="file">, podemos ocultar la entrada predeterminada y usar un botón personalizado.

Los controles personalizados para los elementos del formulario son desarrollado para la mayoría de las principales bibliotecas de JavaScript. Puede encontrarlos en GitHub.

Conclusión

Ahora debe comprender cómo diseñar elementos de formulario simples y cómo usar controles personalizados cuando los campos de entrada del navegador son difíciles de diseñar. Como dije al principio de esta publicación, estos son solo los bloques de construcción básicos del estilo de formulario CSS. Debe utilizar estos consejos como base para dejar volar su imaginación.

Como consejo final, recuerde hacer que todos sus formularios sean receptivos.

¿Busca más inspiración para el diseño de formularios? Eche un vistazo a esta colección de CodePen.