Formulários bem elaborados ajudam os usuários e aumentam as taxas de conversão. Uma pequena mudança pode fazer uma grande diferença.
Veja um exemplo de uma forma de pagamento simples que demonstra todas as práticas recomendadas:
Veja um exemplo de um 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" restringe os valores de entrada apenas a números, dentro do intervalo especificado por min e max. Se você tentar inserir um número fora do intervalo, a entrada vai 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 validação básica para entradas com tipo email ou url.
Layout de grade CSS
O layout de grade CSS permite a criação direta de grades flexíveis.
Se considerarmos o exemplo flutuante anterior,
em vez de criar as 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 ser reduzido à medida que o tamanho da tela diminuir.
Na demonstração abaixo, temos quantos cartões couberem em cada linha, com um tamanho mínimo de 200px.
Leia mais sobre o layout de grade 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 abaixo, é possível ver que colunas são adicionadas se houver espaço para outra coluna 200px.