CÁCH THỨC - Đăng ký Mẫu
Tìm hiểu cách tạo biểu mẫu đăng ký bằng CSS.
Đăng ký
Vui lòng điền vào biểu mẫu này để tạo một tài khoản.
Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi .
Bạn co săn san để tạo một tai khoản? Đăng nhập
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 về điều này trong hướng dẫn PHP của chúng tôi . Sau đó, thêm đầu vào (có nhãn phù hợp) cho mỗi trường:
Thí dụ
<form action="action_page.php">
<div
class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password"
placeholder="Enter Password" name="psw" id="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input
type="password" placeholder="Repeat Password" name="psw-repeat"
id="psw-repeat" required>
<hr>
<p>By creating an account you agree to
our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already
have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
Bước 2) Thêm CSS:
Thí dụ
* {box-sizing: border-box}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
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;
}
/* Overwrite default styles of hr */
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a
style for the submit/register button */
.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;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the
text of the "sign in" section */
.signin {
background-color:
#f1f1f1;
text-align: center;
}
Mẹo: Đi tới Hướng dẫn về Biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.
Mẹo: Đi tới Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu.