Formulários que o aluno consegue conferir

Neste capítulo você vai marcar campos, testar a validação e simular um resultado sem enviar dados.

Seu ponto de partida

Estude depois do capítulo 13. O exemplo deste capítulo é 14-formularios, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Todo campo precisa de rótulo

Label descreve o campo. For aponta para o id do controle. Placeholder é uma dica temporária e não substitui o rótulo. Name identifica o dado num envio, mas este volume não cria um servidor para recebê-lo.

A inscrição é fictícia. O apoio pronto simula a resposta na própria página e não faz pedidos de envio. Use somente os valores inventados indicados. O volume PHP explica o tratamento de dados no servidor em outro percurso.

Faça no seu exemplo

Confira inscricao.html.

<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 para Nome da pessoa fictícia.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O rótulo muda e continua associado ao campo. Clicar nele focaliza a entrada.

Se não acontecer

Se não focalizar, confira for e id. Os valores precisam ser iguais e únicos.

O navegador ajuda a validar

Required exige preenchimento. Type=“email” verifica um formato de e-mail. Maxlength limita a entrada no controle. Isso ajuda a interação, mas não substitui validação de servidor quando existir envio real.

Nesta simulação, tente enviar vazio primeiro. Depois use Lia e lia@example.invalid. O domínio .invalid é reservado para exemplos; não corresponde a uma caixa postal do aluno.

Faça no seu exemplo

Confira o campo de e-mail.

<label for="email">E-mail fictício</label>
<input id="email" name="email" type="email" required autocomplete="off">

Mude uma coisa e preveja

Digite somente teste no e-mail e tente simular.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O navegador pede um formato válido. Corrija para lia@example.invalid.

Se não acontecer

Se aceitar qualquer texto, confira type. Não desligue a validação para terminar mais rápido.

Uma ação precisa de retorno

Button type=“submit” solicita a ação do formulário. O arquivo de apoio já fornecido intercepta a simulação e mostra uma confirmação local numa região de status. Não é cadastro, reserva nem armazenamento.

Um botão reset volta os controles aos valores iniciais; não apaga dados de um servidor. Sem o apoio de simulação, o botão começa desabilitado e a página explica a necessidade de JavaScript. Não há envio acidental por GET.

Faça no seu exemplo

Confira os botões e a região de retorno.

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

Mude uma coisa e preveja

Preencha os dados fictícios válidos e simule uma vez.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A confirmação afirma que nada foi enviado. A URL não ganha nome ou e-mail.

Se não acontecer

Se abrir outra página com dados na URL, compare o apoio fornecido e o tipo do botão. Esta referência não usa envio de formulário.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

O apoio pronto de simulação

O arquivo assets/simulacao.js está completo no exemplo. Não é preciso escrever JavaScript para esta prática de HTML e CSS. Ele oferece retorno local, sem pedidos de envio ou armazenamento.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Tente enviar vazio antes de preencher.

2. Confira a associação de cada label.

3. Explique a diferença entre simulação e cadastro.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. A validação interrompe o pedido de simulação.

2. For aponta para um id existente e único.

3. A simulação oferece retorno local sem servidor ou gravação.

Quando seguir

Você testa erro e sucesso sem inserir dados reais. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> <a href="local.html">Local</a> <a href="inscricao.html">Inscrição</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/simulacao.js

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