thực hành - tạo form đăng ký

Trong bài thực hành này, chúng ta sẽ tạo một form đăng ký đơn giản bằng HTML và CSS.

Form đăng ký đơn giản

Cách tạo một form đăng ký đơn giản

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <div class="header">
        <h1>Register</h1>
        <p>Vui lòng điền đầy đủ thông tin để tạo tài khoản</p>
    </div>
    <div class="form">
        <form action="/action_page.php" method="post">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Enter email" required="required" />
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Enter password" required="required" />
            <label for="rppassword">Nhập lại password</label>
            <input type="password" id="rppassword" name="rppassword" placeholder="Nhập lại password" required="required" />
            <p>By creating an account, you agree to our <a href="javascript:void(0)">terms & privacy</a></p>
            <button type="submit">Register</button>
        </form>
    </div>
    <div class="footer">
        <p>Already have an account? <a href="javascript:void(0)">Sign in</a></p>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho phần tiêu đề */
.containerx .header {
    padding:20px;
    border:2px solid #ddd;
    border-radius:5px 5px 0px 0px;    
}
/* Tạo kiểu cho phần nội dung form chính */
.containerx .form {
    padding:20px;
    border:2px solid #ddd;
    border-top:none;    
}
/* Tạo kiểu cho các phần tử label */
.form form > label {
    display:inline-block;
    margin-bottom:5px;    
    font-weight:bold;
}
/* Tạo kiểu cho các phần tử input */
.form form > input {
    display:block;
    width:100%;
    border:none;
    padding:15px 10px;
    margin-bottom:20px;
    background-color:#f1f1f1;
    border-radius:5px;    
}
/* Thêm hiệu ứng khi được lấy nét */
.form form > input:focus {
    outline:none;
    box-shadow:0px 0px 1px 1px blue;    
}
/* Tạo kiểu cho phần tử button */
.form form > button {
    border:none;
    outline:none;
    text-align:center;
    padding:20px 0;
    color:white;
    background-color:royalblue;
    border-radius:5px;
    width:100%;    
    cursor:pointer;
}
/* Thêm hiệu ứng khi hover */
.form form > button:hover {
    background-color:red;    
}
/* Tạo kiểu cho phần chân trang */
.containerx .footer {
    padding:10px 0;
    text-align:center;
    background-color:#f1f1f1;
    border:2px solid #ddd;
    border-top:none;
    border-radius:0px 0px 5px 5px;    
}