Formulários: estrutura e estilo

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira, acervo comunitário fictício no bairro da Ribeira, Recife, abre uma ficha da hora do conto. Ninguém se inscreve de verdade. A validação e a confirmação acontecem na mesma página, sem envio.

O exemplo está em exemplos/23-formularios-estrutura-e-estilo/. Abra index.html. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Ligar label e campo pelo mesmo id.
• Escolher type certo no input.
• Estruturar o form com nome em cada campo.
• Estilizar sem esconder o foco.
• Conferir um formulário completo sem envio de dados.

Label e id

Todo campo visível precisa de rótulo. O for do label é o id do controle. Clique no texto. O cursor entra no campo. O leitor de tela anuncia o nome.

Placeholder não substitui o rótulo. Nome fictício. Nada de dado pessoal.

Tipos de campo

type="text" é o padrão. type="date" abre calendário onde o navegador oferece. select lista opções fechadas. button type="submit" envia o formulário.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ficha de inscrição</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Inscrição na hora do conto</h1>
    <form onsubmit="event.preventDefault()">
      <label for="nome">Nome</label>
      <input id="nome" name="nome" autocomplete="name" required>
      <label for="idade">Faixa etária</label>
      <select id="idade" name="idade">
        <option value="crianca">Criança</option>
        <option value="adulto">Adulto</option>
      </select>
      <label for="quando">Data preferida</label>
      <input id="quando" name="quando" type="date">
      <p><button type="submit">Enviar neste computador</button></p>
    </form>
  </body>
</html>

name vira o par na URL depois do envio. Sem name, o campo não viaja.

Estrutura do formulário

Um form envolve os controles. action indicaria o destino e method="get" colocaria pares na barra se houvesse envio. O apoio pronto da referência cancela esse envio e mostra uma confirmação na própria página.

Não aponte action para um site público. Não peça e-mail verdadeiro. A ficha demonstra marcação.

fieldset e legend agrupam campos aparentados. Nesta ficha curta o agrupamento não é obrigatório. Quando a ficha crescer, o grupo ganha um título visível e anunciado.

Estilo sem esconder o foco

label { display: block; margin-top: 0.75rem; }
input, select, textarea { width: min(24rem, 100%); padding: 0.4rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #e07a5f;
  outline-offset: 2px;
}

display: block no label empilha rótulo e campo. O anel de cerca de 3px fica no teclado. Não use outline: none sem outro foco visível.

Mude o texto do botão para “Confirmar neste computador”. Preveja: só o rótulo do botão muda. Recarregue. Confira. Confirme e veja a mensagem na própria página.

Erro comum: label sem for, ou for diferente do id. O clique no texto não foca o campo.

Arquivo no disco é HTML e CSS. A janela mostra a ficha. GET local não é cadastro. Servidor de estudo, se houver, só em 127.0.0.1.

Atividades

1. O que quebra se for="nome" e o input tiverem id="Nome"?
2. Para que serve o atributo name no envio GET?
3. Por que a referência cancela o envio?

Respostas comentadas

1. O rótulo deixa de apontar para o campo. id distingue maiúscula. O par precisa ser idêntico.
2. Monta ?nome=...&idade=... na URL da página de obrigado. Sem name, aquele valor some.
3. Esta ficha só demonstra marcação e validação. A confirmação permanece na própria página, sem transmitir campos.