Aula 5 - Formulários e Manipulação de Dados

Aula 5 – Formulários e Manipulação de Dados
Aprenda a criar e processar formulários HTML, utilizando métodos GET e POST, manipulando dados com Servlets Java e implementando validações eficientes no front-end.
Atividade Prática
Exercícios resolvidos (passo a passo)
1) Formulário básico com HTML5 (required, type e pattern)
Objetivo: criar um formulário de cadastro simples com validação nativa do HTML5.
Passo a passo
Crie um arquivo cadastro.html.
Adicione um <form> com method="post" e campos: nome, email, telefone.
Use validações nativas: required, type="email", pattern para telefone.
Solução
<!DOCTYPE html>
<html lang="pt-BR">
<head><meta charset="UTF-8"><title>Cadastro</title></head>
<body>
  <h1>Cadastro</h1>
  <form action="ProcessaCadastro" method="post">
    <label for="nome">Nome</label>
    <input id="nome" name="nome" type="text" required minlength="3" maxlength="60">

    <label for="email">E-mail</label>
    <input id="email" name="email" type="email" required>

    <label for="telefone">Telefone (formato 11 dígitos)</label>
    <input id="telefone" name="telefone" type="text" 
           pattern="\d{11}" placeholder="DDD + número, ex.: 11987654321" required>

    <button type="submit">Enviar</button>
  </form>
</body>
</html>
Por que assim? A aula recomenda apresentar os elementos do formulário e validações nativas (type/pattern/required). 
2) GET vs POST (comparar comportamento)
Objetivo: ver na prática a diferença entre enviar via GET e POST.
Passo a passo
Duplique o cadastro.html em cadastro_get.html.
Troque para method="get".
Submeta e observe os parâmetros na URL; depois compare voltando ao method="post".
Solução (trecho)
<form action="ProcessaCadastro" method="get"> ... </form>
O que observar
GET: parâmetros aparecem na barra de endereço (útil para buscas, mas não para dados sensíveis).
POST: parâmetros seguem no corpo da requisição (preferível para cadastro/login). (A distinção GET/POST é um dos tópicos centrais da aula. 
3) Validação de senha com JavaScript (confirmação em tempo real)
Objetivo: complementar a validação do HTML5 com lógica de comparação de senhas (cliente).
Passo a passo
No cadastro.html, acrescente senha e confirmarSenha.
Bloqueie o envio se as senhas não coincidirem e mostre uma mensagem.
Solução
<form id="formCadastro" action="ProcessaCadastro" method="post" onsubmit="return validarSenha()">
  <!-- ...campos anteriores... -->
  <label for="senha">Senha</label>
  <input id="senha" name="senha" type="password" minlength="8" required>

  <label for="confirmarSenha">Confirmar Senha</label>
  <input id="confirmarSenha" name="confirmarSenha" type="password" minlength="8" required>

  <p id="erro" style="color:red;"></p>
  <button type="submit">Enviar</button>
</form>

<script>
function validarSenha() {
  const s = document.getElementById('senha').value;
  const c = document.getElementById('confirmarSenha').value;
  const erro = document.getElementById('erro');
  if (s !== c) { erro.textContent = 'As senhas não coincidem.'; return false; }
  erro.textContent = '';
  return true;
}
</script>
Nota didática: a aula destaca usar validação em camadas: primeiro no cliente (HTML5/JS) e sempre no servidor por segurança. 
4) Servlet para receber e validar (server-side)
Objetivo: capturar parâmetros no backend, validar de novo e responder.
Passo a passo
Crie uma classe ProcessaCadastro anotada com @WebServlet("/ProcessaCadastro").
Leia parâmetros com request.getParameter(...).
Valide regras essenciais e faça forward para sucesso.jsp ou erro.jsp.
Solução (Java Servlet)
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;

@WebServlet("/ProcessaCadastro")
public class ProcessaCadastro extends HttpServlet {
  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    String nome = request.getParameter("nome");
    String email = request.getParameter("email");
    String telefone = request.getParameter("telefone");
    String senha = request.getParameter("senha");
    String confirmar = request.getParameter("confirmarSenha");

