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

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 bộ điều khiển nhập cho mỗi trường (và các thẻ mô tả phù hợp):

<form action="action_page.php">
  <div class="container">
    <h1>Đăng ký</h1>
    <p>Điền vào biểu mẫu này để tạo tài khoản.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Nhập email" name="email" id="email" required>
    <label for="psw"><b>Mật khẩu</b></label>
    <input type="password" placeholder="Nhập mật khẩu" name="psw" id="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" id="psw-repeat" required>
    <hr>
    <p>Bằng cách tạo tài khoản, bạn đồng ý với <a href="#">Điều khoản & Quyền riêng tư</a> của chúng tôi.</p>
    <button type="submit" class="registerbtn">Đăng ký</button>
  </div>
  <div class="container signin">
    <p>Đã có tài khoản? <a href="#">Đăng nhập</a>.</p>
  </div>
</form>

Bước 2 - Thêm CSS:

* {box-sizing: border-box}
/* Thêm lề trong bộ chứa */
.container {
  padding: 16px;
}
/* Điền trường input toàn 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;
}
/* Bỏ qua樣式 mặc định của hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Đặt樣式 cho nút gửi/đăng ký */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* Đặt màu văn bản cho liên kết */
a {
  color: dodgerblue;
}
/* Đặt màu nền xám cho phần “Đăng nhập” và căn giữa văn bản */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

Thử ngay

Trang liên quan

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

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