Construir um formulário compreensível

Neste capítulo você vai conferir campos rotulados e uma simulação sem envio. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 07. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 08-formulario-local do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Rótulo identifica o que preencher

Label fornece o nome do campo. Seu for coincide com o id do input ou textarea. Name identifica o valor numa eventual submissão, mas não substitui o rótulo. Placeholder é uma dica temporária que pode desaparecer quando se digita. A referência usa nomes explícitos e orienta valores fictícios. Clique no rótulo e confira que ele leva ao campo. A associação também fornece contexto a tecnologias assistivas. Não peça dados do aluno para testar uma marcação: Lia e lia@example.invalid bastam para a experiência.

Faça na sua cópia

Confira o campo nome e seu label. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<label for="nome">Nome fictício</label>
<input id="nome" name="nome" required maxlength="80" autocomplete="off">

Mude uma coisa e preveja

Troque somente o texto do label por Nome da pessoa fictícia.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O nome muda e a associação continua; clicar no label foca o campo.

Se não acontecer

Confira for e id iguais e únicos. Não coloque a orientação apenas no placeholder.

Validação ajuda a conferir a entrada

Required pede preenchimento. Type=email verifica um formato de e-mail, sem provar que a caixa existe. Maxlength limita a entrada no controle. Essa validação ocorre no navegador; um serviço real também precisaria conferir valores no servidor. O exemplo é uma simulação local sem servidor de escrita. A região de retorno usa role=status para informar a conclusão sem transformar o texto num alerta urgente. Teste vazio, formato errado e dados fictícios válidos; um único envio correto não mostra como o formulário trata dificuldades.

Faça na sua cópia

Confira o campo email e tente a simulação. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<input id="email" name="email" type="email" required autocomplete="off">

Mude uma coisa e preveja

Digite somente teste no e-mail, preenchendo os demais campos com conteúdo fictício.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O navegador pede um formato válido. Corrija para lia@example.invalid e a experiência pode continuar.

Se não acontecer

Confira type=email e required. Não desligue a validação apenas para terminar o teste.

A ação tem um retorno e um recorte

Assets/simulacao.js é apoio pronto nesta etapa. Ele habilita o botão, intercepta submit e mostra uma confirmação na própria página. PreventDefault impede a ação padrão do formulário. Não há fetch, cadastro ou armazenamento. O botão nasce desabilitado para impedir envio acidental quando JavaScript falha; noscript explica essa condição. Reset devolve campos aos valores iniciais e limpa o retorno. Um projeto publicado que recebe dados exigiria outro percurso e tratamento de servidor. Aqui o objetivo é o aluno conseguir conferir a marcação e a interação da demonstração.

Faça na sua cópia

Use Simular pergunta e depois Limpar. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<button id="simular" type="submit" disabled>Simular pergunta</button>
<button type="reset">Limpar</button>
<p id="retorno" role="status" tabindex="-1"></p>

Mude uma coisa e preveja

Faça somente uma simulação válida com Lia, lia@example.invalid e uma pergunta inventada.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A mensagem afirma que nada foi enviado ou guardado. A URL não ganha os dados. Limpar restaura campos e retorno.

Se não acontecer

Se os dados aparecerem na URL, confira o apoio pronto e o botão. Compare a cópia com a referência antes de seguir.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Teste a associação de todos os rótulos.

2. Faça uma tentativa vazia e uma com e-mail inválido.

3. Simule uma pergunta e confira URL, retorno e reset.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. For e id ligam rótulo e controle. Clicar no texto deve focar o campo correto, sem id repetido.

2. O navegador solicita campos obrigatórios e formato de e-mail. Essa ajuda não substitui validação de um servidor real.

3. O apoio intercepta submit e mostra retorno local. Reset restaura a base; nenhuma gravação ou inscrição real acontece.

Quando seguir

Você confere rótulos, tentativas inválidas e simulação válida e explica o que a demonstração faz. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

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

assets/simulacao.js

const form = document.querySelector('#visita');
const send = document.querySelector('#simular');
const status = document.querySelector('#retorno');
if (form && send && status) {
  send.disabled = false;
  form.addEventListener('submit', event => {
    event.preventDefault();
    status.textContent = 'Simulação concluída. Nada foi enviado ou guardado.';
    status.focus();
  });
  form.addEventListener('reset', () => { status.textContent = ''; });
}