Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 36
Tutorial para Criar um Formulário para Criaçao de uma Conta

Neste tutorial veremos como criar um formulário para criar uma nova conta. Ele contém os campos necessários para a criação de uma conta em um site de compras, por exemplo. Este exemplo se restringe apenas à validação dos campos. Se o usuário deixar um dos campos em branco ou preencher errado e clicar no botão 'Enviar', uma mensagem de erro será mostrada para cada campo. Cabe a você incrementar o formulário e criar a rotina para ser enviado para algum lugar.
Vejamos então um exemplo:
Exemplo: Nesse exemplo vamos utilizar apenas um arquivo html. Nele estão contidps todos os recursos necessários para a execução do formulário,, incluindo HTML, CSS e JavaScript:
Arquivo formCriarConta.html:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>Simulados e Tutoriais - Formulário para Criação de Conta</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'> <style> @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap'); * { box-sizing: border-box; } body { background-color: #9b5900; font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .container { background-color: #aaaa00; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); overflow: hidden; width: 400px; max-width: 100%; } .header { border-bottom: 1px solid #f0f0f0; background-color: #f7f700; padding: 20px 40px; } .header h2 { margin: 0; } .form { padding: 30px 40px; } .form-control { margin-bottom: 10px; padding-bottom: 20px; position: relative; } .form-control label { display: inline-block; margin-bottom: 5px; } .form-control input { border: 2px solid #f0f000; border-radius: 4px; display: block; font-family: inherit; font-size: 14px; padding: 10px; width: 100%; } .form-control input:focus { outline: 0; border-color: #000777; } .form-control.success input { border-color: #2ecc71; } .form-control.error input { border-color: #e74c3c; } .form-control i { visibility: hidden; position: absolute; top: 40px; right: 10px; } .form-control.success i.fa-check-circle { color: #2e0000; visibility: visible; } .form-control.error i.fa-exclamation-circle { color: #e74c00; visibility: visible; } .form-control small { color: #ff4c00; position: absolute; bottom: 0; left: 0; visibility: hidden; } .form-control.error small { visibility: visible; } .form button { background-color: #8e4400; border: 2px solid #8e44ad; border-radius: 4px; color: #fff000; display: block; font-family: inherit; font-size: 16px; padding: 10px; margin-top: 20px; width: 100%; } .social-panel-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .social-panel-container.visible { transform: translateX(-10px); } .social-panel { background-color: #ffffff; border-radius: 16px; box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); border: 5px solid #001F61; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Muli'; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px); } .social-panel button.close-btn { border: 0; color: #97A500; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-panel button.close-btn:focus { outline: none; } .social-panel p { background-color: #001Faa; border-radius: 0 0 10px 10px; color: #fff000; font-size: 14px; line-height: 18px; padding: 2px 17px 6px; position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-panel p i { margin: 0 5px; } .social-panel p a { color: #FF7500; text-decoration: none; } .social-panel h4 { margin: 20px 0; color: #fffff00; font-family: 'Muli'; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-panel ul { display: flex; list-style-type: none; padding: 0; margin: 0; } .social-panel ul li { margin: 0 10px; } .social-panel ul li a { border: 1px solid #DCE1F2; border-radius: 50%; color: #ffff00; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-panel ul li a:hover { border-color: #FF6A00; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn { border-radius: 26.5px; background-color: #001F00; border: 1px solid #001F61; box-shadow: 0 16px 22px -17px #03153B; color: #fff; cursor: pointer; font-size: 16px; line-height: 20px; padding: 12px 20px; position: fixed; bottom: 20px; right: 20px; z-index: 999; } .floating-btn:hover { background-color: #ffffff; color: #001F61; } .floating-btn:focus { outline: none; } .floating-text { background-color: #00ffff; border-radius: 10px 10px 0 0; color: #ffffff; font-family: 'Muli'; padding: 7px 15px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; z-index: 998; } .floating-text a { color: #ffffff; text-decoration: none; } @media screen and (max-width: 480px) { .social-panel-container.visible { transform: translateX(0px); } .floating-btn { right: 10px; } } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> <script src='/google_analytics_auto.js'></script></head> <body translate="no" > <div class="container"> <div class="header"> <h2>Criar Conta</h2> </div> <form id="form" class="form"> <div class="form-control"> <label for="username">Usuário:</label> <input type="text" placeholder="seu_nome" id="username" /> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small>Mensagem de erro</small> </div> <div class="form-control"> <label for="username">Email:</label> <input type="email" placeholder="nome@gmail.com" id="email" /> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small>Mensagem de erro</small> </div> <div class="form-control"> <label for="username">Senha:</label> <input type="password" placeholder="Senha1" id="password"/> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small>Mensagem de erro</small> </div> <div class="form-control"> <label for="username">Conffirmar Senha:</label> <input type="password" placeholder="Senha2" id="password2"/> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <small>Mensagem de erro</small> </div> <button>Enviar</button> </form> </div> <div class="social-panel-container"> <div class="social-panel"> <p>Created with <i class="fa fa-heart"></i> by <a target="_blank" href="https://florin-pop.com">Florin Pop</a></p> <button class="close-btn"><i class="fas fa-times"></i></button> <h4>Get in touch on</h4> <ul> <li> <a href="https://www.patreon.com/florinpop17" target="_blank"> <i class="fab fa-discord"></i> </a> </li> <li> <a href="https://twitter.com/florinpop1705" target="_blank"> <i class="fab fa-twitter"></i> </a> </li> <li> <a href="https://linkedin.com/in/florinpop17" target="_blank"> <i class="fab fa-linkedin"></i> </a> </li> <li> <a href="https://facebook.com/florinpop17" target="_blank"> <i class="fab fa-facebook"></i> </a> </li> <li> <a href="https://instagram.com/florinpop17" target="_blank"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </div> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <script id="rendered-js" > const form = document.getElementById('form'); const username = document.getElementById('username'); const email = document.getElementById('email'); const password = document.getElementById('password'); const password2 = document.getElementById('password2'); form.addEventListener('submit', e => { e.preventDefault(); checkInputs(); }); function checkInputs() { // Remove os espaços em branco const usernameValue = username.value.trim(); const emailValue = email.value.trim(); const passwordValue = password.value.trim(); const password2Value = password2.value.trim(); if (usernameValue === '') { setErrorFor(username, 'Usuário não pode ficar em branco'); } else { setSuccessFor(username); } if (emailValue === '') { setErrorFor(email, 'Email não pode ficar em branco'); } else if (!isEmail(emailValue)) { setErrorFor(email, 'Não é um email válido'); } else { setSuccessFor(email); } if (passwordValue === '') { setErrorFor(password, 'Senha não pode ficar em branco'); } else { setSuccessFor(password); } if (password2Value === '') { setErrorFor(password2, 'Senha2 não pode ficar em branco'); } else if (passwordValue !== password2Value) { setErrorFor(password2, 'Senhas não coincidem'); } else { setSuccessFor(password2); } } function setErrorFor(input, message) { const formControl = input.parentElement; const small = formControl.querySelector('small'); formControl.className = 'form-control error'; small.innerText = message; } function setSuccessFor(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; } function isEmail(email) { return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); } const floating_btn = document.querySelector('.floating-btn'); const close_btn = document.querySelector('.close-btn'); const social_panel_container = document.querySelector('.social-panel-container'); floating_btn.addEventListener('click', () => { social_panel_container.classList.toggle('visible'); }); close_btn.addEventListener('click', () => { social_panel_container.classList.remove('visible'); }); //# sourceURL=pen.js </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar uma Galeria de Imagens Simples
Tutorial para Criar o Jogo Breakout >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino