O elemento de formulário em detalhes

Em um módulo anterior, você aprendeu como usar o elemento <form>. Neste módulo, você vai aprender como um formulário funciona e quando usá-lo.

Você precisa usar um elemento <form>?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Nem sempre é necessário colocar controles de formulário em um elemento <form>. Por exemplo, você pode fornecer um elemento <select> para que os usuários escolham uma categoria de produto. Você não precisa de um elemento <form> aqui, já que não está armazenando nem processando dados no seu back-end.

No entanto, na maioria dos casos em que você armazena ou processa dados de usuários, é preciso usar o elemento <form>. Como você vai aprender neste módulo, usar um <form> oferece muita funcionalidade integrada dos navegadores que, de outra forma, você teria que criar por conta própria. Um <form> também tem muitos recursos de acessibilidade integrados por padrão. Se você quiser evitar uma atualização de página quando um usuário enviar um formulário, ainda poderá usar o elemento <form>, mas aprimore-o com JavaScript.

Como o <form> funciona?

Você aprendeu que um <form> é a melhor maneira de processar dados do usuário. Talvez você esteja se perguntando como um formulário funciona.

O <form> é um contêiner para controles de formulário interativos.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

Como funciona o envio de formulários?

Quando você envia um <form>, o navegador verifica os atributos <form>. Os dados são enviados como uma solicitação GET ou POST de acordo com o atributo method. Se nenhum atributo method estiver presente, uma solicitação GET será feita ao URL da página atual.

Como acessar e processar os dados do formulário? Os dados enviados podem ser processados pelo JavaScript no front-end, com uma solicitação GET, ou por código no back-end, com uma solicitação GET ou POST. Saiba mais sobre tipos de solicitação e transferência de dados de formulário.

Quando o formulário é enviado, o navegador faz uma solicitação ao URL que é o valor do atributo action. Além disso, o navegador verifica se o botão Enviar tem um atributo formaction. Se for esse o caso, o URL definido lá será usado.

Além disso, o navegador procura outros atributos no elemento <form>, por exemplo, para decidir se o formulário precisa ser validado (novalidate), se o preenchimento automático precisa ser usado (autocomplete="off") ou qual codificação precisa ser usada (accept-charset).

Tente criar um formulário em que os usuários possam enviar a cor favorita. Os dados precisam ser enviados como uma solicitação POST, e o URL em que eles são processados precisa ser /color.

Mostrar formulário

Uma solução possível é usar este formulário:

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

Garantir que os usuários possam enviar seu formulário

Há duas maneiras de enviar um formulário. Clique no botão Enviar ou pressione Enter ao usar qualquer controle de formulário.

Sempre use uma linguagem prática ao criar o botão Enviar. Por exemplo, Continuar para pagamento ou Salvar alterações. Isso ajuda os usuários a entender as próximas etapas do formulário.

É possível adicionar um botão Enviar de várias maneiras. Uma opção é usar um elemento <button> dentro do formulário. Desde que você não use type="button", ele vai funcionar como um botão Enviar. Outra opção é usar <input type="submit" value="Submit">.

Uma terceira opção é usar <input type="image" alt="Submit" src="submit.png"> para criar um botão gráfico Enviar. No entanto, agora que é possível criar botões gráficos com CSS, não é recomendável usar type="image".

Por fim, evite adicionar tempos limite. Dê aos usuários o tempo que eles quiserem para enviar um formulário. Os tempos limite causam perda de dados e frustram os usuários. Leia as diretrizes de tempo limite de formulário da W3C.

Permitir que os usuários enviem arquivos

Use <input type="file"> para permitir que as pessoas façam upload e enviem arquivos, se necessário.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Primeiro, adicione um elemento <input> com type="file" ao formulário. Adicione o atributo multiple se os usuários precisarem enviar vários arquivos.

Mais uma mudança é necessária para garantir que os usuários possam fazer upload de arquivos: defina o atributo enctype no formulário. O valor padrão é application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

Para garantir que os arquivos possam ser enviados, mude para multipart/form-data. Sem essa codificação, não é possível enviar arquivos com uma solicitação POST.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento de formulário

Qual valor de enctype é necessário para enviar arquivos?

multipart/form-data
🎉
multipart/form-files
Tente novamente.
form-data
Tente novamente.
form-files
Tente novamente.

É possível enviar dados do usuário sem um <form>?

Não
Tente novamente.
Sim, com JavaScript.
🎉
Sim, com o Flash.
Tente novamente.
Sim, com HTML5.
Tente novamente.

Como enviar um <form>?

Clique em um <button>.
Tente novamente.
Pressione Enter.
Tente novamente.
Clique em um <input type="image">.
Tente novamente.
Todas as respostas estão corretas.
🎉

Recursos