Formulários

Formulários coletam dados — inscrição fictícia em oficina, pedido de orçamento de cartaz. Neste volume o envio é demonstração: sem banco, sem cadastro real, sem dados pessoais.

O exemplo deste capítulo é 12-formularios, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Montar form com label ligado a cada controle.
• Usar input, textarea, select e botões com tipos claros.
• Agrupar perguntas com fieldset e legend.
• Aplicar validação nativa (required, type) sem JavaScript.
• Entender action e method neste exercício local.

Rótulo em todo campo

Todo controle precisa de rótulo visível. O for do label deve ser igual ao id do campo:

<label for="email">E-mail</label>
<input id="email" name="email" type="email" required>

Sem essa ligação, clicar no texto não foca o input e o leitor de tela perde a associação.

Estrutura do form

O elemento form é um marco interativo. Os atributos action e method definem para onde os dados vão e como viajam. Com method="get", pares nome/valor podem aparecer na URL. post envia valores no corpo do pedido. Esses atributos não criam um servidor. Neste exemplo, apoio pronto em simulacao.js impede envio e mostra retorno na própria página. Use Lia e lia@example.invalid; não preencha dados reais.

<form id="simulacao">
  <!-- campos -->
  <button type="submit" disabled>Simular pedido</button>
</form>

O botão começa desabilitado. O script de apoio o habilita e intercepta a ação; sem JavaScript não há envio acidental. O retorno confirma que nada foi enviado ou guardado. Não publique este exercício pedindo dados reais.

Tipos e controles

Use o tipo certo: o teclado móvel e a validação nativa ajudam.

• Texto: text, email, tel, url, number, date
• Escolha: checkbox, radio (mesmo name no grupo de radios)
• Texto longo: textarea
• Lista: select + option
• Ação: button type="submit" disabled ou type="button"

O valor enviado vem do name + valor escolhido ou digitado. Controles sem name não entram no envio.

Fieldset, validação e erro comum

<fieldset>
  <legend>Preferência de oficina</legend>
  <!-- radios -->
</fieldset>

required, minlength e tipos especiais disparam validação do navegador antes do envio. novalidate no form (ou formnovalidate no botão) desliga essa checagem — use só quando fizer sentido (rascunho).

Erro comum: placeholder no lugar de label. Placeholder some ao digitar e não substitui o rótulo. Outro erro: só div clicável sem label/input.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Formulários — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Pedido de oficina (demonstração)</h1>
      <p>Não use dados reais. O envio só ilustra marcação e validação.</p>
      <form id="simulacao">
        <p>
          <label for="nome">Nome</label>
          <input id="nome" name="nome" type="text" required autocomplete="off">
        </p>
        <p>
          <label for="email">E-mail</label>
          <input id="email" name="email" type="email" required autocomplete="off">
        </p>
        <fieldset>
          <legend>Oficina desejada</legend>
          <p>
            <input id="of-comp" name="oficina" type="radio" value="composicao" required>
            <label for="of-comp">Composição</label>
          </p>
          <p>
            <input id="of-imp" name="oficina" type="radio" value="impressao">
            <label for="of-imp">Impressão</label>
          </p>
        </fieldset>
        <p>
          <label for="msg">Mensagem</label>
          <textarea id="msg" name="mensagem" rows="4"></textarea>
        </p>
        <p>
          <label for="turno">Turno</label>
          <select id="turno" name="turno">
            <option value="manha">Manhã</option>
            <option value="tarde">Tarde</option>
          </select>
        </p>
        <button type="submit" disabled>Simular pedido</button>
      </form>
      <p id="retorno" role="status" tabindex="-1"></p>
      <noscript><p>A simulação exige JavaScript. Sem inscrição real.</p></noscript>
    </main>
    <script src="simulacao.js"></script>
  </body>
</html>

Use a referência completa da pasta do exemplo: ela inclui o script de apoio. Mude somente um rótulo, preveja, salve, recarregue e clique nele para conferir o foco. Restaure o texto. Depois tente a simulação vazia e uma tentativa fictícia válida; confira o retorno e que a URL não recebeu os valores.

Ordem e acessibilidade rápida

Ordem dos campos no HTML = ordem do Tab. Mensagens de erro devem ser perceptíveis — não confie só na cor. Neste volume, foque em labels, nomes e agrupamento. Estilo fino vem na faixa CSS.

Atividades

1. Por que for e id precisam coincidir?
2. Qual o papel de fieldset/legend no grupo de oficinas?
3. Por que este formulário não deve pedir dados reais?

Respostas comentadas

1. Essa ligação associa o rótulo ao controle para clique, foco e anúncio em tecnologias assistivas.
2. Nomear e agrupar radios relacionados como uma pergunta só.
3. Porque é exercício local sem servidor seguro de produção; dados pessoais não devem entrar em demos de curso.

O arquivo completo

Referência do exemplo 12-formularios, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector('form');
if(form){form.querySelector('[type=submit]').disabled=false;form.addEventListener('submit',e=>{e.preventDefault();const r=document.querySelector('#retorno');r.textContent='Simulação concluída. Nada foi enviado ou guardado. Use dados fictícios.';r.focus();});}