Aula 78 - Tag Form

Introdução

A tag <form> é utilizada para criar formulários em páginas HTML.

Ela funciona como um contêiner que agrupa campos de entrada, permitindo que dados sejam coletados dos usuários.

📌 Todo formulário HTML deve estar dentro de uma tag <form>.

Estrutura Básica

<form>

  Campos do formulário

</form>

Dentro do formulário podemos inserir campos como textos, senhas, opções, botões e arquivos.

Exemplo Simples

<form>


<label>
Nome:
</label>


<input type="text">



<button>
Enviar
</button>


</form>

Atributo action

Define o endereço que receberá os dados enviados pelo formulário.

<form action="cadastro.php">

</form>

Valor	Função
cadastro.php	Arquivo responsável pelo processamento.

Atributo method

Define o método utilizado para enviar os dados.

Método	Descrição
GET	Dados aparecem na URL.
POST	Dados enviados no corpo da requisição.

<form method="post">

</form>

Atributo enctype

Define como os dados serão enviados.

<form 
enctype="multipart/form-data">

</form>

Muito utilizado quando existe envio de arquivos.

Atributo autocomplete

Controla o preenchimento automático dos campos.

<form autocomplete="on">

</form>

Valor	Função
on	Permite sugestões.
off	Desativa sugestões.

Atributo novalidate

Remove a validação automática do navegador.

<form novalidate>

</form>

Exemplo Completo

<form 
action="salvar.php"
method="post"
autocomplete="on">


<label>
Nome:
</label>


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



<label>
Email:
</label>


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



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


</form>

Exemplo Funcionando

Principais Atributos

Atributo	Função
action	Destino dos dados.
method	Método de envio.
enctype	Formato dos dados.
autocomplete	Preenchimento automático.
novalidate	Desativa validação.

Boas Práticas

Sempre utilizar labels.
Definir método correto.
Validar informações recebidas.
Organizar campos por grupos.
Garantir acessibilidade.

Erros Comuns

Erro	Problema
Sem action	Dados não possuem destino.
Usar GET para senhas	Informações expostas na URL.
Campos sem name	Dados podem não ser enviados.

⚠️ A tag <form> apenas cria a estrutura. O processamento dos dados depende de tecnologias como PHP, Java, Node.js ou outras linguagens.

Resumo Final

Elemento	Descrição
<form>	Cria formulário.
action	Destino dos dados.
method	Forma de envio.

📌 A tag <form> é a base para criar páginas interativas e sistemas Web completos.

📄 Tag <form>