Cách tạo: Biểu mẫu đăng ký

Học cách sử dụng CSS để tạo biểu mẫu đăng ký tương tác.

Nhấn nút để mở biểu mẫu đăng ký:

Thử ngay

Cách tạo biểu mẫu đăng ký

Bước 1 - Thêm HTML:

Sử dụng phần tử <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong hướng dẫn PHP của chúng tôi.

Sau đó thêm các điều khiển nhập cho mỗi trường (và có thẻ tiêu đề phù hợp):

<form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Đăng ký</h1>
    <p>Bitte füllen Sie dieses Formular aus, um ein Konto zu erstellen.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Nhập email" name="email" required>
    <label for="psw"><b>Mật khẩu</b></label>
    <input type="password" placeholder="Nhập mật khẩu" name="psw" required>
    <label for="psw-repeat"><b>Nhập lại mật khẩu</b></label>
    <input type="password" placeholder="Nhập lại mật khẩu" name="psw-repeat" required>
    <label>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">Nhớ tôi
    </label>
    <p>Bằng cách tạo tài khoản, bạn đồng ý với <a href="#" style="color:dodgerblue">Điều khoản và Quyền riêng tư</a> của chúng tôi.</p>
    <div class="clearfix">
      <button type="button" class="cancelbtn">Hủy</button>
      <button type="submit" class="signupbtn">Đăng ký</button>
    </div>
  </div>
</form>

Bước 2 - Thêm CSS:

* {box-sizing: border-box}
/* Các trường nhập đầy đủ chiều rộng */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Đặt lại樣式 cho tất cả các nút */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Đặt thêm樣式 cho nút hủy */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* Đặt nút hủy và nút đăng ký trôi nổi và thêm độ rộng bằng nhau */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* Thêm viền trong của phần tử chứa */
.container {
  padding: 16px;
}
/* Xóa chỉ báo */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Thay đổi phong cách của nút hủy bỏ và nút đăng ký trên màn hình siêu nhỏ */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

Thử ngay

Cách tạo biểu mẫu đăng ký modal

Bước 1 - Thêm HTML:

Sử dụng phần tử <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong hướng dẫn PHP của chúng tôi.

Sau đó thêm các điều khiển nhập cho mỗi trường (và có thẻ tiêu đề phù hợp):

<!-- Button to open the modal -->
<button onclick="document.getElementById('id01').style.display='block'">Đăng ký</button>
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Đóng Modal">times;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Đăng ký</h1>
      <p>Bitte füllen Sie dieses Formular aus, um ein Konto zu erstellen.</p>
      <hr>
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Nhập email" name="email" required>
      <label for="psw"><b>Mật khẩu</b></label>
      <input type="password" placeholder="Nhập mật khẩu" name="psw" required>
      <label for="psw-repeat"><b>Nhập lại mật khẩu</b></label>
      <input type="password" placeholder="Nhập lại mật khẩu" name="psw-repeat" required>
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Nhớ tôi
      </label>
      <p>Bằng cách tạo tài khoản, bạn đồng ý với <a href="#" style="color:dodgerblue">Điều khoản và Quyền riêng tư</a> của chúng tôi.</p>
      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Hủy bỏ</button>
        <button type="submit" class="signup">Đăng ký</button>
      </div>
    </div>
  </form>
</div>

Bước 2 - Thêm CSS:

* {box-sizing: border-box}
/* Các trường nhập đầy đủ chiều rộng */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
/* Thêm màu nền khi ô nhập được tập trung */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Đặt lại樣式 cho tất cả các nút */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Đặt thêm樣式 cho nút hủy */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* Làm cho nút hủy và đăng ký trôi nổi và đặt chiều rộng bằng nhau */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* Thêm lề trong cho các yếu tố容器 */
.container {
  padding: 16px;
}
/* Mô đun (bối cảnh) */
.modal {
  display: none; /* Ẩn mặc định */
  position: fixed; /* Dừng lại ở vị trí */
  z-index: 1; /* Đặt trên cùng */
  left: 0;
  top: 0;
  width: 100%; /* Chiều rộng đầy đủ */
  height: 100%; /* Chiều cao đầy đủ */
  overflow: auto; /* Cho phép cuộn nếu cần */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Nội dung/hộp mô hình */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* Cách trên cùng 5%, cách dưới cùng 15% và giữa */
  border: 1px solid #888;
  width: 80%; /* Có thể nhiều hơn hoặc ít hơn, tùy thuộc vào kích thước màn hình */
}
/* Đặt phong cách cho đường thẳng ngang */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Nút đóng (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Xóa nổi */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Thay đổi phong cách của nút hủy bỏ và nút đăng ký trên màn hình siêu nhỏ */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

Lưu ý:Bạn có thể sử dụng mã JavaScript sau để đóng hộp mô hình bằng cách nhấp vào khu vực bên ngoài nội dung hộp mô hình (không chỉ bằng cách sử dụng nút "×" hoặc nút "hủy bỏ"):

<script>
// Lấy mô hình
var modal = document.getElementById('id01');
// Khi người dùng nhấp vào vị trí nào đó ngoài mô hình, hãy đóng nó
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Thử ngay

Trang liên quan

Hướng dẫn:HTML biểu mẫu

Hướng dẫn:CSS biểu mẫu