Resumo HTML – Formulários

1. O que é um formulário?

O elemento <form> é usado para coletar dados do usuário. Ele pode conter campos de texto, botões, caixas de seleção, listas e muito mais.

<form action="processa.php" method="post">
    <p>   <input [type:-- name:-- id:--] >   </p > 
    < p >  <input type="submit" value= "Enviar">

    </form>
    

      Todo input deve ter um atributo name único para que os dados sejam enviados corretamente. 
 
      O atributo id é opcional, mas útil para associar rótulos aos campos.
    

• action: define para onde os dados serão enviados.
• method: pode ser get ou post.

2. Campos básicos

<input type="text">
<input type="email">
<input type="password">
<input type="number">

3. Seleções e opções

<select>...</select>
<input type="checkbox">
<input type="radio">

4. Áreas de texto

<textarea name="mensagem"></textarea>

5. Botões

<button type="submit">Enviar</button>
<button type="reset">Limpar</button>

6. Atributos úteis em formulários

• required: campo obrigatório
• placeholder: dica dentro do campo
• value: valor padrão
• readonly: somente leitura
• disabled: desativado

<input type="text" placeholder="Digite seu nome" required>

7. Exemplo completo

8. Principais tags e atributos em formulários

📌 Tags HTML mais usadas:

• <form> – container do formulário
• <input> – campos de texto, email, senha, número, etc.
• <label> – rótulo associado a um campo
• <textarea> – área de texto maior (comentários, mensagens)
• <select> – lista suspensa (dropdown)
• <option> – opção dentro do select
• <button> – botões de ação (enviar, limpar, etc.)
• <fieldset> – agrupa campos relacionados (opcional)
• <legend> – título para o <fieldset>

🔧 Atributos (etiquetas) importantes:

• type – tipo de campo (text, email, password, etc.)
• name – nome do campo (usado no envio)
• id – identificador único (usado com <label for="...">)
• placeholder – texto de dica no campo
• value – valor padrão
• required – torna o campo obrigatório
• readonly – impede edição (somente leitura)
• disabled – desativa o campo
• checked – marca checkbox ou radio como ativo por padrão
• selected – define uma <option> como padrão no <select>
• maxlength – número máximo de caracteres permitidos
• min / max – valores mínimos e máximos para números ou datas

✅ Exemplo com várias tags e atributos:

<form action="#" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required placeholder="Digite seu nome">

  <label for="genero">Gênero:</label>
  <select id="genero" name="genero">
    <option value="masculino">Masculino</option>
    <option value="feminino" selected>Feminino</option>
  </select>

  <button type="submit">Enviar</button>
</form>

10. Diferença entre GET e POST em formulários

O atributo method define como os dados do formulário serão enviados ao servidor.

📌 method="get"

Os dados são enviados na URL. É útil para buscas ou filtros, mas não recomendado para senhas ou dados sensíveis.

<form action="pagina.php" method="get">
  <input name="busca">
  <button type="submit">Buscar</button>
</form>

URL gerada: pagina.php?busca=valor

📌 method="post"

Os dados são enviados de forma invisível na URL, diretamente no corpo da requisição. É ideal para senhas, cadastros e envios de dados.

<form action="pagina.php" method="post">
  <input name="nome">
  <textarea name="mensagem"></textarea>
  <button type="submit">Enviar</button>
</form>

Dados enviados no corpo da requisição, sem aparecer na URL.

✅ Resumo

• GET: visível na URL, ideal para pesquisas, dados simples.
• POST: invisível, mais seguro, ideal para formulários reais.

13. Para que serve o atributo autocomplete

O atributo autocomplete controla se o navegador pode ou não preencher automaticamente os campos de um formulário com informações que o usuário já digitou antes.

Isso pode incluir dados como:

• Nome completo
• Email
• Telefone
• Endereço
• Senha

✅ Vantagens:

• Facilita e acelera o preenchimento dos formulários
• Melhora a experiência do usuário
• Evita digitação repetitiva

🔐 Quando desativar:

Em formulários sensíveis, como logins ou códigos de verificação, você pode usar:

<input type="password" autocomplete="off">

Também pode aplicar no formulário inteiro:

<form autocomplete="off">...</form>

14. Agrupando campos com <fieldset> e <legend>

A tag <fieldset> é usada para agrupar visualmente e semanticamente campos relacionados dentro de um formulário.

Já a tag <legend> serve como um título descritivo para esse grupo.

📌 Exemplo prático:

<fieldset>
  <legend>Informações Pessoais</legend>
  <label>Nome:</label>
  <input type="text" name="nome">
</fieldset>