Ajudar os usuários a usar seu formulário no navegador da preferência
Para garantir que seu formulário seja acessível ao maior número possível de pessoas, use os elementos criados para a tarefa: <input>
, <textarea>
, <select>
e <button>
. Esse é o valor de referência de um formulário utilizável.
Os estilos padrão do navegador não são muito bons. Vamos mudar isso.
Garantir que os controles de formulários sejam legíveis para todos
Na maioria dos navegadores, o tamanho de fonte padrão dos controles de formulário é muito pequeno. Para garantir que seus controles de formulário estejam legíveis, altere o tamanho da fonte com CSS:
Aumente font-size
e line-height
para melhorar a legibilidade.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Ajudar os usuários a navegar pelo formulário
Mude o layout do formulário e aumente o espaçamento dos elementos para ajudar os usuários a entender quais elementos estão juntos.
A propriedade CSS margin
aumenta o espaço entre os elementos,
e a propriedade padding
aumenta o espaço ao redor do conteúdo do elemento.
Para o layout geral, use Flexbox ou Grid. Saiba mais sobre os métodos de layout CSS.
Garantir que os controles de formulários se pareçam com controles de formulários
Facilite o preenchimento de seu formulário usando estilos conhecidos para seus controles de formulário.
Por exemplo, defina o estilo de elementos <input>
com uma borda sólida.
input,
textarea {
border: 1px solid;
}
Ajudar os usuários a enviar seu formulário
Use um background
para que seu <button>
corresponda ao estilo do site e substitua ou remova os estilos border
padrão.
Ajudar os usuários a entender o estado atual
Os navegadores aplicam um estilo padrão para :focus
.
Você pode modificar os estilos de :focus
para que correspondam à cor da sua marca.
button:focus {
outline: 4px solid green;
}
Teste seu conhecimento
Teste seus conhecimentos sobre formas de estilização
Por que usar unidades relativas para font-size
?
Como aumentar o espaçamento entre os controles dos formulários?
padding
.spacer
.margin
.boundary
.