Tạo một trang đăng ký trong html

Hình ảnh sau đây cho thấy kết quả cuối cùng của những gì chúng ta sẽ xây dựng. Chúng tôi sẽ sử dụng HTML5 để tạo bố cục cơ bản và CSS để tạo kiểu cho bố cục đã tạo

Sau đây là các kiểu tương ứng được cung cấp cho lớp "container". Nói tóm lại, nó sắp xếp tất cả các trường theo chiều dọc thành các hàng và chiếm chiều rộng là 25vw

.container{
    display: flex;
    flex-direction: column;
    width: 25vw;
}
Trình duyệt hiển thị kết quả sau
Tiếp theo chúng ta căn giữa tiêu đề và mô tả vào giữa form như hình bên dưới
h1, p{
    text-align: center;
}
Trình duyệt hiển thị các thay đổi tương ứng như sau

  

Kiểu dáng cơ bản của biểu mẫu gần như đã hoàn tất. Bây giờ, chúng ta có thể thêm phông chữ và khoảng cách cần thiết vào các trường nhập liệu, như hình bên dưới
/* font family is added */
body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  width: 25vw;
}

h1, p {
  text-align: center;
}

/* desired spacing for input fields */
input {
  margin: 0.25em 0em 1em 0em;
}
Đầu ra trình duyệt
Bây giờ, hãy làm đẹp các trường nhập liệu của chúng ta
/* more styles added to beautify the input fields */
input {
  margin: 0.25em 0em 1em 0em;
  outline: none;
  padding: 0.5em;
  border: none;
  background-color: rgb[225, 225, 225];
  border-radius: 0.25em;
  color: black;
}
Cuối cùng, hãy thêm một số kiểu cơ bản vào nút gửi của chúng tôi, bao gồm chức năng di chuột, như được hiển thị bên dưới
/* styles for button */
button {
  padding: 0.75em;
  border: none;
  outline: none;
  background-color: rgb[68, 18, 232];
  color: white;
  border-radius: 0.25em;
}

/* hover functionality for button */
button:hover {
  cursor: pointer;
  background-color: rgb[41, 4, 164];
}
Cuối cùng, chúng tôi đã tạo thành công trang đăng ký và kết quả cuối cùng trong trình duyệt được hiển thị bên dưới
 
Xin chào các bạn, hôm nay trong blog này, bạn sẽ học cách tạo Biểu mẫu đăng nhập và đăng ký hoạt ảnh trong HTML CSS & JavaScript. Trước đó tôi đã chia sẻ nhiều blog về Cách tạo Biểu mẫu Đăng nhập bằng HTML & CSS, nhưng tôi chưa chia sẻ một blog cụ thể nào liên quan đến Biểu mẫu Đăng nhập và Đăng ký trong HTML. Vì vậy, đã đến lúc tạo cái này
Trong Biểu mẫu này [Mẫu đăng nhập và đăng ký trong HTML], trên trang web, có một biểu mẫu đăng nhập và hai nút chuyển đổi ở đầu biểu mẫu có nhãn Đăng nhập và Đăng ký như bạn có thể thấy trong hình ảnh xem trước ở trên
Khi bạn nhấp vào nút đăng ký, biểu mẫu đăng nhập sẽ trượt trơn tru từ bên phải sang bên trái và hiển thị cho bạn biểu mẫu đăng ký
Và một lần nữa sau khi nhấp vào nút đăng nhập, biểu mẫu đăng ký sẽ trượt từ bên trái sang bên phải và hiển thị cho bạn biểu mẫu đăng nhập. Trong biểu mẫu này, cả biểu mẫu đăng nhập và đăng ký đều nằm trên cùng một trang và được thực hiện với một chút mã JavaScript

  

Nếu bạn cảm thấy khó hiểu những gì tôi đang nói, bạn có thể xem video hướng dẫn đầy đủ về biểu mẫu này [Mẫu đăng nhập và đăng ký bằng HTML]
Video hướng dẫn Form đăng nhập và đăng ký bằng HTML
Trong video, bạn đã thấy Biểu mẫu đăng nhập và đăng ký hoạt hình được tạo bằng HTML CSS & JavaScript. Tôi hy vọng bạn đã hiểu các mã cơ bản đằng sau việc tạo biểu mẫu này
Tôi chỉ sử dụng một vài dòng mã JavaScript để hoàn thành biểu mẫu này, vì vậy bạn có thể dễ dàng tạo loại biểu mẫu đăng nhập và đăng ký này bằng HTML ngay cả khi bạn là người mới bắt đầu
JavaScript is used only to slide the form on button click and the toggle tab that slides from login to signup text and signup to login text is wholly based on pure HTML & CSS with the help of HTML  tag.
Nếu bạn thích biểu mẫu đăng nhập này và muốn lấy mã nguồn hoặc tệp, bạn có thể lấy chúng từ cuối trang này

  

bạn có thể thích điều này
Thiết kế biểu mẫu đăng nhập bật lên
Liên hệ với chúng tôi Mẫu thiết kế giao diện người dùng
Biểu mẫu nhiều bước với tiến độ
Xác thực mẫu đăng nhập trong HTML
Biểu mẫu Đăng nhập và Đăng ký bằng HTML [Mã nguồn]
Để tạo biểu mẫu này [Mẫu đăng nhập và đăng ký trong HTML]. Đầu tiên bạn cần tạo 2 File một File HTML và một File CSS. Sau khi hoàn thành các tệp này, hãy dán các mã sau vào tệp của bạn
Đầu tiên, tạo một tệp HTML có tên index. html và dán mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng html
________số 8
Thứ hai, tạo một tệp CSS với tên style. css và dán mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng css
@import url['//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;
}
Vậy là xong, bây giờ bạn đã tạo thành công Biểu mẫu đăng nhập và đăng ký trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi/sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một. zip sẽ được tải xuống sau đó bạn giải nén nó
 

			
Làm cách nào để tạo trang đăng nhập trong HTML?
			
 Mật khẩu.   Đăng nhập
		
			
Làm cách nào để tạo trang đăng nhập bằng HTML và CSS?
			
Các bước thực hiện.  . 
 
Tạo Thư mục dự án và mở nó trong IDE bạn chọn và liên kết HTML với CSS bằng mã bên dưới.  .  
 
Tiếp theo, tạo cấu trúc cho trang đăng nhập bằng HTML.  .  
 
Tiếp theo, chúng tôi sẽ thêm CSS để tạo kiểu cho trang đăng nhập của chúng tôi.  .  
 
Trước khi Áp dụng CSS, đầu ra trông như thế này
 
		
			
Làm cách nào để tạo biểu mẫu nhân viên trong HTML?
			
Tạo biểu mẫu HTML để nhập thông tin chi tiết cơ bản của nhân viên. Để tạo biểu mẫu chi tiết Nhân viên, chúng tôi sẽ  sử dụng kết hợp các thẻ, chẳng hạn như