Ajude os usuários a usar o formulário com o navegador que preferirem
Para garantir que seu formulário seja acessível ao maior número possível de pessoas, use os elementos criados para o
job: <input>
, <textarea>
, <select>
e <button>
. Essa é a linha de base para um formulário utilizável.
Os estilos padrão do navegador não estão muito bons! Vamos mudar isso.
Garantir que os controles de formulário sejam legíveis para todos
O tamanho de fonte padrão para controles de formulário na maioria dos navegadores é muito pequeno. Para garantir que os controles do formulário sejam legíveis, altere o tamanho da fonte com CSS:
Aumente a font-size
e a 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
A próxima etapa é alterar o layout do formulário e aumentar 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 em torno do conteúdo do elemento.
Para o layout geral, use Flexbox ou Grade. Saiba mais sobre os métodos de layout CSS.
Garantir que os controles de formulário se pareçam com os controles de formulário
Facilite o preenchimento do seu formulário usando estilos bem compreendidos para seus controles de formulário.
Por exemplo, defina o estilo dos elementos <input>
com uma borda sólida.
input,
textarea {
border: 1px solid;
}
Ajudar os usuários a enviar o formulário
Use um background
na <button>
de acordo com o estilo do site.
e substituir ou remover 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 corresponder à cor da sua marca.
button:focus {
outline: 4px solid green;
}
Teste seu conhecimento
Teste seus conhecimentos sobre a estilização de formulários
Por que você precisa usar unidades relativas para font-size
?
Como aumentar o espaçamento entre controles de formulário?
padding
.boundary
.spacer
.margin
.