Formulários e Marcação extra em HTML

Formulários HTML são usados para coletar dados dos usuários. São essenciais em funcionalidades como cadastros, buscas, upload de arquivos, entre outros. Além disso, o HTML oferece diversas tags de marcação extra que melhoram a estrutura e a semântica do documento.

1. Criando Formulários

<form action="/destino" method="post">
  <!-- controles do formulário aqui -->
</form>

<form action="/destino" method="post">
  <!-- controles do formulário aqui -->
</form>

action: URL que receberá os dados
method: get (envia via URL) ou post (envia via corpo da requisição)

2. Tipos de Controles de Formulário

Texto

<input type="text" name="nome" maxlength="30">

<input type="text" name="nome" maxlength="30">

Senha

<input type="password" name="senha">

<input type="password" name="senha">

Área de texto

<textarea name="comentario" rows="4" cols="20"></textarea>

<textarea name="comentario" rows="4" cols="20"></textarea>

Botões de opção (radio)

<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Feminino

<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Feminino

Caixas de seleção (checkbox)

<input type="checkbox" name="interesse" value="html"> HTML
<input type="checkbox" name="interesse" value="css"> CSS

<input type="checkbox" name="interesse" value="html"> HTML
<input type="checkbox" name="interesse" value="css"> CSS

Listas suspensas

<select name="pais">
  <option value="br">Brasil</option>
  <option value="us">Estados Unidos</option>
</select>

<select name="pais">
  <option value="br">Brasil</option>
  <option value="us">Estados Unidos</option>
</select>

Lista múltipla

<select name="instrumentos" multiple size="3">
  <option value="guitarra">Guitarra</option>
  <option value="bateria">Bateria</option>
</select>

<select name="instrumentos" multiple size="3">
  <option value="guitarra">Guitarra</option>
  <option value="bateria">Bateria</option>
</select>

Upload de arquivo

<input type="file" name="foto">

<input type="file" name="foto">

Botão de envio

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

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

Botão com imagem

<input type="image" src="enviar.jpg" width="100" height="30">

<input type="image" src="enviar.jpg" width="100" height="30">

Campo oculto

<input type="hidden" name="id_usuario" value="123">

<input type="hidden" name="id_usuario" value="123">

Botão personalizado

<button><img src="add.png"> Adicionar</button>

<button><img src="add.png"> Adicionar</button>

3. Rótulos (Labels)

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Permite associação de texto descritivo com o campo correspondente.

4. Agrupamento com `<fieldset>` e `<legend>`

<fieldset>
  <legend>Dados de contato</legend>
  <label>Email:</label><input type="text" name="email">
</fieldset>

<fieldset>
  <legend>Dados de contato</legend>
  <label>Email:</label><input type="text" name="email">
</fieldset>

5. Validação HTML5

required: campo obrigatório
type="email", type="url", type="date": valida automaticamente

<input type="email" name="email" required>

<input type="email" name="email" required>

6. Tipos HTML5

<input type="date" name="nascimento">
<input type="email" name="contato">
<input type="url" name="site">
<input type="search" name="busca" placeholder="Digite...">

<input type="date" name="nascimento">
<input type="email" name="contato">
<input type="url" name="site">
<input type="search" name="busca" placeholder="Digite...">

7. Marcação Extra

Comentários

<!-- Este é um comentário -->

<!-- Este é um comentário -->

Atributos globais: `id` e `class`

<p id="destaque" class="importante">Texto</p>

<p id="destaque" class="importante">Texto</p>

Agrupamento de blocos e linha

Bloco

<div id="cabecalho">
  <!-- vários elementos -->
</div>

<div id="cabecalho">
  <!-- vários elementos -->
</div>

Inline

<p>Visite o <span class="destaque">nosso site</span> agora!</p>

<p>Visite o <span class="destaque">nosso site</span> agora!</p>

Iframe

<iframe src="https://site.com" width="400" height="300"></iframe>

<iframe src="https://site.com" width="400" height="300"></iframe>

DOCTYPE

<!DOCTYPE html>

<!DOCTYPE html>

Caracteres especiais

&lt; &gt; &amp; &copy;

&lt; &gt; &amp; &copy;

Editar esta página