Usar formulários para coletar dados de usuários

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

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

Como fazer isso com HTML?

Em HTML, é possível criar esse elemento 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>, atributos opcionais definidos na tag inicial e uma tag final </form>.

Entre as tags de início e término, você pode incluir elementos de formulário como <input> e <textarea>. para diferentes tipos de entrada do usuário. Você vai aprender 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 na página em que o formulário é exibido.

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

<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 os 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 "sapo" no exemplo acima, o navegador faz uma solicitação ao seguinte URL:

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

Nesse caso, você pode acessar os dados no front-end ou back-end obtendo os dados do URL.

Se quiser, você pode instruir o formulário a usar uma solicitação POST mudando 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 usando 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ê 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, use o método GET. Dessa forma, os dados serão adicionados ao histórico do navegador conforme são incluídos no URL. Os formulários de pesquisa geralmente usam esse recurso. Dessa forma, você pode adicionar uma página de resultados de pesquisa aos favoritos.

Agora que você aprendeu sobre o próprio elemento de formulário, é hora de aprender sobre campos de formulário para tornar os formulários interativos.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento de formulário

Recursos

O elemento <form>.