[Lab Javascript] – Mẫu form đăng ký và đăng nhập đơn giản sử dụng css và javascript.

Chào mừng các bạn đến với bài viết mới của chúng tôi về lập trình JavaScript. Trong bài viết này, chúng tôi muốn giới thiệu đến các bạn một mẫu form đăng ký và đăng nhập đơn giản sử dụng CSS và JavaScript.

Có thể bạn quan tâm

Contents

1 Video học lập trình mỗi ngày
2 index.html
3 CSS
4 JavaScript
5 Kết luận

Video học lập trình mỗi ngày

Chỉ với vài dòng code CSS và JavaScript, chúng tôi đã tạo ra một mẫu form đăng ký và đăng nhập độc đáo. Chúng tôi tin rằng đây là một tài liệu tham khảo hữu ích cho bạn trong quá trình xây dựng giao diện đăng ký và đăng nhập cho trang web của mình.

Bạn đang xem: [Lab Javascript] – Mẫu form đăng ký và đăng nhập đơn giản sử dụng css và javascript.

Xem thêm : [MTD là gì?] Những ý nghĩa thú vị ẩn sau từ MTD có thể bạn chưa biết

Để xem demo của mẫu form, bạn có thể truy cập đường dẫn này.

Một số vấn đề lý luận về mô hình truyền thông

index.html

Form Đăng ký/Đăng nhập


  
    
      Tạo tài khoản
      
        
        
        
      
      hoặc sử dụng email để đăng ký
      
      
      
      
    
  
  
    
      Đăng nhập
      
        
        
        
      
      hoặc sử dụng tài khoản
      
      
      Quên mật khẩu?
      
    
  
  
    
      
        Chào mừng trở lại!
        Hãy đăng nhập để tiếp tục sử dụng dịch vụ của chúng tôi
        
      
      
        Chào bạn bè!
        Hãy nhập thông tin cá nhân của bạn và bắt đầu hành trình cùng chúng tôi

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
  box-sizing: border-box;
}

body {
  background: #f6f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  margin: -20px 0 50px;
}

h1 {
  font-weight: bold;
  margin: 0;
}

h2 {
  text-align: center;
}

p {
  font-size: 14px;
  font-weight: 100;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
}

span {
  font-size: 12px;
}

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

button {
  border-radius: 20px;
  border: 1px solid #FF4B2B;
  background-color: #FF4B2B;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  background-color: transparent;
  border-color: #FFFFFF;
}

form {
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 50px;
  height: 100%;
  text-align: center;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 100%;
}

.container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.right-panel-active .sign-in-container {
  transform: translateX(100%);
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.container.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: show 0.6s;
}

@keyframes show {
  0%, 49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%, 100% {
    opacity: 1;
    z-index: 5;
  }
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.overlay {
  background: #FF416C;
  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
  background: linear-gradient(to right, #FF4B2B, #FF416C);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #FFFFFF;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #DDDDDD;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
}

footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999;
}

footer p {
  margin: 10px 0;
}

footer i {
  color: red;
}

footer a {
  color: #3c97bf;
  text-decoration: none;
}

JavaScript

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
  container.classList.add('right-panel-active');
});

signInButton.addEventListener('click', () => {
  container.classList.remove('right-panel-active');
});

Kết luận

Dù bạn là một lập trình viên chuyên về lĩnh vực nào, đây đều là một ví dụ rất đáng để xem và tham khảo. Hy vọng rằng bài viết này đã cung cấp cho bạn những kiến thức hữu ích và gợi ý cho công việc phát triển giao diện dựa trên HTML, CSS và JavaScript.

Nếu bạn quan tâm, hãy truy cập Fanpage của chúng tôi: TIPJS (tip javascript).

Xem thêm : Bài tập HTML CSS làm giao diện trang web mẫu

[Ref-Source: Originally published at www.florin-pop.com.]

Demo