    // Validações servidor (exemplos)
    boolean invalido = false;
    if (nome == null || nome.length() < 3) invalido = true;
    if (email == null || !email.contains("@")) invalido = true;
    if (telefone == null || !telefone.matches("\\d{11}")) invalido = true;
    if (senha == null || confirmar == null || !senha.equals(confirmar)) invalido = true;

    if (invalido) {
      request.setAttribute("msg", "Dados inválidos. Corrija e tente novamente.");
      request.getRequestDispatcher("/erro.jsp").forward(request, response);
      return;
    }

    // (Simulação) processar/persistir...
    request.setAttribute("usuario", nome);
    request.getRequestDispatcher("/sucesso.jsp").forward(request, response);
  }
}
Referências da aula: uso de getParameter/getParameterValues para recuperar dados, e fluxo de resposta/forward. 
5) JSP exibindo resultado + valor dinâmico
Objetivo: mostrar mensagem de sucesso e inserir um valor dinâmico (ex.: data de envio).
Passo a passo
Crie sucesso.jsp e leia o atributo usuario.
Gere uma data no JSP e inclua como campo oculto (ou apenas exiba).
Solução (JSP)
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Sucesso</title></head>
<body>
  <h1>Cadastro concluído!</h1>
  <p>Bem-vindo, <strong>${usuario}</strong>.</p>

  <%
    String dataAtual = new java.text.SimpleDateFormat("dd/MM/yyyy")
                         .format(new java.util.Date());
  %>
  <p>Data de processamento: <%= dataAtual %></p>
