Como definir o estilo de formulários

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.

Observação : o aprimoramento progressivo é uma estratégia que oferece um valor de referência de conteúdos e recursos essenciais para o maior número possível de usuários. Ela garante a melhor experiência possível para usuários em navegadores mais recentes. Comece com conteúdo, use HTML semântico, adicione CSS preparado para o futuro e adicione JavaScript robusto como última etapa.

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;
}

Observação : para font-size, use unidades relativas como em (relativa ao tamanho base do elemento pai do elemento) ou rem (relativa ao tamanho base do documento) para garantir que o tamanho responda à preferência do usuário. Os usuários podem mudar a font-size base, e todos os elementos com um font-size relativo serão ajustados automaticamente. Para line-height, use um valor sem unidade, como 1.5, para manter a altura da linha em relação ao tamanho da fonte. Saiba mais sobre pixels e unidades relativas no CSS.

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.

Observação : a cor padrão da borda <input> é muito clara em muitos navegadores. A falta de contraste pode dificultar a visualização do elemento, especialmente em dispositivos móveis. Abra esta demonstração no Chrome para Android para conferir os estilos padrão.

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.

Observação : nos navegadores mais recentes, é possível estilizar um <button> como qualquer outro elemento. Portanto, use sempre um <button> ou <input type="submit"> semântico. O uso do elemento criado para o job oferece muitos benefícios integrados de usabilidade e acessibilidade que não seriam oferecidos com um elemento genérico, como uma <div>. Você vai aprender sobre os recursos integrados em outros módulos. Saiba mais sobre como reverter o estilo padrão de um <button>.

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;
}

Observação : só remova outline em :focus se você também adicionar outros estilos de foco adequados, para garantir que os estilos padrão e de foco sejam distinguíveis. Saiba mais sobre como criar indicadores de foco.

Teste seu conhecimento

Teste seus conhecimentos sobre a estilização de formulários

Por que você precisa 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 novamente.

Para garantir que o tamanho responda ao modo escuro.

Tente novamente.

Para garantir que o tamanho responda a consultas de mídia.

Tente novamente.

Como aumentar o espaçamento entre controles de formulário?

Usando a propriedade CSS padding.

Tente novamente.

Usando a propriedade CSS spacer.

Tente novamente.

Usando a propriedade CSS margin.

🎉

Usando a propriedade CSS boundary.

Tente novamente.

Recursos

• Conheça o CSS
• Métodos de layout CSS
• Como criar indicadores de foco
• Como reverter o estilo padrão de uma <button>.