Programming and Data Persistence

UA3 — Trabalhando com links e formulários

A tag âncora <a> interliga páginas HTML via links relativos, absolutos ou de e-mail, enquanto <form> e <input> constroem formulários que enviam dados do usuário a um servidor.

Links e âncoras em HTML

HTML permite que páginas sejam interligadas por meio dos chamados links, definidos pela tag âncora <a>. O endereço para o qual o link aponta é informado no atributo href:

<a href="#">Eu sou um link</a>

Por padrão, navegadores exibem links de texto sublinhados e na cor azul, salvo estilização via CSS. Quando href recebe o valor #, ao clicar nada acontece; se o valor for vazio, a página é recarregada.

Links relativos

Links relativos apontam para arquivos locais — no mesmo dispositivo que o arquivo HTML. O valor do href deve ser exatamente o nome do arquivo, incluindo a extensão:

<!-- pagina1.html -->
<h1>Eu sou a página 1</h1>
<a href="pagina2.html">Link para a página 2</a>

Para acessar arquivos em subdiretórios, inclua o caminho relativo (html/pagina2.html). Para subir um nível, use ../ antes do nome.

Links absolutos

Links absolutos apontam para endereços externos. O href deve conter o protocolo (http ou https) seguido do endereço:

<a href="https://www.google.com.br">Google</a>

Links para e-mails

Use a palavra mailto: seguida do endereço de e-mail. O navegador abrirá o programa de e-mail padrão do sistema:

<a href="mailto:contato@exemplo.com.br">Contato por e-mail</a>

Links em imagens

Links e imagens podem ser combinados — basta inserir a tag <img> dentro da âncora <a> no lugar do texto:

<a href="#">
  <img src="imagem.png">
</a>

Atributo target

O atributo target define o contexto de navegação em que o link será aberto:

Formulários HTML

Formulários permitem que usuários interajam com sistemas web, estabelecendo conexão entre cliente e servidor. Os dados preenchidos são enviados para serem processados por linguagens de programação back-end.

Tag <form>

Formulários são criados com a tag <form>, que aceita os seguintes atributos principais:

O enctype pode receber: application/x-www-form-urlencoded (padrão), multipart/form-data (envio de arquivos) ou multipart/form-data (HTML5).

<form action="processa_formulario.php" method="post" name="meu_formulario">
  [...]
</form>

Métodos GET e POST

Tag <input> e seus tipos

A principal tag utilizada em formulários é <input>, que aceita os atributos:

• name — nome do campo, usado para processamento back-end
• value — valor padrão exibido no campo
• placeholder — texto de dica exibido dentro da caixa (desaparece ao clicar)
• type — tipo do campo

Os tipos disponíveis para <input>:

Tipos text, email e password

Os três tipos são parecidos em aparência. A diferença é que email valida o formato do endereço (exige @) e password oculta os caracteres digitados:

<form action="#" method="post" name="formulario">
  <input type="text" name="texto" placeholder="Digite um nome">
  <input type="email" name="email" placeholder="Digite um e-mail">
  <input type="password" name="senha" placeholder="Digite a senha">
</form>

Tipos checkbox e radio

checkbox permite múltiplas seleções; radio permite apenas uma escolha por grupo. Para serem tratados como grupo, os campos devem ter o mesmo valor no atributo name:

<form action="#" method="post" name="formulario">
  <h1>Checkbox</h1>
  <p><input type="checkbox" name="opcao" value="1"><label>1</label></p>
  <p><input type="checkbox" name="opcao" value="2"><label>2</label></p>

  <h1>Radio</h1>
  <p><input type="radio" name="escolha" value="1"><label>1</label></p>
  <p><input type="radio" name="escolha" value="2"><label>2</label></p>
</form>

Tipos hidden e file

hidden armazena informações que não devem ser exibidas ao usuário, como códigos de identificação. file exibe um botão para seleção de arquivo:

<input type="file" name="arquivo">
<input type="hidden" value="codigo_secreto_123">

Tipos button e submit

Ambos executam ações ao serem clicados. O submit é o responsável pelo envio do formulário — ao clicar, a página é redirecionada para o endereço informado em action. O texto do botão é definido pelo atributo value:

<input type="button" value="Botão comum">
<input type="submit" value="Enviar">

Tag <select>

A tag <select> cria uma lista de opções para o usuário escolher. Cada opção é definida pela tag <option>, que recebe um value (valor enviado) e um texto visível:

<form action="#" method="post" name="formulario">
  <select name="selecione">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
  </select>
</form>

Tag <textarea>

<textarea> é similar ao <input type="text">, mas permite que o usuário redimensione e preencha áreas de texto maiores. O tamanho padrão é controlado pelos atributos cols (colunas) e rows (linhas):

<textarea cols="50" rows="10"></textarea>

Práticas Modernas

<label> associado ao <input> com for/id O material mostra <label> seguido do texto sem associação formal. A prática correta é vincular rótulo e campo, melhorando acessibilidade e área de clique:

<label for="nome">Nome</label>
<input type="text" id="nome" name="nome">

Validação nativa do HTML5 Antes de usar JavaScript para validar campos, aproveite os atributos nativos — o navegador os valida automaticamente antes de enviar:

<input type="email" required>
<input type="text" minlength="3" maxlength="50" required>
<input type="number" min="1" max="100">

fetch em vez de action para envio assíncrono A forma moderna de enviar formulários sem recarregar a página usa a API fetch e lê os dados via FormData:

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const dados = new FormData(e.target);
  const resposta = await fetch('/api/contato', {
    method: 'POST',
    body: dados,
  });
  const resultado = await resposta.json();
});

<button type="submit"> em vez de <input type="submit"> <button> aceita HTML interno (ícones, formatação) e é mais flexível:

<button type="submit">Enviar formulário</button>

target="_blank" com rel="noopener noreferrer" Abrir links em nova aba sem esse atributo expõe a página original a ataques via window.opener. Sempre combine:

<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Link externo</a>

Referências bibliográficas desta UA

• MARIANO, D. C. B. Programação Front End I. Porto Alegre: SAGAH.
• MDN Web Docs. <form>: The Form element. Mozilla Developer Network, 2019.
• SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.