O elemento do 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>?

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, porque não está armazenando nem processando dados no back-end.

No entanto, na maioria dos casos, ao armazenar ou processar dados de usuários, use o elemento <form>. Como você vai aprender neste módulo, o uso de um <form> oferece muitas funcionalidades integradas dos navegadores que 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 recarga de página quando um usuário enviar um formulário, ainda poderá usar o elemento <form>, mas melhore-o com JavaScript.

Como o <form> funciona?

Você aprendeu que um <form> é a melhor maneira de gerenciar dados do usuário. Você pode estar 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 para o URL da página atual.

Como você pode acessar e processar os dados do formulário? Os dados enviados podem ser processados pelo JavaScript no front-end usando uma solicitação GET ou pelo código no back-end usando 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 para o URL que é o valor do atributo action. Além disso, o navegador verifica se o botão Enviar tem um atributo formaction. Nesse caso, o URL definido 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 deles. Os dados precisam ser enviados como uma solicitação POST, e o URL em que os dados serão processados precisa ser /color.

<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 o 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.

É possível adicionar um botão Enviar de várias maneiras. Uma opção é usar um elemento <button> no formulário. Se você não usar 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 Enviar gráfico. No entanto, agora que você pode criar botões gráficos com CSS, não é recomendável usar type="image".

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 fazer upload de vários arquivos.

Para garantir que os usuários possam fazer upload de arquivos, é necessário fazer mais uma mudança: 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, os arquivos não podem ser enviados com uma solicitação POST.

Teste seu conhecimento

Teste seus conhecimentos sobre o elemento de formulário

Recursos

• O elemento HTML do formulário
• Práticas recomendadas para o botão de envio