📝Tags de Formulário parte 2

A tag <form> cria formulários para coletar e enviar dados. Atributos incluem action (URL de envio), method (GET ou POST), enctype (codificação de dados), e target (onde exibir a resposta).

Introdução

A tag <form> é um dos elementos mais importantes em HTML para a coleta e envio de dados do usuário. Ela cria um formulário que pode conter diferentes tipos de campos de entrada (como texto, senha, e-mail), botões e outros elementos interativos.

Atributos Comuns da Tag <form>

1. action:

   • Define a URL para onde os dados do formulário serão enviados.

   • Exemplo:

     <form action="/submit">

2. method:

   • Especifica o método HTTP a ser usado ao enviar os dados do formulário. Os valores comuns são GET e POST.

   • GET anexa os dados do formulário à URL. Útil para consultas que não alteram o estado do servidor.

   • POST envia os dados do formulário no corpo da solicitação. É mais seguro e usado para alterar o estado do servidor, como em registros de usuários.

   • Exemplo:

     <form action="/submit" method="post">

3. target:

   • Especifica onde exibir a resposta que é recebida depois que o formulário é enviado. Valores comuns incluem _self (padrão), _blank (abre em nova aba), _parent, e _top.

   • Exemplo:

     <form action="/submit" method="post" target="_blank">

Estrutura Básica de um Formulário

<form action="/submit" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
  
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha">
  
  <input type="submit" value="Enviar">
</form>

Explicação dos Elementos

• <label>: Associada a um campo de entrada, fornece um rótulo descritivo. O atributo for vincula o rótulo ao campo de entrada pelo id.

• <input>: Usado para diversos tipos de campos de entrada, como texto, e-mail e senha. Cada campo possui um atributo name que identifica os dados quando enviados.

• <input type="submit">: Cria um botão que envia os dados do formulário ao servidor.

Mais tags de campos do formulário

<input type="submit">

O <input type="submit"> cria um botão que, quando clicado, envia o formulário ao servidor para ser processado. Ele é frequentemente usado em conjunto com a tag <form>.

Exemplo:

<form action="/submit" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  
  <input type="submit" value="Enviar">
</form>

Neste exemplo, ao clicar no botão "Enviar", os dados do formulário são enviados para a URL especificada no atributo action.

Tag <select> e <option>

A tag <select> cria uma lista suspensa (dropdown) que permite ao usuário escolher uma opção entre várias. Cada opção dentro da lista é definida pela tag <option>.

Exemplo:

<form action="/submit" method="post">
  <label for="frutas">Escolha uma fruta:</label>
  <select id="frutas" name="frutas">
    <option value="maçã">Maçã</option>
    <option value="banana">Banana</option>
    <option value="laranja">Laranja</option>
  </select>
  
  <input type="submit" value="Enviar">
</form>

Neste exemplo, a lista suspensa permite ao usuário selecionar uma fruta.

Tag <button>

A tag <button> cria um botão clicável. Diferente do <input type="submit">, o <button> pode conter conteúdo HTML, como texto ou imagens, e pode ser configurado para enviar um formulário, executar um script ou realizar outras ações.

Exemplo:

<form action="/submit" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  
  <button type="submit">Enviar</button>
</form>

Neste exemplo, o botão "Enviar" dentro do formulário funciona de forma similar ao <input type="submit">, enviando os dados do formulário.