Formulários

A Oficina do Farol recebe pedidos de visita. Neste capítulo você marca o formulário de contato: campos, rótulos e uma conferência local que mantém a página aberta. O exemplo está em exemplos/09-formularios/.

Não use nome, telefone ou e-mail reais. Os testes usam a visitante fictícia Lia Mendes e o endereço lia@example.invalid.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Envolver os campos com form e validar sem enviar dados.
• Ligar cada label ao campo com for e id.
• Usar texto, telefone, e-mail, número, data, rádio, caixa e lista.
• Pedir campo obrigatório e um botão de envio.
• Reconhecer o campo oculto sem fingir um servidor.

O formulário tem um destino local

form agrupa os controles. action diz para onde o navegador vai ao enviar. method="get" coloca os valores na barra de endereço.

<form id="simulacao">
  <!-- campos aqui -->
  <button type="submit">Enviar pedido fictício</button>
</form>

GET pode levar dados na URL e iniciar um pedido ao servidor, inclusive em 127.0.0.1. Neste exercício o envio é cancelado. Não há PHP, e-mail ou armazenamento.

O arquivo de apoio simulacao.js, já entregue na pasta, cancela o envio e mostra uma mensagem na mesma página. O capítulo 19 explica eventos. obrigado.html é apenas uma página ilustrativa; não confirma recebimento de pedido.

Pare e experimente. Abra exemplos/09-formularios/contato.html. Preencha o nome com Lia e envie. Preveja: a página deve permanecer aberta e mostrar a mensagem de conferência, sem dados na barra. Recarregue e confira.

Erro comum: apontar action para um endereço de e-mail ou para um site desconhecido. O exercício deixa de ser local e pede dado que você não deve publicar.

Rótulo e campo andam juntos

label é o nome visível do campo. O atributo for precisa ser igual ao id do controle. Clicar no texto coloca o cursor no campo.

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

name identifica o valor se um envio for habilitado no futuro. Aqui nada é enviado.

id e for são para a pessoa e para o leitor de tela. Se um for nome e o outro for Nome, o clique no rótulo não funciona. Maiúscula conta.

Pare e experimente. Troque só o texto do rótulo para Visitante da oficina. Preveja: o clique ainda deve focar o mesmo campo. Recarregue e confira.

Erro comum: usar placeholder no lugar de label. O placeholder some quando a pessoa digita. Pode existir como dica extra, nunca como único nome.

Tipos de uma linha

input muda o teclado e a checagem conforme o type.

<label for="telefone">Telefone fictício</label>
<input type="tel" id="telefone" name="telefone">

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

<label for="pessoas">Quantas pessoas</label>
<input type="number" id="pessoas" name="pessoas" min="1" max="8" value="1">

<label for="data">Data desejada</label>
<input type="date" id="data" name="data">

text é uma linha genérica. tel sugere teclado numérico no telefone. email pede um @; não prova que a caixa existe.

number aceita um número. min e max limitam a faixa. date abre um calendário em muitos navegadores; a aparência muda de aparelho para aparelho.

Use valores de mentira. Telefone (81) 90000-0000 e e-mail lia@example.invalid bastam.

Pare e experimente. Digite texto-sem-arroba no e-mail e clique em enviar. Preveja o bloqueio do navegador. Depois use lia@example.invalid e confira.

Erro comum: achar que type="email" cria uma conta. Ele só olha o formato.

Escolha, texto longo e lista

Rádio é uma escolha entre opções do mesmo grupo. Todas compartilham o name. Cada uma tem um value diferente.

<fieldset>
  <legend>Turno</legend>
  <label><input type="radio" name="turno" value="manha" checked> Manhã</label>
  <label><input type="radio" name="turno" value="tarde"> Tarde</label>
</fieldset>

<label>
  <input type="checkbox" name="boletim" value="sim">
  Quero o boletim fictício
</label>

<label for="oficina">Oficina</label>
<select id="oficina" name="oficina">
  <option value="ceramica">Cerâmica no Alto da Sé</option>
  <option value="xilo">Xilogravura</option>
</select>

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="4"></textarea>

checked já marca uma opção. Caixa (checkbox) liga ou desliga; pode haver várias. select é uma lista quando as opções são conhecidas. textarea é texto em várias linhas.

fieldset e legend nomeiam o grupo. Quem usa leitor de tela ouve “Turno” antes das opções.

Pare e experimente. Marque Tarde, escolha Xilogravura e envie. Preveja que apenas as escolhas visíveis mudam; a URL fica igual porque o envio é cancelado. Recarregue e confira.

Erro comum: rádios com name diferentes. O navegador trata cada um como pergunta separada e deixa marcar os dois.

Obrigatório, botão e campo oculto

required impede o envio vazio. A mensagem é a do navegador. Não é um sistema de reservas.

<button type="submit">Enviar pedido fictício</button>

Declare type="submit". Um button sem tipo, dentro do form, normalmente é de envio.

Existe input type="hidden". Ele não aparece na tela. Sites com processamento remoto usam esse campo para mandar um valor fixo ao servidor.

<input type="hidden" name="origem" value="contato-local">

Neste volume não há processamento remoto. O hidden, se existir, não é enviado porque a simulação cancela o envio. Você pode omiti-lo. Mostramos o código para você reconhecer a tag depois, não para ligar e-mail nem serviço pago.

A captura mostra o início do formulário de referência. Compare com o que você abriu.

Atividades

1. O que method="get" faz de visível depois do envio?
2. Por que for e id precisam ser iguais, inclusive em maiúsculas?
3. Qual a diferença entre rádio e caixa neste formulário?
4. Por que este volume não aponta o action para um arquivo PHP?

Respostas comentadas

1. Em um GET habilitado, os pares name=valor aparecem na barra. Nesta simulação o envio é cancelado e a URL permanece igual.
2. É essa igualdade que liga o clique no texto ao campo. nome e Nome são ids diferentes.
3. Rádio escolhe um turno. Caixa liga o boletim sem desligar o turno.
4. Não há programa no servidor para receber o pedido. PHP é outro curso. A simulação valida a marcação sem fingir um atendimento real.

Referências

• form
• label
• input
• textarea
• select

O arquivo completo

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

simulacao.js

const f=document.querySelector("#simulacao");f.querySelector("button[type=submit]").disabled=false;f.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Pedido fictício conferido. Nada foi enviado ou guardado.";});