Animated 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

							
Login Form
SHOW
Or login with

2. CSS

							@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  border-radius: 5px;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
  justify-content: center;
  background: url(https://devforum.info/DEMO/LoginForm1/bg.jpg);
  background-size: cover;
  background-position: center;
}
.container{
  position: relative;
  width: 400px;
  background: white;
  padding: 60px 40px;
}
header{
  font-size: 40px;
  margin-bottom: 60px;
  font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
  margin: 25px 0;
  position: relative;
  height: 50px;
  width: 100%;
}
.input-field input{
  height: 100%;
  width: 100%;
  border: 1px solid silver;
  padding-left: 15px;
  outline: none;
  font-size: 19px;
  transition: .4s;
}
input:focus{
  border: 1px solid #1DA1F2;
}
.input-field label, span.show{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-field label{
  left: 15px;
  pointer-events: none;
  color: grey;
  font-size: 18px;
  transition: .4s;
}
span.show{
  right: 20px;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
}
input:valid ~ span.show{
  visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
  transform: translateY(-33px);
  background: white;
  font-size: 16px;
  color: #1DA1F2;
}
form .button{
  margin-top: 30px;
  overflow: hidden;
  z-index: 111;
}
.button .inner{
  position: absolute;
  height: 100%;
  width: 300%;
  left: -100%;
  z-index: -1;
  transition: all .4s;
  background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);
}
.button:hover .inner{
  left: 0;
}
.button button{
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.container .auth{
  margin: 35px 0 20px 0;
  font-size: 19px;
  color: grey;
}
.links{
  display: flex;
  cursor: pointer;
}
.facebook, .google{
  height: 40px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 3px;
  margin: 0 10px;
  transition: .4s;
}
.facebook:hover{
  border: 1px solid #4267B2;
}
.google:hover{
  border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
  color: #4267B2;
}
.google i, .google span{
  color: #dd4b39;
}
.links i{
  font-size: 23px;
  line-height: 40px;
  margin-left: -90px;
}
.links span{
  position: absolute;
  font-size: 17px;
  font-weight: bold;
  padding-left: 8px;
  font-family: 'Open Sans', sans-serif;
}
.signup{
  margin-top: 50px;
  font-family: 'Noto Sans', 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. 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.

Trong ảnh, bạn có thể thấy đây là Biểu mẫu đăng nhập hoạt hình với nền gradient. Có một hình ảnh, một hình thức, hai biểu tượng phương tiện truyền thông xã hội và một số văn bản. Bạn có thể sửa đổi hình thức này theo yêu cầu của bạn. Tôi đã sử dụng HTML CSS & JavaScript để tạo Biểu mẫu đăng nhập này. JavaScript chỉ được sử dụng để tạo hiển thị mật khẩu hoặc nút ẩn. Mặt khác, tất cả các thiết kế này, một phong cách dựa trên CSS.

Về cơ bản, trong hình ảnh, không có hiển thị mật khẩu hiển thị hoặc nút ẩn. Nhưng khi bạn nhập một số văn bản vào trường mật khẩu thì nút ẩn hiển thị mật khẩu sẽ xuất hiện. Tôi đã tạo hai nút đăng nhập của Facebook và Google plus chỉ dành cho thiết kế. Không có hành động khi bạn nhấp vào nút đó.

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.