Amazing Transparent Login Form using HTML CSS & Javascript



Xin chào các bạn, hôm nay DevForum chia sẻ cho các bạn cách tạo Biểu mẫu đăng nhập thú vị với hình thức Hiển thị mật khẩu hoặc Ẩn tùy chọn trong HTML CSS & JavaScript.

1. HTML

<div class="bg-img">
		<div class="content">
			<header>Login Form</header>
			<form action="#">
				<div class="field">
					<span class="fa fa-user"></span>
					<input type="text" required placeholder="Email or Phone">
				</div>
				<div class="field space">
					<span class="fa fa-lock"></span>
					<input type="password" class="pass-key" required placeholder="Password">
					<span class="show">SHOW</span>
				</div>
				<div class="pass">
					<a href="#">Forgot Password?</a>
				</div>
				<div class="field">
					<input type="submit" value="LOGIN">
				</div>
			</form>
			<div class="login">
			Or login with</div>
			<div class="links">
				<div class="facebook">
					<i class="fab fa-facebook-f"><span>Facebook</span></i>
				</div>
				<div class="instagram">
					<i class="fab fa-instagram"><span>Instagram</span></i>
				</div>
			</div>
			<div class="signup">
				Don't have account?
				<a href="#">Signup Now</a>
			</div>
		</div>
	</div>

2. CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			user-select: none;
		}
		.bg-img{
			background: url('https://devforum.info/DEMO/LoginForm2/bg.jpg');
			height: 100vh;
			background-size: cover;
			background-position: center;
		}
		.bg-img:after{
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba(0,0,0,0.7);
		}
		.content{
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 999;
			text-align: center;
			padding: 60px 32px;
			width: 370px;
			transform: translate(-50%,-50%);
			background: rgba(255,255,255,0.04);
			box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
		}
		.content header{
			color: white;
			font-size: 33px;
			font-weight: 600;
			margin: 0 0 35px 0;
			font-family: 'Montserrat',sans-serif;
		}
		.field{
			position: relative;
			height: 45px;
			width: 100%;
			display: flex;
			background: rgba(255,255,255,0.94);
		}
		.field span{
			color: #222;
			width: 40px;
			line-height: 45px;
		}
		.field input{
			height: 100%;
			width: 100%;
			background: transparent;
			border: none;
			outline: none;
			color: #222;
			font-size: 16px;
			font-family: 'Poppins',sans-serif;
		}
		.space{
			margin-top: 16px;
		}
		.show{
			position: absolute;
			right: 13px;
			font-size: 13px;
			font-weight: 700;
			color: #222;
			display: none;
			cursor: pointer;
			font-family: 'Montserrat',sans-serif;
		}
		.pass-key:valid ~ .show{
			display: block;
		}
		.pass{
			text-align: left;
			margin: 10px 0;
		}
		.pass a{
			color: white;
			text-decoration: none;
			font-family: 'Poppins',sans-serif;
		}
		.pass:hover a{
			text-decoration: underline;
		}
		.field input[type="submit"]{
			background: #3498db;
			border: 1px solid #2691d9;
			color: white;
			font-size: 18px;
			letter-spacing: 1px;
			font-weight: 600;
			cursor: pointer;
			font-family: 'Montserrat',sans-serif;
		}
		.field input[type="submit"]:hover{
			background: #2691d9;
		}
		.login{
			color: white;
			margin: 20px 0;
			font-family: 'Poppins',sans-serif;
		}
		.links{
			display: flex;
			cursor: pointer;
			color: white;
			margin: 0 0 20px 0;
		}
		.facebook,.instagram{
			width: 100%;
			height: 45px;
			line-height: 45px;
			margin-left: 10px;
		}
		.facebook{
			margin-left: 0;
			background: #4267B2;
			border: 1px solid #3e61a8;
		}
		.instagram{
			background: #E1306C;
			border: 1px solid #df2060;
		}
		.facebook:hover{
			background: #3e61a8;
		}
		.instagram:hover{
			background: #df2060;
		}
		.links i{
			font-size: 17px;
		}
		i span{
			margin-left: 8px;
			font-weight: 500;
			letter-spacing: 1px;
			font-size: 16px;
			font-family: 'Poppins',sans-serif;
		}
		.signup{
			font-size: 15px;
			color: white;
			font-family: 'Poppins',sans-serif;
		}
		.signup a{
			color: #3498db;
			text-decoration: none;
		}
		.signup a:hover{
			text-decoration: underline;
		}

3. JAVASCRIPT

/*Chèn Fontawesome dô nghen:  https://kit.fontawesome.com/a076d05399.js*/

Như bạn đã biết, Biểu mẫu đăng nhập là một bộ thông tin đăng nhập được sử dụng để xác thực người dùng. Thông thường, chúng bao gồm tên người dùng và mật khẩu. Tuy nhiên, thông tin đăng nhập có thể bao gồm các thông tin khác, chẳng hạn như số PIN, Mật mã hoặc Cụm mật khẩu. Một số thông tin đăng nhập yêu cầu số nhận dạng sinh trắc học, chẳng hạn như quét vân tay hoặc quét võng mạc.

Biểu mẫu đăng nhập được sử dụng bởi các trang web, ứng dụng máy tính và ứng dụng di động. Chúng là một biện pháp bảo mật được thiết kế để ngăn chặn truy cập trái phép vào dữ liệu bí mật. Khi đăng nhập thất bại (nghĩa là, kết hợp tên người dùng và mật khẩu không khớp với tài khoản người dùng), người dùng không được phép truy cập. Nhiều hệ thống chặn người dùng thậm chí cố gắng đăng nhập sau nhiều lần đăng nhập thất bại.

Như bạn có thể thấy trong hình, đây là một hình thức đăng nhập trong suốt thú vị. Đây là một trong suốt tuyệt vời, phong cách và hấp dẫn.

Hôm nay bạn sẽ học cách tạo Trang đăng nhập tuyệt vời bằng hình ảnh và hoạt hình bằng HTML CSS và Javascript. Về cơ bản, Javascript chỉ được sử dụng để hiển thị và ẩn mật khẩu khi người dùng nhấp vào. Trong hình ảnh, có một hình ảnh, một hình thức, một số văn bản và một số biểu tượng phương tiện truyền thông xã hội. Bạn có thể sửa đổi biểu mẫu này theo yêu cầu của bạn nếu bạn có kiến ​​thức cơ bản về HTML CSS.

Đây chỉ là một hình thức đăng nhập mà không có bất kỳ tích hợp phụ trợ nào. Bạn có thể sử dụng ngôn ngữ PHP để làm việc với hình thức này trong phần phụ trợ.

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.