Jump to content

Alguém tem um exemplo de formulário de cadastro com HTML, CSS, JavaScript, jQuery e Plugin jQuery?

Tiago Torquato de Oliveira
 Compartilhar

Postagens Recomendadas

Tiago Torquato de Oliveira

Tiago Torquato de Oliveira

Postado
Postado

OLA PESSOAL TUDO BEM?

PRECISO AJUDA DE VCS.. EU ESTOU ESTUDANDO CURSO DESENVOLVEDOR FULL STACK PHYNTON E O PROFESSOR NA PLATARFORMA PEDIU EXERCICIO A FORMULARIO DO CADASTRO.

ALGUEM TEM CODIGO DO FORMULARIO DO CADASTRO?

PRECISO HTML, CSS, JAVASCRIPT E JQUERY E PLUIG JQUERY.

PRECISO CAMPOS, NOME, ENDEREÇO, CEP, CPF, RG, DATA NASCIMENTO, CIDADE, TELEFONE E ESTADO.

 

  • Curtir 2
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para Alguém tem um exemplo de formulário de cadastro com HTML, CSS, JavaScript, jQuery e Plugin jQuery?
Matheus Epiphani

Matheus Epiphani

Postado
Postado

Olá!

Criei um formulário de cadastro simples que atenda aos requisitos mencionados, utilizando HTML, CSS, JavaScript e jQuery.

Este formulário inclui campos para Nome, Endereço, CEP, CPF, RG, Data de Nascimento, Cidade, Telefone e Estado. Também utilizei a biblioteca jQuery.mask para adicionar máscaras aos campos de CEP, CPF, RG e Telefone. Certifique-se de baixar a biblioteca jQuery.mask e incluí-la em seu projeto.

Se precisar de mais alguma coisa, é só falar!

Aqui está o código:

HTML:
  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário de Cadastro</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form id="cadastroForm">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>

    <label for="endereco">Endereço:</label>
    <input type="text" id="endereco" name="endereco" required>

    <label for="cep">CEP:</label>
    <input type="text" id="cep" name="cep" required>

    <label for="cpf">CPF:</label>
    <input type="text" id="cpf" name="cpf" required>

    <label for="rg">RG:</label>
    <input type="text" id="rg" name="rg" required>

    <label for="dataNascimento">Data de Nascimento:</label>
    <input type="date" id="dataNascimento" name="dataNascimento" required>

    <label for="cidade">Cidade:</label>
    <input type="text" id="cidade" name="cidade" required>

    <label for="telefone">Telefone:</label>
    <input type="tel" id="telefone" name="telefone" required>

    <label for="estado">Estado:</label>
    <select id="estado" name="estado" required>
      <option value="" selected disabled>Selecione o Estado</option>
      <option value="AC">Acre</option>
      <option value="AL">Alagoas</option>
      <!-- Outras opções de estados aqui -->
    </select>

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

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

 

CSS: 

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

 

JavaScript:

  

$(document).ready(function(){
  $('#cep').mask('00000-000');
  $('#cpf').mask('000.000.000-00', {reverse: true});
  $('#rg').mask('00.000.000-0');
  $('#telefone').mask('(00) 00000-0000');

  $('#cadastroForm').submit(function(event){
    event.preventDefault();
    // Aqui você pode adicionar o código para enviar o formulário para o servidor
    // Por exemplo:
    // $.post('cadastrar.php', $(this).serialize(), function(response){
    //   console.log(response);
    // });
  });
});

 

  • Curtir 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...