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