Estrutura e formulario

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/05-estrutura-formulario/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Reconhecer as regiões da página.
• Validar campos e conferir uma simulação sem envio.

Estrutura da página

header identifica o site. nav guarda o menu. main é único e traz o conteúdo desta página. footer fecha com crédito e aviso de estudo. Um link “Saltar para o conteúdo” no topo ajuda teclado e leitor de tela.

Pare e experimente. Copie o atalho inicial e o main da referência. Mude só o href para #ausente, preveja a falha, recarregue e use Tab e Enter. Confira e devolva #conteudo.

Formulário demonstrativo

O formulário deste capítulo não envia dados. action="#" e method="get" não impedem um pedido. O apoio pronto simulacao.js cancela o envio depois da validação; sem ele, o botão fica desativado. Você estuda a marcação, sem precisar escrever JavaScript. Cada controle tem label ligado pelo for e pelo id.

<form id="simulacao">
  <p>
    <label for="nome">Nome</label>
    <input id="nome" name="nome" type="text" autocomplete="off" required>
  </p>
  <p>
    <label for="mensagem">Mensagem</label>
    <textarea id="mensagem" name="mensagem" rows="4" required></textarea>
  </p>
  <p>
    <button type="submit" disabled>Conferir (simulação)</button>
  </p>
</form>
<p id="retorno" role="status"></p>
<script src="simulacao.js" defer></script>

Não peça CPF, cartão nem senha real. Os nomes da Oficina da Lia são inventados.

O exemplo completo está em 05-estrutura-formulario. Abra as três páginas, tabule pelo menu, valide o formulário e confira o retorno local. O endereço não deve ganhar os valores dos campos.

Pare e experimente. Copie o formulário de referência para a sua cópia. Primeiro deixe Nome vazio: preveja o bloqueio, clique e confira. Depois use Lia e uma mensagem inventada. Confira o retorno local e o endereço sem dados dos campos.

Atividades

1. Para onde aponta o atalho inicial?
2. Por que action=”#” não basta?
3. Como associar um rótulo?
4. O teste vazio deve enviar?

Respostas comentadas

1. Para #conteudo, id do main que recebe foco.
2. Ele permite um pedido GET; o apoio pronto cancela o envio após a validação.
3. O for do label deve corresponder ao id do campo.
4. Não. required impede a simulação; use depois apenas dados fictícios.

O arquivo completo

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

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}