Como definir o estilo de formulários

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?

Para garantir que o tamanho responda à preferência do usuário.
🎉
Para garantir que o tamanho responda ao elemento anterior.
Tente de novo.
Para garantir que o tamanho responda ao modo escuro.
Tente de novo.
Para garantir que o tamanho responda a consultas de mídia.
Tente de novo.

Como aumentar o espaçamento entre os controles dos formulários?

Como usar a propriedade CSS padding.
Tente de novo.
Como usar a propriedade CSS spacer.
Tente de novo.
Como usar a propriedade CSS margin.
🎉
Como usar a propriedade CSS boundary.
Tente de novo.

Recursos