Ayuda a los usuarios a usar tu formulario con su navegador preferido
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?
¿Cómo puedes aumentar el espaciado entre los controles del formulario?
paddingspacermarginboundary