Registration form with Animations

<!DOCTYPE html> <html> <head> <title>Registration</title> </head> <body> <h1>Registration</h1> <form name="reg"> <label for="login">User login</label><br /> <input name="login" id="login" type="login" placeholder="login" ><br /> <label for="password">User password</label><br /> <input name="password" id="password" type="password" placeholder="password" ><br/> <label for="email">Email</label><br/> <input name="email" id="email" type="email" placeholder="email" ><br /> <label for="fname">First Name</label><br /> <input name="fname" id="fname" type="text" placeholder="First Name" ><br /> <label for="sname">Second Name</label><br /> <input name="sname" id="sname" type="text" placeholder="Second Name" > <br /> <input type="submit" onclick="registr()"> </form> </body> </html>

body { background-color:#509; } Label, input{ padding:5px 5px 5px 10px; } H1,label{ color:#fff; } input{ outline:none; Background-color:#509; font-style:italic; Color:#f0f; Border:none; border-bottom:1px solid #f0f; animation: rotate 5s ease-in-out 0.5s alternate, move 5s linear 2s; } input:focus{ border-bottom:4px solid #f00; font-size:20px; transition: .4s ease-out; transition-delay: 0.5s; } H1,Form{ text-align:center; } input[type="submit"]{ Background-color:#f0f; Border:none; color:#fff; margin-top:20px; } @keyframes rotate { 20% { transform: rotateY(30deg); letter-spacing:15px; } 40% { transform: rotateY(60deg); letter-spacing:10px; } 60% { transform: rotateY(90deg); letter-spacing:5px; } 80% { transform: rotateY(180deg); leter-spacing:3px; } }

function registr(){ if(document.reg.login.value!=""&& document.reg.password.value!=""&& document.reg.email.value!=""&& document.reg.sname.value!=""&& document.reg.fname.value!="") alert("yes registration"); }

Registration form with Animations

This is a template of a registration form with animations designed using HTML, CSS, and JavaScript. The input type ‘text' has been used for the text fields. CSS element ‘background-color' is set to the value of #509 color code to implement the background color. The ‘animation' element in CSS has been used to apply animations on the input fields with its values set as rotate 5s ease-in-out 0.5s alternate, move 5s linear 2s. The other CSS styles that are used here would be outlined as none, background color as #509, font style as italic, color as #f0f, border as none and border-bottom as 1px solid #f0f. The values of the input field border-bottom are set as 4px solid #f00, font size as 20px, transition as .4s ease-out and transition-delay as 0.5s on a focus event. A JavaScript function has been created to display a confirmation message and prompt the user to confirm if all the input fields are filled correctly. Source : https://codepen.io/ivanshavliuga/pen/GzXVvY

Web Designer Wall

Web Designer Wall

Registration form with Animations

Registration form with Animations

Registration form with Animations

Post Comment or Questions Cancel reply

Several Related Snippets