Formulário de prática sem envio de dados

Neste capítulo você vai estilizar campos identificados e conferir uma demonstração local sem cadastro nem serviço de servidor.

Seu ponto de partida

Continue depois do capítulo 05. Abra pacote de exemplos/06-formulario-local. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Identifique cada campo

Abra pratica.html na pasta de início. O formulário já está montado e protegido para funcionar apenas como demonstração. Não use informações pessoais; os testes usam a personagem fictícia Lia e o endereço lia@example.invalid.

Label identifica o campo. Seu atributo for corresponde ao id do controle. Clicar no rótulo Nome fictício deve colocar o cursor no input. Placeholder, quando usado, é somente uma dica temporária; não substitui o rótulo.

Input type=“text” recebe texto numa linha. Textarea recebe texto em várias linhas. O arquivo inclui também um select com opções de estudo e um checkbox com rótulo envolvendo o controle. Cada elemento tem uma identificação visível.

O estilo dos controles vem da base. Você personalizará apenas a largura do formulário e a distância entre seus grupos.

Faça no seu exemplo

Compare estas linhas com as existentes em pratica.html. Mantenha o for e o id iguais.

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

Mude uma coisa e preveja

Troque apenas o texto visível do rótulo para Personagem do exercício.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Clique no rótulo, digite Lia e use Tab para chegar ao próximo campo.

Resultado esperado neste teste: O rótulo deve mudar e continuar colocando o cursor no mesmo campo ao ser clicado.

Se não acontecer

Se mudar id=“nome” para outro nome, atualize for com o mesmo valor. Um texto de rótulo próximo não cria sozinho a associação.

Observe a validação do navegador

Required marca um campo necessário. Type=“email” faz uma verificação básica de formato. Essa validação não confirma que o endereço existe e não cria um cadastro.

O botão Conferir preenchimento começa desativado no HTML. O script local registra o tratamento do formulário e só então habilita esse botão. Assim, se o script não carregar, o exemplo não oferece um envio convencional por esse controle. Um bloqueio adicional no evento de envio também acompanha a demonstração.

Quando os campos atendem à validação, o script interrompe o envio e mostra uma mensagem local. Ele não grava os valores, não envia e-mail e não chama um serviço remoto. O código está completo no arquivo app.js e no fim do capítulo. Você não precisa aprender JavaScript para realizar os ajustes CSS deste volume.

Em um sistema real, as verificações do navegador não substituem as do servidor. Criar esse sistema é outro curso.

Faça no seu exemplo

Localize o campo existente em pratica.html. O teste será feito no navegador; não precisa editar o código.

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

Mude uma coisa e preveja

Tente conferir com os campos vazios. Depois preencha Nome com Lia e E-mail com texto-sem-arroba. Por fim, use lia@example.invalid.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Com preenchimento válido, confira a mensagem Nenhum dado foi enviado. Clique em Limpar; os campos e a mensagem devem voltar ao início.

Resultado esperado neste teste: O navegador deve bloquear as duas primeiras tentativas e permitir a mensagem local na última.

Se não acontecer

Se o botão permanecer desativado, confira se app.js está na mesma pasta e se o caminho do script está correto. Não retire as proteções para fazê-lo parecer um formulário real.

Dê espaço sem remover o foco

Um formulário precisa permanecer compreensível depois de estilizado. O nome do campo deve continuar visível, o texto digitado deve caber e o foco precisa identificar o controle ativo.

Max-width limita a largura máxima do formulário. Ele continua podendo ocupar menos espaço numa tela estreita. A regra .campo seleciona cada grupo de rótulo e controle; margin-block cria separação vertical.

Não diminua todos os campos para ficarem numa linha. A organização vertical é simples e funciona quando a janela é estreita ou o texto está ampliado. Você não precisa adicionar animação nem ícones para concluir o exercício.

O indicador de foco de 3px foi fornecido desde o início. Preserve-o. Se usar apenas o mouse para conferir, pode deixar passar um problema que aparece para quem usa Tab.

Faça no seu exemplo

Acrescente as duas regras em custom.css. Os grupos do formulário já têm class=“campo”.

form { max-width: 32rem; }
.campo { margin-block: 1.5rem; }

Mude uma coisa e preveja

Troque somente margin-block: 1.5rem por margin-block: 2rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Use Tab para percorrer campos, seleção, checkbox e botões. Clique no rótulo do checkbox e confirme que ele alterna. Teste zoom de 200% e restaure 1.5rem.

Resultado esperado neste teste: Os grupos devem ficar mais separados, sem mudar os rótulos nem a validação.

Se não acontecer

Não use outline: none para remover a borda de foco. Ela informa qual controle será ativado pelo teclado.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

O comportamento local fornecido

Este é o app.js completo. Ele é apoio ao exercício de CSS, não uma atividade de programação. O formulário HTML também impede o envio convencional e inicia o botão desativado. O script o habilita somente depois de registrar os controles.

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Corrija um for que não corresponda ao id do campo.
2. Teste um endereço sem arroba e depois lia@example.invalid.
3. Aumente o espaço entre grupos sem alterar simple.css.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Faça for e id usarem o mesmo identificador. Teste clicando no rótulo.

2. O primeiro falha na validação básica. O segundo permite a demonstração, mas não prova a existência de uma caixa postal.

3. Modifique margin-block em .campo dentro de custom.css. O formulário permanece funcional.

Quando seguir

Você chega a todos os controles por teclado, entende a validação e confirma que a mensagem é apenas local. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

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

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

/* Capítulo 03 */
.apresentacao { line-height: 1.7; font-size: 1.1rem; }
.nota { padding: 1rem; margin-block: 2rem; width: 30rem; max-width: 100%; }

/* Capítulo 04 */

/* Capítulo 05 */
.tabela-rolavel { overflow-x: auto; }

/* Capítulo 06 */
form { max-width: 32rem; }
.campo { margin-block: 1.5rem; }