Colunas com critério
Duas colunas só para campos curtos que andam juntos. Tudo em meia largura lê como tabela; nada em meia largura gasta um terço da tela com um nome de vinte caracteres.
Índice da vitrine
Início
Ações
Formulários
Navegação
Autenticação
Retorno
Conteúdo
Formulários completos
Três composições inteiras - contato, endereço e barra de filtros - com as decisões que campos soltos não mostram: colunas, agrupamento, validação e onde ficam as ações.
Contato
O formulário curto de sempre, com as decisões visíveis: duas colunas só para o par curto, o obrigatório marcado, a validação no envio e uma única ação cheia.
Endereço
Catorze campos que continuam navegáveis porque estão em três grupos com legenda, e porque as larguras dizem qual parte carrega o texto: a rua ocupa quatro colunas e o número, duas.
Barra de filtros
Uma linha no desktop, uma coluna no celular. Os rótulos ficam: uma barra de quatro controles identificados só pelo placeholder some assim que alguém os preenche.
O que vira URL
/pedidos
O filtro tem de ir para a URL, e não ficar na memória do componente: é isso que torna uma listagem filtrada compartilhável, recarregável e capaz de voltar pelo botão do navegador.
As regras que os três seguem
Seis decisões que aparecem em qualquer formulário do sistema.
Marcar o obrigatório
Marcar o obrigatório, e não o opcional: numa lista em que quase tudo é exigido, a marca some de tanto se repetir - nesse caso, inverta e marque o opcional.
Validar no envio
Acusar erro a cada tecla é a maneira mais comum de um formulário virar hostil: o campo é marcado depois da primeira tentativa, nunca antes.
Uma ação cheia só
As ações no fim, alinhadas à direita, com um único botão cheio: dois botões cheios lado a lado pedem que o leitor decida qual deles é o caminho.
Agrupar com legenda
Cada bloco é um `fieldset` com sua `legend`: é isso que um leitor de tela anuncia antes do grupo, e é o que mantém um formulário de catorze campos navegável.
Deixar o navegador ajudar
`autocomplete` correto em cada campo é o que permite preencher um endereço inteiro num toque. É a linha mais barata de acessibilidade que existe.
Para agentes de IA
Especificação desta página
Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.
/agents/forms.md