O elemento do formulário em detalhes

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

Será melhor 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 produtos. Você não precisa de um elemento <form> aqui, porque não está armazenando ou processando dados no back-end.

No entanto, na maioria dos casos ao armazenar ou processar dados de usuários, você precisa usar o elemento <form>. Como você vai aprender neste módulo, o uso de um <form> oferece muitas funcionalidades integradas de navegadores que, de outra forma, você precisaria criar por conta própria. Um <form> também tem muitos recursos de acessibilidade integrados por padrão. Para evitar que a página seja atualizada quando um usuário enviar um formulário, ainda será possível usar o elemento <form>, mas aprimorá-lo com JavaScript.

Como funciona uma <form>?

Você aprendeu que um <form> é a melhor maneira de lidar com dados do usuário. Você deve estar se perguntando agora: como um formulário funciona?

O <form> é um contêiner para controles de formulários 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 do formulário?

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 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 os tipos de solicitação e como transferir dados de formulários.

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 esse for o 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), o preenchimento automático (autocomplete="off") ou qual codificação vai 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 seu formulário

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

É possível adicionar um botão Enviar de várias maneiras. Uma opção é usar um elemento <button> dentro do seu formulário. Contanto que você não use type="button", ele vai funcionar como um botão Submit. 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 Submit. 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 puderem fazer upload de vários arquivos.

Mais uma mudança é necessária para garantir que os usuários possam fazer o upload de arquivos: defina o atributo enctype no seu 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 "Enviar"