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ê deve usar um elemento <form>?

Nem sempre é necessário colocar controles de formulário em um elemento <form>. Por exemplo, é possível fornecer um elemento <select> para que os usuários escolham uma categoria de produtos. Um elemento <form> não é necessário aqui, já que você não armazena nem processa dados no back-end.

No entanto, na maioria dos casos, quando você armazena ou processa dados de usuários, use o elemento <form>. Como você vai aprender neste módulo, o uso de um <form> oferece muitas funcionalidades integradas de 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 a atualização da página quando um usuário enviar um formulário, você ainda pode usar o elemento <form>, mas aprimorá-lo com JavaScript.

Como funciona um <form>?

Você aprendeu que um <form> é a melhor maneira de processar dados do usuário. Você deve 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 um GET. ou POST de acordo com o atributo method. Se nenhum atributo method estiver presente, uma GET é feita para o URL da página atual.

Como acessar e processar os dados do formulário? Os dados enviados podem ser processados por JavaScript no front-end usando uma solicitação GET. ou por 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á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. Nesse caso, é usado o URL definido.

Além disso, o navegador procura atributos adicionais no elemento <form>. Por exemplo, para decidir se o formulário precisa ser validado (novalidate), preenchimento automático deve ser usado (autocomplete="off") ou qual codificação deve 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 eles 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 formulário. Se você não usar o 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 você pode criar botões gráficos com CSS, não é recomendado 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 enviar 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"