Formulários HTML

julho 29, 2025
FrontEnd

Formulários são elementos essenciais em aplicações web, permitindo interações como login, cadastro, pesquisas e feedback. Neste artigo vamos abordar uma construção simples de formulários com validações usando HTML, CSS e JavaScript.

1. Estrutura HTML Básica

A base de qualquer formulário começa com a semântica HTML correta iniciando com a tag “form”:

<form id="meuFormulario" class="formulario">
  <!-- Campo de Texto -->
  <div class="campo">
    <label for="nome">Nome Completo*</label>
    <input type="text" id="nome" name="nome" placeholder="Seu nome">
    <span class="erro"></span>
  </div>

  <!-- Campo de E-mail -->
  <div class="campo">
    <label for="email">E-mail*</label>
    <input type="email" id="email" name="email" placeholder="exemplo@email.com">
    <span class="erro"></span>
  </div>

  <!-- Campo de Senha -->
  <div class="campo">
    <label for="senha">Senha*</label>
    <input type="password" id="senha" name="senha" placeholder="Mínimo 8 caracteres">
    <span class="erro"></span>
  </div>

  <!-- Radio Buttons -->
  <div class="campo">
    <label>Gênero:</label>
    <div class="radio-group">
      <input type="radio" id="masculino" name="genero" value="masculino">
      <label for="masculino">Masculino</label>
      
      <input type="radio" id="feminino" name="genero" value="feminino">
      <label for="feminino">Feminino</label>
    </div>
  </div>

  <!-- Checkbox -->
  <div class="campo">
    <input type="checkbox" id="termos" name="termos">
    <label for="termos">Aceito os termos e condições*</label>
    <span class="erro"></span>
  </div>

  <!-- Botão de Envio -->
  <button type="submit">Cadastrar</button>
</form>

2. Estilização com CSS

Vamos deixar a aparência um pouco mais amigável com CSS:

.formulario {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.campo {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  border-color: #4285f4;
  outline: none;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.3);
}

.radio-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.erro {
  color: #d93025;
  font-size: 0.85rem;
  margin-top: 0.3rem;
  display: none;
}

button {
  background: #4285f4;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

button:hover {
  background: #3367d6;
}

3. Validação com JavaScript

Implemente validações em tempo real e no envio:

document.addEventListener('DOMContentLoaded', () => {
  const formulario = document.getElementById('meuFormulario');
  
  // Validação em tempo real
  const camposObrigatorios = ['nome', 'email', 'senha'];
  camposObrigatorios.forEach(campo => {
    const input = document.getElementById(campo);
    input.addEventListener('blur', () => validarCampo(input));
  });

  // Validação no envio
  formulario.addEventListener('submit', (e) => {
    e.preventDefault();
    let formularioValido = true;

    // Valida campos obrigatórios
    camposObrigatorios.forEach(campo => {
      const input = document.getElementById(campo);
      if (!validarCampo(input)) formularioValido = false;
    });

    // Valida termos
    const termos = document.getElementById('termos');
    const erroTermos = termos.nextElementSibling;
    if (!termos.checked) {
      erroTermos.textContent = "Você deve aceitar os termos";
      erroTermos.style.display = 'block';
      formularioValido = false;
    } else {
      erroTermos.style.display = 'none';
    }

    // Se válido, envia o formulário
    if (formularioValido) {
      console.log("Formulário válido! Dados:", {
        nome: formulario.nome.value,
        email: formulario.email.value,
        genero: formulario.genero.value
      });
      alert("Cadastro realizado com sucesso!");
      formulario.reset();
    }
  });

  // Função de validação individual
  function validarCampo(input) {
    const erro = input.nextElementSibling;
    let valido = true;

    if (input.value.trim() === '') {
      erro.textContent = "Campo obrigatório";
      erro.style.display = 'block';
      valido = false;
    } else {
      // Validações específicas
      if (input.id === 'email' && !validarEmail(input.value)) {
        erro.textContent = "E-mail inválido";
        erro.style.display = 'block';
        valido = false;
      } else if (input.id === 'senha' && input.value.length < 8) {
        erro.textContent = "Senha deve ter 8+ caracteres";
        erro.style.display = 'block';
        valido = false;
      } else {
        erro.style.display = 'none';
      }
    }
    return valido;
  }

  // Validador de e-mail
  function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
});

4. Validações Avançadas

a) Expressões Regulares:

// Validar formato de telefone
function validarTelefone(tel) {
  const regex = /^\(\d{2}\) \d{4,5}-\d{4}$/;
  return regex.test(tel);
}

b) Validação de Força de Senha:

function verificarForcaSenha(senha) {
  const forca = {
    comprimento: senha.length >= 8,
    maiuscula: /[A-Z]/.test(senha),
    numero: /\d/.test(senha),
    especial: /[!@#$%^&*]/.test(senha)
  };
  return Object.values(forca).filter(v => v).length;
}

c) Feedback Visual em Tempo Real:

senha.addEventListener('input', () => {
  const forca = verificarForcaSenha(senha.value);
  // Atualizar barra de progresso/cores conforme a força
});

5. Métodos de Envio

GET vs POST:

GET: Dados visíveis na URL (limitado a ~2048 caracteres)

<form method="GET" action="/dados">

POST: Dados no corpo da requisição (ideal para dados sensíveis)

<form method="POST" action="/cadastro">

Envio com Fetch API (AJAX):

if (formularioValido) {
  fetch('/api/cadastro', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      nome: formulario.nome.value,
      email: formulario.email.value
    })
  })
  .then(response => response.json())
  .then(data => console.log('Sucesso:', data))
  .catch(error => console.error('Erro:', error));
}

6. Boas Práticas

Acessibilidade:
- Use <label> associado a for
- Adicione aria-invalid e aria-describedby para erros
Segurança:
- Sempre valide no servidor
- Use HTTPS e CSRF tokens
UX:
- Mensagens de erro claras
- Foco automático no primeiro campo
- Botões visíveis

Conclusão

Com este breve exemplo de um formulário HTML, podemos observar como alguns comportamentos que conhecemos funcionam e como podemos melhorar ainda mais a usabilidade e principalmente a segurança, lembre-se que os dados devem ser validados somente no servidor e muito cuidado com os dados de outras pessoas.