Usar formulários para coletar dados de usuários

Aprenda as noções básicas de uso de formulários na Web com esta introdução ao elemento de formulário.

Imagine que você queira perguntar às pessoas no seu site sobre os animais favoritos delas. Para começar, você precisa de uma maneira de coletar os dados.

Como se faz isso com HTML?

Em HTML, você pode criar isso usando o elemento de formulário (<form>), um <input> com um <label> e um <button> de envio.

O que é um elemento de formulário?

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

O elemento do formulário consiste na tag inicial <form>, nos atributos opcionais definidos na tag inicial e em uma tag final </form>.

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

Onde os dados são processados?

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 para a página em que o formulário é mostrado.

Digamos que você queira que um script em execução em https://web.dev processe os dados do formulário. Como você faria isso? Faça um teste!

Alternar resposta

É possível selecionar o local do script usando o atributo action.

<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 processar 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 anexados ao URL. Se um usuário enviar "sapo" no exemplo acima, 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 obtendo os dados do URL.

Se quiser, você pode instruir o formulário a usar uma solicitação POST alterando o atributo do método.

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

Ao usar 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 a partir de um script de front-end ou back-end.

Qual método 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ê usar HTTPS) e só podem ser acessados pelo script de back-end que processa a solicitação. Os dados não ficam visíveis no URL. Um exemplo comum é um formulário de login.

Se os dados forem compartilháveis, você poderá usar o método GET. Dessa forma, os dados são adicionados ao histórico do navegador à medida que são incluídos no URL. Os formulários de pesquisa geralmente usam isso. Dessa forma, você pode adicionar uma página de resultados da pesquisa aos favoritos.

Agora que você aprendeu sobre 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

Qual é a aparência da tag inicial do elemento do formulário?

</form>
Quase, essa é a tag final do elemento <form>.
<form-container>
Tente de novo.
<form>
🎉
<form-element>
Tente de novo.

Qual atributo você pode usar para definir onde o <form> é processado?

where
Tente de novo.
action
Sim, o atributo action define onde o <form> é processado.
href
Tente de novo.
url
Tente de novo.

Qual é o método de solicitação padrão?

GET
🎉
POST
Tente de novo.

Recursos

O elemento <form>.