Usar formulários para coletar dados de usuários

Aprenda o básico sobre como usar um formulário na Web com esta introdução ao elemento form.

Imagine que você quer perguntar às pessoas no seu site sobre o animal favorito delas. Primeiro, você precisa de uma maneira de coletar os dados.

Em HTML, é possível criar isso usando o elemento de formulário (<form>), um <input> com um <label> e um <button> de envio.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

O que é um elemento de formulário?

O elemento de formulário consiste na tag de início <form>, atributos opcionais definidos na tag de início e uma tag de fim </form>.

Entre as tags de início e fim, você pode incluir elementos de formulário como <input> e <textarea> para diferentes tipos de entrada do usuário. Você vai saber mais sobre elementos de formulário no próximo módulo.

Onde os dados são tratados?

Quando um formulário é enviado (por exemplo, quando o usuário clica no botão Enviar), o navegador faz uma solicitação. Um script pode responder a essa solicitação e processar os dados.

Por padrão, a solicitação é feita à página em que o formulário é mostrado.

Suponha que você queira um script executado em https://web.dev para processar os dados do formulário. Como você faria isso? Teste no CodePen.

      <form action="https://example.com/animals"></form>

O exemplo anterior faz uma solicitação para https://example.com/animals. Um script no back-end example.com pode processar solicitações para /animals e dados do formulário.

Como os dados são transferidos?

Por padrão, os dados do formulário são enviados como uma solicitação GET, com os dados enviados anexados ao URL. Se um usuário enviar "frog" no exemplo anterior, o navegador fará uma solicitação para o seguinte URL:

https://example.com/animals?animal=frog

Nesse caso, você pode acessar os dados no front-end ou no back-end buscando as informações do URL.

Se quiser, instrua o formulário a usar uma solicitação POST mudando o atributo do método.

<form method="post">
...
</form>

Usando POST, os dados são incluídos no corpo da solicitação.

Os dados não ficam visíveis no URL e só podem ser acessados por um script de front-end ou back-end.

Qual método você deve usar?

Há casos de uso para os dois métodos.

Para formulários que processam dados sensíveis, use o método POST. Os dados são criptografados (se você usa HTTPS) e só podem ser acessados pelo script de back-end que processa a solicitação. Os dados não estão visíveis no URL. Um exemplo comum é um formulário de login.

Se os dados puderem ser compartilhados, use o método GET. Em seguida, os dados são adicionados ao histórico do navegador, já que estão incluídos no URL. Os formulários de pesquisa costumam usar isso. Isso permite marcar uma página de resultados da pesquisa como favorita.

Agora que você já conhece o elemento de formulário, é hora de aprender sobre os campos de formulário para tornar seus formulários interativos.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento de formulário

Recursos

O elemento <form>.