WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sign.css"> <title>SignIn-Form</title> </head> <body> <div class="box"> <span class="borderline"></span> <form> <h2>Sign In</h2> <div class="inputbox"> <input type="text" required="required"> <span id="username">Username</span> <i></i> </div> <div class="inputbox"> <input type="password" required="required"> <span>Password</span> <i></i> </div> <div class="links"> <a href="#">Forget Password</a> <a href="#">Sign Up</a> </div> <input onclick="validation();" type="submit" value="Login"> </form> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #23242a; } .box { position: relative; width: 380px; height: 420px; background: #1c1c1c; border-radius: 8px; overflow: hidden; } .box::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; } .box::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: 3s; } .borderline{ position: absolute; top: 0; inset: 0; } .borderline::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, orange, orange, orange); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay:-1.5s ; } .borderline::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, orange, orange, orange); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay:-4.5s ; } @keyframes animate { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } .box form{ position: absolute; inset: 4px; background: #222; padding: 50px 40px; border-radius: 8px; z-index: 2; display: flex; flex-direction: column; } .box form h2{ color:#fff ; font-weight:500 ; text-align:center ; letter-spacing: 0.1em; } .box form .inputbox{ position: relative; width: 300px; margin-top: 35px; } .box form .inputbox input{ position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; border: none; outline: none; box-shadow: none; color: white; font-size: 1em; letter-spacing: 0.05em; transition: 0.5s; z-index: 10; } .box form .inputbox span{ position: absolute; left: 0; pointer-events: none; padding: 20px 0px 10px; color:red; font-size: 1em; letter-spacing: 0.05em; transition: 0.5s; } .box form .inputbox input:valid ~ span, .box form .inputbox input:focus ~ span{ color:blue; font-size: 0.75em; transform: translateY(-34px); } .box form .inputbox i{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: goldenrod; border-radius: 4px; overflow: hidden; transition: 0.5s; pointer-events: none; } .box form .inputbox input:valid~i, .box form .inputbox input:valid~i{ height: 44px; } .box form .links{ display: flex; justify-content: space-between; } .box form .links a{ margin: 10px 0; font-size: 0.75em; color: green; text-decoration: none; } .box form .links a:hover{ color: rgb(128, 64, 0); } .box form input[type="submit"] { border: none; outline: none; padding: 9px 25px; background: yellow; cursor: pointer; font-size:0.9em ; font-weight: 600; border-radius: 4px; width:100px; margin-top: 10px; } .box form input[type="submit"]:active{ opacity: 0.8; }
document.addEventListener("DOMContentLoaded", function () { var loginForm = document.querySelector("form"); loginForm.addEventListener("submit", function (event) { event.preventDefault(); var usernameInput = document.querySelector('input[type="text"]'); var passwordInput = document.querySelector('input[type="password"]'); var username = usernameInput.value; var password = passwordInput.value; console.log("Username:", username); console.log("Password:", password); }); });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sign.css"> <title>SignIn-Form</title> </head> <body> <div class="box"> <span class="borderline"></span> <form> <h2>Sign In</h2> <div class="inputbox"> <input type="text" required="required"> <span id="username">Username</span> <i></i> </div> <div class="inputbox"> <input type="password" required="required"> <span>Password</span> <i></i> </div> <div class="links"> <a href="#">Forget Password</a> <a href="#">Sign Up</a> </div> <input onclick="validation();" type="submit" value="Login"> </form> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #23242a; } .box { position: relative; width: 380px; height: 420px; background: #1c1c1c; border-radius: 8px; overflow: hidden; } .box::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; } .box::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: 3s; } .borderline{ position: absolute; top: 0; inset: 0; } .borderline::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, orange, orange, orange); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay:-1.5s ; } .borderline::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, transparent, orange, orange, orange); z-index: 1; transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay:-4.5s ; } @keyframes animate { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } .box form{ position: absolute; inset: 4px; background: #222; padding: 50px 40px; border-radius: 8px; z-index: 2; display: flex; flex-direction: column; } .box form h2{ color:#fff ; font-weight:500 ; text-align:center ; letter-spacing: 0.1em; } .box form .inputbox{ position: relative; width: 300px; margin-top: 35px; } .box form .inputbox input{ position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; border: none; outline: none; box-shadow: none; color: white; font-size: 1em; letter-spacing: 0.05em; transition: 0.5s; z-index: 10; } .box form .inputbox span{ position: absolute; left: 0; pointer-events: none; padding: 20px 0px 10px; color:red; font-size: 1em; letter-spacing: 0.05em; transition: 0.5s; } .box form .inputbox input:valid ~ span, .box form .inputbox input:focus ~ span{ color:blue; font-size: 0.75em; transform: translateY(-34px); } .box form .inputbox i{ position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: goldenrod; border-radius: 4px; overflow: hidden; transition: 0.5s; pointer-events: none; } .box form .inputbox input:valid~i, .box form .inputbox input:valid~i{ height: 44px; } .box form .links{ display: flex; justify-content: space-between; } .box form .links a{ margin: 10px 0; font-size: 0.75em; color: green; text-decoration: none; } .box form .links a:hover{ color: rgb(128, 64, 0); } .box form input[type="submit"] { border: none; outline: none; padding: 9px 25px; background: yellow; cursor: pointer; font-size:0.9em ; font-weight: 600; border-radius: 4px; width:100px; margin-top: 10px; } .box form input[type="submit"]:active{ opacity: 0.8; }
document.addEventListener("DOMContentLoaded", function () { var loginForm = document.querySelector("form"); loginForm.addEventListener("submit", function (event) { event.preventDefault(); var usernameInput = document.querySelector('input[type="text"]'); var passwordInput = document.querySelector('input[type="password"]'); var username = usernameInput.value; var password = passwordInput.value; console.log("Username:", username); console.log("Password:", password); }); });