4.5 Links e formulários

📘 Introdução ao HTML: Links e Formulários

Os links e formulários são partes fundamentais da navegação e da interação com páginas na web. Os links conectam páginas e conteúdos; os formulários permitem a coleta de informações do usuário.

---

🔗 LINKS – A Tag <a>

A tag <a> é usada para criar hiperligações (links) que levam o usuário para outra página, documento ou até para uma parte específica da mesma página.

📌 Sintaxe básica:

htmlCopiarEditar<a href="https://www.exemplo.com">Visite nosso site</a>

Atributo	Função
href	Define o endereço (URL ou caminho) para onde o link aponta
target	Define onde o link será aberto (ex: nova aba)

🔧 Exemplos úteis:

• Abrir em nova aba:

htmlCopiarEditar<a href="https://google.com" target="_blank">Abrir Google</a>

• Link interno (página local):

htmlCopiarEditar<a href="contato.html">Página de Contato</a>

• Link para âncora (dentro da mesma página):

htmlCopiarEditar<a href="#topo">Voltar ao topo</a>

---

📝 FORMULÁRIOS – A Tag <form>

O formulário permite que o usuário insira dados em campos interativos. Ele usa a tag <form> como contêiner principal e campos como <input>, <textarea>, <select>, etc.

📌 Estrutura básica:

htmlCopiarEditar<form action="/enviar.php" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <input type="submit" value="Enviar">
</form>

Atributo	Função
action	URL para onde os dados serão enviados
method	Método de envio: get (visível na URL) ou post (oculto)

---

✏️ Campos Comuns em Formulários

Campo	Tag	Exemplo
Texto curto	<input type="text">	Nome, e-mail
Senha	<input type="password">	Campo oculto
Caixa de texto	<textarea>	Comentários
Botão de envio	<input type="submit">	Enviar dados
Caixa de seleção	<input type="checkbox">	Aceitar termos
Botão de opção	<input type="radio">	Gênero, opções únicas
Lista suspensa	<select> + <option>	Escolher país, categoria

📌 Exemplo com vários campos:

htmlCopiarEditar<form>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="mensagem">Mensagem:</label><br>
  <textarea id="mensagem" name="mensagem"></textarea><br><br>

  <input type="submit" value="Enviar">
</form>

✅ Conclusão

• A tag <a> cria links e pode apontar para outras páginas, arquivos, âncoras ou URLs externas.

• A tag <form> permite a interação do usuário, capturando dados com diversos campos como input, textarea, select, entre outros.

Esses elementos formam a base da navegação e da comunicação com servidores em páginas web.