Formulários com POST

Prof. Me. Danilo Bueno

Como pegar dados do usuário?

• Até então é possível apenas exibir dados para o usuário;
• O usuário fica limitado (web 1.0);
• Permitir o usuário enviar dados para a aplicação;
• A forma mais comum de entrada de dados em aplicações Web são os formulários.

Exibindo o formulário

• O formulário é um elemento HTML que permite a entrada de dados do usuário
• O formulário é composto por campos e botões
• A tag <form> é utilizada para criar um formulário
• O <form> possui dois atributos importantes: action e method

<form action="/submit" method="post">
    <label for="name">Nome:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Enviar">
</form>

Atributos do formulário

• action: URL para onde os dados do formulário serão enviados

• method: Método HTTP (também conhecido como Verbo) que informa como os dados serão enviados para o servidor. Existem diversos métodos, mas os mais comuns são GET e POST

  • GET: Envia os dados pela URL
  • POST: Envia os dados no corpo da requisição

GET

• Envio: URL da requisição
• Limitado a 2048 caracteres
• Dados visíveis na URL
• Cacheável
• Não deve ser utilizado para enviar dados sensíveis

POST

• Envio: corpo da requisição
• Não tem limite de caracteres
• Dados não visíveis na URL
• Não cacheável
• Deve ser utilizado para enviar dados sensíveis

Atributo name

• O atributo name é utilizado para identificar o campo no servidor
• Uma espécie de chave que será utilizada para recuperar o valor do campo
• Podemos pensar como sendo um nome de variável para guardar o valor do campo inserido pelo usuário

<input type="email" name="email">
<input type="password" name="senha">

Implementando no Thymeleaf

• Para implementarmos formulários no Thymeleaf, utilizamos a tag <form> e os atributos th:action e th:method
• Utilizamos a notação @{/rota} para definir a rota para onde os dados serão enviados
• Além disso, utilizamos o dialeto th:name para definir o nome dos campos

<form th:method="POST" th:action="@{/somar}">
    <input type="number" th:name="primeiroNumero">
    <input type="number" th:name="segundoNumero">
    <button type="submit">Send</button>
</form>

Exibindo o formulário

• Para exibir o formulário é necessário criar um controlador que irá responder com a visão que contém o formulário

@Controller
public class SomadorController {
    
    @GetMapping("/soma")
    public String somaForm() {
        return "somaForm.html";
    }
    
}

Submetendo os dados do formulário

• Os dados do formulário são enviados para o servidor quando o usuário clica no botão Enviar
• O servidor deverá processar os dados e responder
• Para isso, o controlador deve ser anotado com @PostMapping e receber os dados do formulário como parâmetros do método mapeando os campos pela anotação @RequestParam

@PostMapping("/somar")
public String somar(
    @RequestParam int primeiroNumero, 
    @RequestParam int segundoNumero, 
    Model model) { ... }

Exemplo de submissão completo

• Atenção as anotações @PostMapping e @RequestParam que são utilizadas para receber os dados do formulário

@PostMapping("/somar")
public String somar(Model model
    @RequestParam int primeiroNumero, 
    @RequestParam int segundoNumero) {

    int total = primeiroNumero + segundoNumero;
    model.addAttribute("total", total);

    return "somar.html";
}

layout: image image: images/itpweb2.link-controller-form.png backgroundSize: contain title: Ilustração

Links importantes

• Coletando os dados do usuário

layout: center class: text-center

Obrigado!

[email protected] · website/docs · github