# 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:**

```html
<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:**

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

* **Link interno (página local):**

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

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

```html
<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:**

```html
<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:**

```html
<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.