Post

A Tag (FORM) (Contêiner de Formulário)

Postado em
Por Vagner Leite
3 min de leitura

Objetivo da Aula:

Nesta aula, você aprenderá sobre a tag <form>, que serve como um contêiner para coletar dados do usuário em uma página HTML. Vamos explorar a estrutura básica de um formulário, como usar a tag <form> e a importância do atributo action e do botão de envio.

1. O que é a Tag <form>?

Definição:

  • A tag <form> é utilizada para criar um formulário HTML que permite aos usuários inserir e enviar dados. Os dados do formulário podem ser processados por um servidor ou manipulados pelo JavaScript no lado do cliente.

Importância:

  • Formulários são fundamentais para a interação do usuário em aplicações web, permitindo o envio de informações como cadastro, login, comentários, entre outros.

2. Estrutura Básica da Tag <form>

Sintaxe:

1
2
3

<form action="URL_destino" method="GET ou POST">
  <!-- Campos do formulário vão aqui -->
</form>

Atributos Principais:

  • action: Especifica a URL para a qual os dados do formulário serão enviados após o envio.
  • method: Define o método HTTP que será usado para enviar os dados. Os valores comuns são:
    • GET: Envia os dados como parte da URL (não recomendado para dados sensíveis).
    • POST: Envia os dados no corpo da solicitação (mais seguro para dados sensíveis).

3. Exemplo Prático de um Formulário Simples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Formulário</title>
</head>
<body>
  <h1>Cadastro de Usuário</h1>
  <form action="processar.php" method="POST">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Explicação do Exemplo:

  • A tag <form> envolve todos os campos de entrada.
  • O atributo action define a URL para onde os dados serão enviados após o envio do formulário.
  • O atributo method é configurado como POST, indicando que os dados devem ser enviados no corpo da solicitação.
  • Os campos de entrada são definidos usando <input> e cada campo possui um <label> associado.

4. O Botão de Envio (<button> ou <input type="submit">)

Uso:

  • Um formulário deve ter um botão de envio para que os dados possam ser enviados para o servidor. O botão pode ser criado usando a tag <button> ou <input>.

Exemplo com <button>:

1

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

Exemplo com <input>:

1

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

Explicação:

  • O atributo type="submit" indica que o botão deve enviar o formulário quando clicado.

5. Validação do Formulário

Uso de required:

  • O atributo required pode ser adicionado a campos de entrada para garantir que o usuário preencha o campo antes de enviar o formulário.

Exemplo:

1

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

Explicação:

  • Se o campo nome não for preenchido, o formulário não será enviado e uma mensagem de erro será exibida.

6. Resumo e Conclusão

  • Recapitulando:
    • A tag <form> é essencial para coletar dados do usuário em HTML. Através dos atributos action e method, você pode configurar como e para onde os dados são enviados. O botão de envio é necessário para enviar os dados do formulário.
  • Próximos Passos:
    • Nas próximas aulas, você aprenderá sobre os diferentes tipos de campos de entrada, métodos de envio, e como processar os dados do formulário.

Exercícios Práticos:

  1. Criar um Formulário de Cadastro:
    • Crie um formulário HTML com campos para nome, e-mail e um botão de envio. Utilize a tag <form> e inclua os atributos action e method.
  2. Adicionar Validação:
    • Adicione o atributo required aos campos do formulário para garantir que eles sejam preenchidos antes do envio.
  3. Experimentar com Botões:
    • Teste o uso de <button> e <input type="submit"> para enviar o formulário. Observe as diferenças.

Esta aula forneceu uma compreensão detalhada sobre a tag <form> e sua importância na coleta de dados do usuário. Com esse conhecimento, você poderá começar a construir formulários interativos e funcionais em suas páginas web.

voltar

ninja
ninja html tags form
Esta postagem está licenciada sob CC BY 4.0 pelo autor.