Formulários bem projetados ajudam os usuários e aumentam as taxas de conversão. Uma pequena correção pode fazer uma grande diferença.
Se você preferir aprender essas práticas recomendadas com um tutorial, confira os dois codelabs: Codelab de práticas recomendadas de formulário de pagamento e Codelab de práticas recomendadas de formulário de endereço.
Confira um exemplo de formulário de pagamento que demonstra todas as práticas recomendadas:
Confira um exemplo de formulário de endereço simples que demonstra todas as práticas recomendadas:
Por exemplo, o HTML a seguir especifica a entrada para um ano de nascimento entre
1900 e 2020. O uso de type="number" limita os valores de entrada a números, dentro do intervalo
especificado por min e max. Se você tentar inserir um número fora do intervalo, a entrada será
configurada para ter um estado inválido.
O exemplo a seguir usa pattern="[\d ]{10,30}" para garantir um número de cartão de pagamento válido, permitindo espaços:
Os navegadores modernos também fazem a validação básica para entradas com o tipo email ou url.
Layout de grade CSS
O CSS Grid Layout permite a criação simples de grades flexíveis.
Se considerarmos o exemplo flutuante anterior,
em vez de criar colunas com porcentagens,
poderíamos usar o layout de grade e a unidade fr,
que representa uma parte do espaço disponível no contêiner.
.container { display: grid; grid-template-columns: 1fr 3fr; }
A grade também pode ser usada para criar layouts de grade regulares,
com quantos itens couberem.
O número de faixas disponíveis vai diminuir à medida que o tamanho da tela for reduzido.
Na demonstração, temos o máximo de cards que cabem em cada linha,
com um tamanho mínimo de 200px.
Saiba mais sobre o layout de grade do CSS
Layout de várias colunas
Para alguns tipos de layout, você pode usar o layout de várias colunas (Multicol),
que pode criar números responsivos de colunas com a propriedade column-width.
Na demonstração, é possível ver que as colunas são adicionadas se houver espaço para outra coluna 200px.