Início /Scripts /Formulários /Criando um Formulário Completo com HTML, CSS e JavaScript

Criando um Formulário Completo com HTML, CSS e JavaScript

Por: Angelo Luis Ferreira | 28/04/2026 Acessos: 105

Os formulários são elementos essenciais em qualquer aplicação web, sendo responsáveis pela coleta de dados dos usuários. No entanto, quando utilizamos apenas HTML, o formulário possui um comportamento limitado, dependente de recarregamento da página e processamento no servidor.

É nesse cenário que o JavaScript se torna fundamental, permitindo transformar um formulário simples em uma interface dinâmica, interativa e muito mais eficiente.

Neste script, vamos construir um formulário completo, com diversos tipos de entrada de dados, validação básica e exibição dos resultados diretamente na tela — simulando o comportamento de uma aplicação real.

Como o formulário funciona

O funcionamento do sistema ocorre em etapas:

  1. O usuário preenche os campos do formulário
  2. O JavaScript intercepta o envio (submit)
  3. Os dados são capturados diretamente do HTML
  4. Os valores são organizados e tratados
  5. O resultado é exibido na própria página
  6. A imagem é exibida com preview (sem upload real)

👉 Esse fluxo simula exatamente o comportamento de um sistema real.

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Formulário Completo com JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">
  <h1>Cadastro de Usuário</h1>

  <form id="formCadastro">

    <div class="grupo">
      <label>Nome:</label>
      <input type="text" id="nome" required>
    </div>

    <div class="grupo">
      <label>Profissão:</label>
      <input type="text" id="profissao">
    </div>

    <div class="grupo">
      <label>Idade:</label>
      <input type="number" id="idade">
    </div>

    <div class="grupo">
      <label>Data de nascimento:</label>
      <input type="date" id="data">
    </div>

    <div class="grupo">
      <label>Gênero:</label>
      <div class="linha">
        <label><input type="radio" name="genero" value="Masculino"> Masculino</label>
        <label><input type="radio" name="genero" value="Feminino"> Feminino</label>
      </div>
    </div>

    <div class="grupo">
      <label>Interesses:</label>
      <div class="linha">
        <label><input type="checkbox" value="Tecnologia"> Tecnologia</label>
        <label><input type="checkbox" value="Esportes"> Esportes</label>
        <label><input type="checkbox" value="Música"> Música</label>
      </div>
    </div>

    <div class="grupo">
      <label>País:</label>
      <select id="pais">
        <option>Brasil</option>
        <option>Portugal</option>
        <option>Estados Unidos</option>
      </select>
    </div>

    <div class="grupo">
      <label>Linguagens favoritas:</label>
      <select id="linguagens" multiple>
        <option>JavaScript</option>
        <option>Python</option>
        <option>PHP</option>
        <option>C++</option>
      </select>
    </div>

    <div class="grupo">
      <label>Nível de experiência:</label>
      <input type="range" id="nivel" min="0" max="10">
    </div>

    <div class="grupo">
      <label>Foto:</label>
      <input type="file" id="foto" accept="image/*">
    </div>

    <div class="grupo">
      <label>Observações:</label>
      <textarea id="obs"></textarea>
    </div>

    <button type="submit">Enviar</button>

  </form>

  <div id="resultado"></div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (style.css)

body {
  font-family: Arial, sans-serif;
  background: #0f172a;
  color: #fff;
  margin: 0;
}

.container {
  max-width: 600px;
  margin: 40px auto;
  background: #1e293b;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.grupo {
  margin-bottom: 15px;
}

.linha {
  display: flex;
  gap: 15px;
  margin-top: 5px;
  flex-wrap: wrap;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: none;
  margin-top: 5px;
}

input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

button {
  width: 100%;
  padding: 12px;
  background: #facc15;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

#resultado {
  margin-top: 20px;
  background: #020617;
  padding: 15px;
  border-radius: 8px;
}

#resultado img {
  max-width: 120px;
  margin-top: 10px;
}

JavaScript (script.js)

const form = document.getElementById("formCadastro");

form.addEventListener("submit", function(e) {
  e.preventDefault();

  const nome = document.getElementById("nome").value;
  const profissao = document.getElementById("profissao").value;
  const idade = document.getElementById("idade").value;
  const data = document.getElementById("data").value;

  const genero = document.querySelector("input[name='genero']:checked")?.value ?? "Não informado";

  const interesses = [...document.querySelectorAll("input[type='checkbox']:checked")]
    .map(el => el.value);

  const pais = document.getElementById("pais").value;

  const linguagens = [...document.getElementById("linguagens").selectedOptions]
    .map(el => el.value);

  const nivel = document.getElementById("nivel").value;
  const obs = document.getElementById("obs").value;

  const fotoInput = document.getElementById("foto");
  let fotoURL = "";

  if (fotoInput.files.length > 0) {
    fotoURL = URL.createObjectURL(fotoInput.files[0]);
  }

  const resultado = `
    <h2>Dados enviados:</h2>
    Nome: ${nome}<br>
    Profissão: ${profissao}<br>
    Idade: ${idade}<br>
    Data: ${data}<br>
    Gênero: ${genero}<br>
    Interesses: ${interesses.join(", ")}<br>
    País: ${pais}<br>
    Linguagens: ${linguagens.join(", ")}<br>
    Nível: ${nivel}<br>
    Observações: ${obs}<br>

    ${fotoURL ? `<img src="${fotoURL}" alt="Foto do usuário">` : ""}

    <br><br>
    <strong>⚠️ Estes dados poderiam ser enviados para um banco de dados.</strong>
  `;

  document.getElementById("resultado").innerHTML = resultado;
});

Preview Completo

No exemplo abaixo, após preenchimento dos campos, clique no botão [Enviar] para visualizar o resultado.

See the Pen Formulário com HTML + CSS +JavaScript by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi criado formulário com JavaScript. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto.

Tente você mesmo »

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO