1660097426
How to Create Login and Registration Form with HTML & CSS
This tutorial shows how to create an animated login and registration form with HTML & CSS. Simply, A login form is used to enter authentication credentials to access a secured page or form. The login form holds a field for the username and another for the password.
Login and Registration Form
To create this form (Login and Registration Form in HTML). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login and Registration Form in HTML | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login Form
</div>
<div class="title signup">
Signup Form
</div>
</div>
<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>
<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="">Signup now</a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
<script>
const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");
signupBtn.onclick = (()=>{
loginForm.style.marginLeft = "-50%";
loginText.style.marginLeft = "-50%";
});
loginBtn.onclick = (()=>{
loginForm.style.marginLeft = "0%";
loginText.style.marginLeft = "0%";
});
signupLink.onclick = (()=>{
signupBtn.click();
return false;
});
</script>
</body>
</html>Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
::selection{
background: #fa4299;
color: #fff;
}
.wrapper{
overflow: hidden;
max-width: 390px;
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
display: flex;
width: 200%;
}
.wrapper .title{
width: 50%;
font-size: 35px;
font-weight: 600;
text-align: center;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
position: relative;
display: flex;
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0;
justify-content: space-between;
border: 1px solid lightgrey;
border-radius: 5px;
}
.slide-controls .slide{
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
font-weight: 500;
text-align: center;
line-height: 48px;
cursor: pointer;
z-index: 1;
transition: all 0.6s ease;
}
.slide-controls label.signup{
color: #000;
}
.slide-controls .slider-tab{
position: absolute;
height: 100%;
width: 50%;
left: 0;
z-index: 0;
border-radius: 5px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
display: none;
}
#signup:checked ~ .slider-tab{
left: 50%;
}
#signup:checked ~ label.signup{
color: #fff;
cursor: default;
user-select: none;
}
#signup:checked ~ label.login{
color: #000;
}
#login:checked ~ label.signup{
color: #000;
}
#login:checked ~ label.login{
cursor: default;
user-select: none;
}
.wrapper .form-container{
width: 100%;
overflow: hidden;
}
.form-container .form-inner{
display: flex;
width: 200%;
}
.form-container .form-inner form{
width: 50%;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.form-inner form .field input{
height: 100%;
width: 100%;
outline: none;
padding-left: 15px;
border-radius: 5px;
border: 1px solid lightgrey;
border-bottom-width: 2px;
font-size: 17px;
transition: all 0.3s ease;
}
.form-inner form .field input:focus{
border-color: #fc83bb;
/* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
color: #999;
transition: all 0.3s ease;
}
form .field input:focus::placeholder{
color: #b3b3b3;
}
.form-inner form .pass-link{
margin-top: 5px;
}
.form-inner form .signup-link{
text-align: center;
margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
color: #fa4299;
text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
text-decoration: underline;
}
form .btn{
height: 50px;
width: 100%;
border-radius: 5px;
position: relative;
overflow: hidden;
}
form .btn .btn-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
border-radius: 5px;
transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
left: 0;
}
form .btn input[type="submit"]{
height: 100%;
width: 100%;
z-index: 1;
position: relative;
background: none;
border: none;
color: #fff;
padding-left: 0;
border-radius: 5px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}Download Codes From Here - https://codingnepalweb.com
#html #css #webdev
1649160871
Flutter UI - Animated Login, Signup Screen UI
Flutter UI - Animated Login, Signup Screen UI
We are going to build it from scratch and understand various widgets that you can use to build an elegant screen. You might have already seen some beautiful screens been designed using flutter. Flutter gives you the flexibility to design your own custom widgets and import them to build sleek designs.
► Timestamps
0:00 Intro
0:30 Project Creation
02:00 Login Screen Configuration
05:00 Animated Container
08:00 Login Screen Design
18:00 Sign Up Screen Design
Click here to Subscribe to https://www.youtube.com/c/TheFlutterandDartAcademy
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single code base. to know more visit flutter.dev
Have questions/queries? 💬 Comment below I will be happy to help
► Playlist: https://youtube.com/playlist?list=PL6vcAuTKAaYchhPbIw979kuHHLtD8q1Bq
► Social Media
GitHub: https://github.com/Punithraaj/Welcome-Login-Signup-Screen-Flutter/tree/concept2
LinkedIn: https://www.linkedin.com/in/roaring-r...
Twitter: https://twitter.com/roaringraaj
Facebook: https://www.facebook.com/flutterdartacademy
Reddit: https://www.reddit.com/r/flutteranddartacademy/
► RESOURCES
Complete Hotel Booking App UI Design Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdboy1OOxnMekOEuRzHUvR6
Complete Tik Tok Clone App Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYe_9KQRsxTsFFSx78g1OluK
Complete Online Books Store Flutter UI Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdRkc_jt08x23plwGAYiGTU
Flutter UI Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYeKyXAwzB9JnuR5l0dOlNRh
Flutter Integration Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdpG5qfCjSEgugvvhqFemes
I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub!
⭐️ Thanks for watching the video and for more updates don't forget to click on the notification.
⭐️Please comment your suggestion for my improvement.
⭐️Remember to like, subscribe, share this video, and star the repo on Github :)
Hope you enjoyed this video! If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj
LIKE & SHARE & ACTIVATE THE BELL Thanks For Watching :-)
#login #signup #flutter #animation #flutterdev #reddit #flutter mobile development #morioh
1649071060
Complete login & register form with email otp verification using PHP, AJAX & MySQL | Malahim Tech
Email Verification using Html, Css, Ajax, Php
#login #ajax #javascript #signup #otp #verification #malahimtech
https://www.youtube.com/watch?v=yo0icoDLQQs
1642495762
How to Create WordPress Registration Form | JetFormBuilder Plugin
Ever wondered how to create and customize registration form in WordPress? Proceed with our tutorial, where we show the step-by-step instructions of building WordPress #signup form manually and using #JetFormBuilder patterns.
💡 Tip. Make sure you have JetFormBuilder and #JetStyleManager installed.
Learn how to:
◼ Build #registration form in WordPress manually by arranging Text, Select, and Submit fields
◼ Select the right Field type in the Field Settings to make everything works smoothly
◼ Mark the necessary fields of your #WordPress registration form as required
◼ Create WordPress signup form in a couple of clicks, using JetFormBuilder patterns
◼ Make the form fields visible for a particular category of users
◼ Use JetStyleManager to fine-tune each form element separately
◼ Apply the necessary Post Submit Actions, which will be performed after the user clicks on the Submit button
◼ Display WordPress registration form in Gutenberg and Elementor, using JetForm block and JetForm widget, respectively
◼ Add the form to popup, applying Shortcode widget Stay updated because more useful tutorials on JetFormBuilder are coming soon!
Get FREE JetFormBuilder ►https://jetformbuilder.com
📄 Check out JetFormBuilder Documentation ► https://jetformbuilder.com/features/wordpress-register-form-creation/
https://www.youtube.com/watch?v=KINepeQ6UBw
1625353080
React Form validation - Doing form Validation in Stepper React Signup form |Email,Password
In this video, I have demonstrated how can you added various validations for your signup form like validating email, password, username, file input, strings,etc all in one video.
-
Project GitHub repo: https://github.com/MeRahulAhire/React-Stepper-Form-Validation
-
Project structure:
https://raw.githubusercontent.com/MeRahulAhire/React-Stepper-Form-Validation/master/Registration_js_Parent_component.png
Tryout the demo site (devlopment stage) of College Facemash : http://cfm-react.s3-website-us-east-1.amazonaws.com/
The whole journey of making facemash: https://www.youtube.com/playlist?list=PL83X-jRLQqGGTDlCmLLzgnLpMY3xo1Nj8
Checkout the other videos of DevTalks: https://www.youtube.com/playlist?list=PL83X-jRLQqGGOXn5eJU_JJTlXUyC3gXQB
Timeline:
0:00 - Project Introduction
4:00 - Inspiration by traversy media
4:30 - Structure of this step form
6:40 - Getting started in vscode
7:00 - CollegeDetail Component
15:13 - Checking numbers
23:07 - UserDetail Component
28:05 - Gender Validation
30:00 - Credential Component
37:05 - Email Validation
40:45 - Username Validation
41:45 - Enter Strong Password
45:45 - Image input Validation
52:27 - Subscribe,Like,Comment,Share
If you have any suggestions, Queries or any though just leave it in comment and I’ll be happy to get back to you
#React #Signup #FormValidation
FIND ME HERE:
facebook: https://facebook.com/MeRahulAhire
Instagram: https://instagram.com/merahulahire
Twitter: https://twitter.com/MeRahulAhire
LinkedIn: https://linkedin.com/in/merahulahire
#signup #formvalidation #react
1594851187
Animated Login and Sign Up App using Flutter 😍
Sharing with you guys a video I uploaded a few days ago about an Animated Login and SignUp made in Flutter 😍
The source code is in the video description. 💻
If you like it, please support me by subscribing to my channel for more content like that. 😎
#flutter #ui #app #login #signup #dart
