Formulários em HTML: <form>

1.1 Elemento <form>

Os formulários são uma parte importante da interação do usuário com sites. Com eles, os usuários podem inserir dados, que são então enviados ao servidor para processamento. Em HTML, o elemento <form> é utilizado para criar formulários.

A tag <form> é usada para criar um formulário em uma página web. Ela funciona como um contêiner para vários elementos de formulário, como campos de texto, botões, caixas de seleção, etc. Todos os dados inseridos pelo usuário podem ser enviados para o servidor para processamento.

Exemplo de uso:

    
      <form action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Seu nome: ${userName.value}\n` + `Seu Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Enviar</button>
      </form>
    
  

Atributos da tag <form>

O atributo action especifica o URL para o qual os dados do formulário serão enviados após clicar no botão de envio. Se o atributo action não for especificado, os dados do formulário serão enviados para o URL atual.

Exemplo de uso do atributo action:

    
      <form action="https://example.com/submit">
        <!-- elementos do formulário -->
      </form>
    
  

O atributo method especifica o método HTTP que será usado para enviar os dados do formulário. Estão disponíveis dois valores: GET e POST.

1. GET: os dados do formulário são incluídos no URL da solicitação como parâmetros. Esse método é adequado para enviar pequenas quantidades de dados e não deve ser usado para enviar informações confidenciais.
2. POST: os dados do formulário são enviados no corpo da solicitação HTTP. Este método é adequado para enviar grandes volumes de dados e informações confidenciais.

Exemplo de uso do atributo method:

    
      <form action="/submit" method="post">
        <!-- elementos do formulário -->
      </form>
    
  

1.2 Métodos de envio de dados

Método GET

Método GET envia os dados do formulário como parâmetros de URL. Este método é usado por padrão, se o atributo method não for especificado.

Exemplo de uso do método GET:

    
      <form action="/search" method="get">
        <label for="query">Busca:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Pesquisar</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Você pesquisou por: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Busca:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Pesquisar</button>
      </form>
    
  

Características do método GET

• Os dados do formulário ficam visíveis no URL, tornando o método inadequado para transmissão de informações confidenciais
• Limitação no tamanho dos dados, pois o URL tem tamanho limitado
• Os dados podem ser facilmente armazenados em cache, e o link pode ser salvo no navegador

Método POST

Método POST envia os dados do formulário no corpo da solicitação HTTP. Esse método é usado para transmitir grandes volumes de dados e informações confidenciais.

Exemplo de uso do método POST:

    
      <form action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Senha:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Bem-vindo, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Senha:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Enviar</button>
      </form>
    
  

Características do método POST

• Os dados do formulário não são visíveis no URL, tornando o método adequado para transmissão de informações confidenciais
• Não há limitações no tamanho dos dados, pois eles são transmitidos no corpo da solicitação
• Os dados não são armazenados em cache e não são salvos em marcadores no navegador

1.3 Atributos adicionais

Atributo enctype

O atributo enctype é utilizado para especificar a forma de codificação dos dados do formulário ao enviar com o método POST. O valor mais utilizado é multipart/form-data, necessário para upload de arquivos.

Exemplo de uso do atributo enctype:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Upload de arquivo:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Enviar</button>
      </form>
    
  

Atributo target

O atributo target especifica onde a resposta do servidor será exibida após enviar o formulário. Valores possíveis:

• _self (padrão): na mesma janela ou aba
• _blank: em uma nova janela ou aba
• _parent: no frame pai
• _top: no frame superior (se forem usados frames)

Exemplo de uso do atributo target:

    
      <form action="/submit" method="post" target="_blank">
        <!-- elementos do formulário -->
      </form>
    
  

Atributo novalidate

O atributo novalidate desativa a validação de formulário integrada no navegador.

Exemplo de uso do atributo novalidate:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Enviar</button>
      </form>
    
  

1.4 Formas de envio de dados

O envio dos dados do formulário é feito com o botão de envio: <input type="submit"> ou <button type="submit">. Quando o usuário clica neste botão, o navegador envia os dados do formulário para o servidor usando o método e URL especificados.

Aqui estão as principais formas de envio de dados do formulário:

1. Botão de envio: essa é a maneira mais comum de enviar dados do formulário. O botão de envio pode ser criado usando o elemento <input> ou <button>.

Exemplo com <input>:

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

Exemplo com <button>:

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

2. Tecla Enter: nos campos de texto do formulário, pressionar a tecla Enter também pode acionar o envio do formulário.

3. JavaScript: o formulário pode ser enviado programaticamente usando JavaScript. Isso é útil quando é necessário realizar verificações adicionais ou outras ações antes de enviar os dados.

Exemplo de uso de JavaScript para enviar formulário:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Senha:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Enviar</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Autenticação realizada com sucesso!\n" + "\n" + `Bem-vindo, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Usuário:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Senha:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Enviar</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }