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
.
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
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
Qual valor de enctype
é necessário para enviar arquivos?
multipart/form-data
multipart/form-files
form-data
form-files
É possível enviar dados do usuário sem um <form>
?
Como enviar uma <form>
?
<button>
.Enter
.<input type="image">
.