Cómo dar estilo a los formularios

Para asegurarse de que el formulario sea accesible para la mayor cantidad de personas posible, use los elementos creados para la trabajo: <input>, <textarea>, <select> y <button>. Este es el modelo de referencia de un formulario utilizable.

Los estilos de navegador predeterminados no se ven muy bien. Cambiemos eso.

Asegúrate de que los controles del formulario sean legibles para todos

En la mayoría de los navegadores, el tamaño de fuente predeterminado para los controles de formularios es demasiado pequeño. Para garantizar que los controles del formulario sean legibles, cambia el tamaño de la fuente con CSS:

Aumenta la font-size y la line-height para mejorar la legibilidad.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Ayuda a los usuarios a navegar por tu formulario

El siguiente paso es cambiar el diseño del formulario y aumentar el espaciado de los elementos del formulario. para ayudar a los usuarios a entender qué elementos están juntos.

La propiedad margin de CSS aumenta el espacio entre los elementos, y la propiedad padding aumenta el espacio alrededor del contenido del elemento.

Para el diseño general, usa Flexbox o Grid. Obtén más información sobre los métodos de diseño de CSS.

Asegúrate de que los controles de formularios sean similares

Haz que sea más fácil para las personas completar tus formularios con estilos bien comprendidos para los controles de tus formularios. Por ejemplo, aplica diseño a los elementos <input> con un borde sólido.

input,
textarea {
  border: 1px solid;
}

Ayuda a los usuarios a enviar tu formulario

Considera usar una background para que <button> coincida con el estilo de tu sitio y anular o quitar los diseños border predeterminados.

Ayuda a los usuarios a comprender el estado actual

Los navegadores aplican un estilo predeterminado para :focus. Puedes anular los estilos de :focus para que el color coincida con tu marca.

button:focus {
    outline: 4px solid green;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el diseño de formularios

¿Por qué deberías usar unidades relativas para font-size?

Para garantizar que el tamaño responda al elemento anterior.
Para garantizar que el tamaño responda al modo oscuro,
Para garantizar que el tamaño responda a las consultas de medios
Para garantizar que el tamaño responda a las preferencias del usuario.

¿Cómo puedes aumentar el espaciado entre los controles del formulario?

Usar la propiedad de CSS margin
Usar la propiedad de CSS boundary
Usar la propiedad de CSS padding
Usar la propiedad de CSS spacer

Recursos