</body>
</html>
Por que JSP? A aula apresenta JSP para páginas dinâmicas e combinar HTML com valores Java quando necessário. 
6) Checkboxes e múltiplos valores (interesses)
Objetivo: entender getParameterValues com listas de opções.
Passo a passo
No formulário, adicione checkboxes com name="interesses".
No Servlet, leia como vetor e trate nulos.
Solução (trechos)
<p>Interesses:</p>
<label><input type="checkbox" name="interesses" value="esporte"> Esporte</label>
<label><input type="checkbox" name="interesses" value="musica"> Música</label>
<label><input type="checkbox" name="interesses" value="tecnologia"> Tecnologia</label>
String[] interesses = request.getParameterValues("interesses");
if (interesses != null) {
  // processar lista; exibir no JSP
  request.setAttribute("interesses", String.join(", ", interesses));
}
Observação: o material aponta explicitamente o uso de getParameterValues para múltiplos valores (ex.: checkboxes). 
Como testar rapidamente
GET vs POST: no cadastro_get.html, os parâmetros aparecem na URL; no cadastro.html (POST), não. 
Validação em camadas: tente burlar o HTML/JS (por exemplo, desativando o JS no navegador) e veja que o Servlet continua bloqueando entradas inválidas. (A aula reforça a necessidade de validação no servidor por segurança e boas práticas. 
Sugestões de alterações (para aprender brincando)
Campos extras e máscaras
Adicione CEP com pattern="\d{5}-\d{3}" e CPF com regex simples.
Inclua máscara de entrada no front-end (JS) e valide o formato no servidor. (Validação em múltiplas camadas recomendada. 
Mensagens de erro mais claras
Mostre exatamente qual campo falhou e por quê (ex.: “Telefone deve ter 11 dígitos”). A aula sugere mensagens específicas e feedback visual. 
Radio + Select
Troque parte dos campos por radio (ex.: tipo de conta) e select (estado/país). Garanta que apenas uma opção de radio seja aceita. (Tipos de campos fazem parte do conteúdo. 
GET para busca, POST para cadastro
Crie uma página de busca com method="get" (para URL compartilhável) e mantenha cadastro com post.
JSP dinâmico
Pré-preencha valores em JSP (ex.: value="<%= request.getAttribute(...)" %>), ou gere campos ocultos com a data/hora de envio.
Fluxo completo com confirmação
Após o ProcessaCadastro, faça forward para sucesso.jsp com os dados do usuário e liste os interesses selecionados.
Em caso de erro, volte para o formulário preservando os campos corretos.
Segurança e robustez
Adicione verificação de tamanho máximo de campos no servidor; normalize strings.
Estude CSRF token e rate limiting no envio de formulários (a aula recomenda pensar em segurança e evolução do projeto). 
Integração futura
Encaminhe os dados válidos para um serviço/banco de dados (ponte para a próxima aula de integração/CRUD). 
GitHub
GitHub - LuizRMSilva1973/formularios: Formularios e manipulaçao de dados
Formularios e manipulaçao de dados. Contribute to LuizRMSilva1973/formularios development by creating an account on GitHub.
Objetivo da Aula
Compreender campos HTML
Exploraremos os diversos tipos de campos disponíveis em HTML para criação de formulários interativos e funcionais.
Enviar e processar dados
Aprenderemos como enviar dados via métodos GET e POST e como processá-los no servidor usando Servlets Java.
Implementar validação
Desenvolveremos estratégias de validação tanto no front-end quanto no back-end para garantir a integridade dos dados.
Ferramentas e Ambiente
Tecnologias principais
HTML para estruturação dos formulários
JSP (JavaServer Pages) para páginas dinâmicas
Servlets Java para processamento de requisições
Estas tecnologias formam um ecossistema completo para desenvolvimento de aplicações web dinâmicas baseadas em Java.
Ambiente de desenvolvimento
Visual Studio Code como editor principal
CodeSandbox para exemplos interativos
Servidor Tomcat para execução dos Servlets
O ambiente foi configurado para proporcionar uma experiência prática e eficiente durante o aprendizado.
Estrutura da Aula
1
Parte Teórica (1h)
Conceitos fundamentais sobre formulários HTML, métodos de envio, e técnicas de validação.
Apresentação dos elementos HTML
Explicação sobre métodos GET e POST
Introdução aos Servlets Java
2
Parte Prática (2h)
Aplicação dos conceitos aprendidos através de exercícios guiados e projetos práticos.
Criação de formulários completos
Implementação de validações
Desenvolvimento de Servlets para processamento
Introdução aos Formulários HTML
O que é um formulário?
Um formulário HTML é uma seção de um documento que contém controles interativos que permitem aos usuários enviar informações para um servidor web. É a principal forma de interação entre usuário e aplicação.
Formulários são utilizados para diversas finalidades, como cadastros, login, pesquisas, comentários e praticamente qualquer situação onde dados precisem ser coletados dos usuários.
Função no fluxo de sistemas
Os formulários constituem a ponte entre o front-end e o back-end de uma aplicação. Eles capturam dados que serão processados pelo servidor e possivelmente armazenados em bancos de dados.
Um bom formulário equilibra usabilidade, segurança e funcionalidade, garantindo que os dados sejam coletados de forma eficiente e correta.
Estrutura Básica de um Formulário
1
Tag <form>
A tag <form> é o elemento principal que envolve todos os controles do formulário. Define o início e o fim do formulário HTML.
<form>
  
</form>
2
Atributo action
O atributo action especifica para onde os dados do formulário serão enviados quando submetidos. Geralmente aponta para um script no servidor.
<form action="/processar-formulario">
3
Atributo method
O atributo method define como os dados serão enviados. Os dois métodos principais são GET e POST.
<form method="post">
Campo de Texto
Características e uso
O campo de texto é o tipo mais básico e comum em formulários. É utilizado para coletar informações textuais curtas como nomes, apelidos, endereços e outros dados alfanuméricos simples.
Ideal para informações que não exigem formatação específica ou validação complexa, embora possa ser customizado com atributos adicionais para limitar tamanho e definir padrões.
Implementação
<label for="nome">Nome:</label>
<input 
  type="text" 
  id="nome" 
  name="nome" 
  placeholder="Digite seu nome completo"
  required
>
Atributos comuns incluem:
placeholder: Texto de exemplo
maxlength: Limita número de caracteres
required: Torna o campo obrigatório
Campo de E-mail
Funcionalidades
Validação automática do formato de e-mail
Impede envio de formulários com e-mails mal formatados
Adaptação em dispositivos móveis (teclado apropriado)
Código de implementação
<label for="email">E-mail:</label>
<input 
  type="email" 
  id="email" 
  name="email" 
  placeholder="seu@email.com"
  required
>
Atributos úteis
multiple: permite múltiplos e-mails
pattern: define padrão personalizado
autocomplete: auxilia no preenchimento
Campos de Senha
Características de segurança
O campo de senha (type="password") é um elemento especializado que oculta automaticamente os caracteres digitados, substituindo-os por asteriscos ou círculos, dependendo do navegador.
Esse comportamento protege a privacidade do usuário, evitando que pessoas próximas possam visualizar a senha durante a digitação.
Implementação
<label for="senha">Senha:</label>
<input 
  type="password" 
  id="senha" 
  name="senha" 
  minlength="8"
  required
>
Atributos importantes:
minlength: Define comprimento mínimo
maxlength: Define comprimento máximo
pattern: Expressa regras de complexidade
Botões de Seleção (Radio)
1
Características
Os botões de rádio permitem que o usuário selecione apenas uma opção de um conjunto predefinido. São ideais para perguntas com respostas mutuamente exclusivas.
Todos os botões radio de um mesmo grupo devem compartilhar o mesmo atributo name, mas ter valores diferentes no atributo value.
2
Implementação
<p>Gênero:</p>
<input type="radio" id="masc" name="genero" value="masculino">
<label for="masc">Masculino</label>

<input type="radio" id="fem" name="genero" value="feminino">
<label for="fem">Feminino</label>

<input type="radio" id="outro" name="genero" value="outro">
<label for="outro">Outro</label>
Caixas de Seleção (Checkbox)
Funcionalidade
As caixas de seleção (checkboxes) permitem que o usuário selecione múltiplas opções simultaneamente, ao contrário dos botões de rádio.
São ideais para situações onde várias escolhas são possíveis, como seleção de interesses, preferências ou aceitação de termos.
Implementação
<p>Interesses:</p>
<input type="checkbox" id="esporte" name="interesses" value="esporte">
<label for="esporte">Esportes</label>

<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label>

<input type="checkbox" id="tech" name="interesses" value="tecnologia">
<label for="tech">Tecnologia</label>
Cada checkbox selecionado será enviado como um par name/value separado.
Campo Select e Option
Listas suspensas
O elemento <select> cria uma lista suspensa que economiza espaço na interface e organiza múltiplas opções em um único controle compacto.
Ideal para quando há muitas opções disponíveis, como lista de países, estados ou categorias.
Implementação básica
<label for="estado">Estado:</label>
<select id="estado" name="estado">
  <option value="">Selecione...</option>
  <option value="SP">São Paulo</option>
  <option value="RJ">Rio de Janeiro</option>
  <option value="MG">Minas Gerais</option>
</select>
Seleção múltipla
Adicionando o atributo multiple, permite-se a seleção de várias opções simultaneamente (segurando Ctrl ou Cmd).
<select multiple name="linguagens[]">
 <option value="java">Java</option>
 <option value="js">JavaScript</option>
</select>
Campo de Número
Características especiais
O campo de número (type="number") é especializado para entrada de valores numéricos. Ele proporciona controles para incrementar e decrementar valores (setas para cima/baixo) e validação automática para garantir que apenas números sejam aceitos.
Em dispositivos móveis, exibe um teclado numérico, facilitando a entrada de dados.
Implementação e atributos
<label for="idade">Idade:</label>
<input 
  type="number" 
  id="idade" 
  name="idade"
  min="18" 
  max="120" 
  step="1"
>
min: Valor mínimo permitido
max: Valor máximo permitido
step: Incremento entre valores
Campo de Telefone
Especificações do campo de telefone
O campo type="tel" é projetado especificamente para entrada de números telefônicos. Em dispositivos móveis, apresenta um teclado numérico otimizado para digitação de telefones.
Diferentemente do type="number", aceita caracteres especiais como parênteses, hífens e espaços, comuns em formatação de números telefônicos.
Implementação com validação
<label for="telefone">Telefone:</label>
<input 
  type="tel" 
  id="telefone" 
  name="telefone"
  placeholder="(99) 99999-9999"
  pattern="\(\d{2}\) \d{5}-\d{4}"
>
O atributo pattern permite definir uma expressão regular para validar o formato do telefone, garantindo que siga um padrão específico como o brasileiro.
Campos de Data e Hora
Tipos disponíveis
date: Seleciona uma data (dia, mês, ano)
time: Seleciona um horário (hora, minuto)
datetime-local: Combina data e hora
month: Seleciona mês e ano
week: Seleciona semana do ano
Estes campos fornecem interfaces especializadas como calendários e seletores de hora, melhorando significativamente a experiência do usuário.
Exemplos práticos
<!-- Seletor de data -->
<label for="nascimento">Data de nascimento:</label>
<input type="date" id="nascimento" name="nascimento">

<!-- Seletor de hora -->
<label for="reuniao">Horário da reunião:</label>
<input type="time" id="reuniao" name="reuniao">

<!-- Data e hora combinados -->
<label for="entrega">Data e hora da entrega:</label>
<input type="datetime-local" id="entrega" name="entrega">
Campo de URL
Características e validação
O campo type="url" é projetado especificamente para entrada de endereços web. Realiza validação automática para garantir que o valor inserido seja um URL válido, contendo protocolo (http://, https://) e formato adequado.
Em dispositivos móveis, o teclado exibido é otimizado para digitação de URLs, com teclas como ".com" facilmente acessíveis.
Implementação
<label for="website">Seu site:</label>
<input 
  type="url" 
  id="website" 
  name="website"
  placeholder="https://www.exemplo.com.br"
  pattern="https://.*"
>
O atributo pattern pode ser usado para restringir ainda mais o formato, como aceitar apenas URLs com HTTPS por questões de segurança.
Botão de Envio (Submit)
Função e comportamento
O botão de envio (type="submit") é responsável por disparar a submissão do formulário para o destino especificado no atributo action da tag form.
Quando clicado, ele aciona a validação de todos os campos do formulário (se houver regras definidas) e, se todos estiverem válidos, envia os dados para processamento.
Implementação e estilização
<!-- Versão básica -->
<input type="submit" value="Enviar formulário">

<!-- Versão com tag button (mais flexível) -->
<button type="submit">
  Enviar dados
</button>
A tag <button> oferece mais flexibilidade para estilização e permite incluir elementos como ícones dentro do botão, sendo geralmente preferida em projetos modernos.
Métodos de Envio: GET vs POST
1
Método GET
Dados anexados à URL como string de consulta
Visível na barra de endereços do navegador
Limitado a aproximadamente 2048 caracteres
Pode ser armazenado em cache e favoritos
Não adequado para dados sensíveis
Exemplo: https://site.com/busca?termo=java&categoria=curso
2
Método POST
Dados enviados no corpo da requisição HTTP
Invisível na URL e para o usuário final
Não tem limite prático de tamanho
Não fica em cache ou histórico do navegador
Mais seguro para informações sensíveis
Ideal para: login, cadastro, upload de arquivos
Exemplo Prático: GET x POST
Formulário usando GET
<form action="/buscar" method="get">
  <label for="termo">Termo:</label>
  <input type="text" id="termo" name="termo">
  
  <label for="categoria">Categoria:</label>
  <select id="categoria" name="categoria">
    <option value="cursos">Cursos</option>
    <option value="artigos">Artigos</option>
  </select>
  
  <button type="submit">Buscar</button>
</form>
Resultado: https://site.com/buscar?termo=java&categoria=cursos
Formulário usando POST
<form action="/login" method="post">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
  
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha">
  
  <button type="submit">Entrar</button>
</form>
Os dados são enviados no corpo da requisição, não aparecendo na URL. O Servlet pode acessá-los via request.getParameter().
JSP: Exemplo de Formulário
1
Estrutura do arquivo JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>Formulário de Contato</title>
</head>
<body>
    <h1>Entre em contato</h1>
    
    <!-- Formulário HTML dentro do JSP -->
    <form action="ProcessaContato" method="post">
        ...campos do formulário...
    </form>
</body>
</html>
2
Integrando com código Java
<%-- Podemos usar código Java para valores dinâmicos --%>
<% 
    String dataAtual = new java.text.SimpleDateFormat("dd/MM/yyyy")
        .format(new java.util.Date());
%>

<input type="hidden" name="dataEnvio" value="<%= dataAtual %>">
O JSP permite combinar HTML com código Java, facilitando a criação de formulários dinâmicos que podem, por exemplo, ter valores pré-preenchidos ou validações do lado do servidor.
Introdução a Servlets Java
O que são Servlets?
Servlets são classes Java que processam requisições e geram respostas dinâmicas. Eles fazem parte da tecnologia Java EE e são executados em um servidor de aplicações como o Tomcat ou Jetty.
Na arquitetura web Java, os Servlets são responsáveis por receber e processar os dados enviados pelos formulários HTML, funcionando como o controlador no padrão MVC.
Ciclo de vida do Servlet
Inicialização: método init() é chamado uma vez quando o Servlet é carregado
Serviço: método service() processa requisições (delegando para doGet/doPost)
Destruição: método destroy() é chamado quando o Servlet é descarregado
Este ciclo permite otimizar recursos e manter estado entre requisições quando necessário.
Recebendo Dados no Servlet
Estrutura básica de um Servlet
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class ProcessaFormulario extends HttpServlet {
    
    @Override
    protected void doPost(HttpServletRequest request, 
                         HttpServletResponse response)
            throws ServletException, IOException {
        
        // Processamento dos dados aqui
        
    }
}
Recuperando dados com getParameter()
// Recupera valores individuais
String nome = request.getParameter("nome");
String email = request.getParameter("email");

// Para checkboxes (múltiplos valores)
String[] interesses = request.getParameterValues("interesses");

// Verificando se um parâmetro existe
if (request.getParameter("concordo") != null) {
 // Usuário marcou o checkbox
}
Manipulando Dados no Backend
Processamento de dados
Após receber os dados do formulário, o Servlet realiza as operações necessárias, como:
Validação mais rigorosa dos dados
Conversão de tipos (String para int, Date, etc.)
Interação com banco de dados (CRUD)
Chamadas a serviços externos
Lógica de negócio da aplicação
Gerando respostas dinâmicas
// Configurando a resposta
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

// Gerando HTML dinamicamente
out.println("<html><body>");
out.println("<h1>Obrigado, " + nome + "!</h1>");
out.println("<p>Seu cadastro foi realizado com sucesso.</p>");
out.println("</body></html>");

// Ou redirecionando para uma página JSP
request.setAttribute("usuario", nome);
request.getRequestDispatcher("/sucesso.jsp")
 .forward(request, response);
Validação de Dados no Front-End
Feedback imediato
A validação no front-end oferece feedback instantâneo aos usuários, sem necessidade de esperar resposta do servidor.
Redução de carga
Diminui o número de requisições ao servidor, evitando processamento desnecessário de dados inválidos.
Melhor experiência
Proporciona melhor experiência ao usuário, guiando-o para o preenchimento correto dos campos.
Camada inicial
Funciona como primeira camada de validação, mas não substitui a validação no servidor, que é essencial para segurança.
Validação Simples com HTML5
Atributos de validação nativos
required: Torna o campo obrigatório
minlength/maxlength: Define limites de caracteres
min/max: Define limites numéricos
pattern: Expressão regular para validação
type: Validação específica por tipo (email, url, etc.)
Esses atributos proporcionam validação básica sem necessidade de JavaScript, sendo suportados pela maioria dos navegadores modernos.
Exemplos práticos
<!-- Campo obrigatório -->
<input type="text" required>

<!-- Limites de caracteres -->
<input type="text" minlength="3" maxlength="50">

<!-- Padrão personalizado (CEP brasileiro) -->
<input type="text" pattern="\d{5}-\d{3}"
 placeholder="12345-678">

<!-- Números com limites -->
<input type="number" min="18" max="100">
Validação Avançada com JavaScript
Vantagens da validação com JavaScript
Validações complexas além do HTML5
Verificações condicionais entre campos
Feedback visual personalizado
Validação em tempo real durante digitação
Manipulação dinâmica dos campos
Exemplo de validação com JavaScript
// HTML
<form id="meuForm" onsubmit="return validarForm()">
 <input type="password" id="senha">
 <input type="password" id="confirmarSenha">
 <div id="erro"></div>
 <button type="submit">Enviar</button>
</form>

// JavaScript
function validarForm() {
 const senha = document.getElementById("senha").value;
 const confirma = document.getElementById("confirmarSenha").value;
 const erro = document.getElementById("erro");
 
 if (senha !== confirma) {
 erro.textContent = "As senhas não coincidem!";
 erro.style.color = "red";
 return false; // Impede envio do formulário
 }
 return true; // Permite envio do formulário
}
Boas Práticas em Validação
Mensagens claras de erro
Utilize mensagens específicas que indicam exatamente o que está errado e como corrigir. Evite mensagens genéricas como "Entrada inválida".
Exemplo: "A senha deve conter pelo menos 8 caracteres, incluindo uma letra maiúscula e um número."
Validação em camadas
Implemente validação tanto no cliente (HTML5/JavaScript) quanto no servidor (Java/Servlets) para garantir segurança e usabilidade.
Nunca confie apenas na validação do cliente, pois ela pode ser facilmente contornada por usuários mal-intencionados.
Feedback visual imediato
Forneça indicações visuais como cores, ícones ou destacar campos com problemas. Use verde para campos válidos e vermelho para inválidos.
Mostre dicas e requisitos antes mesmo que o usuário comece a digitar para prevenir erros.
Demonstração: Formulário Completo
Estrutura do exemplo
Nosso exemplo demonstra um formulário de cadastro completo com:
Campos de texto, e-mail, senha, telefone
Seleção via radio buttons e checkboxes
Validação com HTML5 e JavaScript
Processamento com Servlet Java
Feedback visual em tempo real
Todo o código está disponível no CodeSandbox para que você possa explorar, modificar e testar diferentes abordagens.
Fluxo de processamento
Usuário preenche o formulário HTML/JSP
JavaScript valida entradas antes do envio
Dados são enviados via POST ao servidor
Servlet recebe e valida novamente os dados
Processamento da lógica de negócio (BD, etc.)
Resposta é gerada (confirmação, erro)
Este fluxo representa uma implementação completa e segura para manipulação de dados de formulários.
Exercício Prático Orientado
1
Criar formulário HTML
Campos: nome, e-mail, senha, confirmação de senha, telefone
Utilize atributos HTML5 para validação básica
Inclua rótulos (labels) para acessibilidade
Organize o layout com CSS básico
2
Implementar validação JavaScript
Verifique se as senhas coincidem
Valide formato de telefone com expressão regular
Mostre mensagens de erro personalizadas
Adicione feedback visual em tempo real
3
Criar Servlet Java
Configure para receber dados via POST
Implemente validações do lado do servidor
Simule armazenamento dos dados
Responda com página de confirmação
Conclusão e Dicas Finais
Principais conceitos abordados
Diversos tipos de campos HTML para formulários
Métodos GET e POST para envio de dados
Processamento de dados com Servlets Java
Estratégias de validação em múltiplas camadas
Formulários são a principal forma de interação com usuários em aplicações web, e dominar sua implementação é fundamental para desenvolvedores full-stack.
Recomendações de continuidade
Explore bibliotecas como jQuery Validate para validações mais avançadas
Estude frameworks como Spring MVC para processamento mais sofisticado
Implemente medidas de segurança como CSRF tokens
Pratique criando formulários mais complexos
Lembre-se: a segurança é tão importante quanto a usabilidade. Sempre valide dados no servidor, mesmo com validação no cliente.