thực hành - tạo form đăng nhập

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

Form đăng nhập

Click vào nút "Login" bên dưới để hiển thị modal đăng nhập.

Cách tạo một Form modal đăng nhập

Bước 1) Thêm HTML:

Ví dụ

<button class="login">Login</button>
<div class="containerx">
    <div class="form">
        <span id="closex" title="Close form">&times;</span>
        <form class="form-login">
            <div class="image">
                <img src="/thuc-hanh/images/fade-xuka-avatar.jpg" alt="xuka" />
            </div>
            <div class="div">
                <label for="input1">Username</label>
                <input class="input" id="input1" type="text" placeholder="Nhập Username" />
            </div>
            <div class="div">
                <label for="input2">Password</label>
                <input class="input" id="input2" type="password" placeholder="Nhập Password" />
            </div>
            <div>
                <button type="button" class="button">Login</button>
            </div>
            <div class="check">
                <input type="checkbox" checked="checked" /> <span>Remember me</span>
            </div>
            <div class="foot">
                <button type="button" class="cancelbtn">Cancel</button>
                <span>Forgot <a href="#">password?</a></span>
            </div>
        </form>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho nút login */
.login {
    border:none;
    outline:none;
    padding:10px 20px;
    background-color:dodgerblue;
    color:white;
    font-size:18px;
    border-radius:5px;    
    cursor:pointer;
}
/* Thêm hiệu ứng khi hover */
.login:hover {
    background-color:red;    
}
/* Tạo kiểu cho vùng chứa chính */
.containerx {
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:black;
    background-color:rgba(0,0,0,0.2);
    display:none;    
}
/* Tạo kiểu cho phần từ chứa thẻ img */
.containerx .form .form-login .image {
    width:200px;
    height:200px;
    margin:auto;    
}
/* Tạo kiểu cho thẻ img */
.containerx .form .form-login .image img {
    width:100%;
    height:100%;
    border-radius:50%;    
}
/* Tạo kiều cho vùng chứa form đăng nhập */
.containerx .form {
    width:500px;
    padding:20px;
    background-color:white;
    box-shadow:0px 0px 4px 4px rgba(0,0,0,0.2);
    margin:50px auto;
    animation:formlogin 1s;
}
/* Các nhãn chữ */
.containerx .form .form-login .div label {
    font-weight:bold;
    margin-bottom:5px;    
    display:inline-block;
}
/* Tạo kiểu cho thẻ input */
.containerx .form .form-login .div .input {
    width:100%;    
    height:30px;
    outline:none;
    border:1px solid gray;
    margin-bottom:20px;
}
/* Thêm hiệu ứng khi thẻ input lấy tiêu điểm */
.containerx .form .form-login .div .input:focus {
    box-shadow:0px 0px 1px 1px royalblue;    
}
/* Tạo kiểu cho nút login */
.containerx .form .form-login .button {
    border:none;
    outline:none;
    text-align:center;
    padding:10px;
    width:100%;    
    background-color:dodgerblue;
    color:white;
    font-size:18px;
    cursor:pointer;
}
/* Thêm hiệu ứng khi hover */
.containerx .form .form-login .button:hover {
    background-color:red;    
}
/* Vùng chứa nút check */
.containerx .form .form-login .check {
    margin:20px 0;    
}
/* Màu xanh da trời khi tick check */
.containerx .form .form-login .check input {
    color:blue;    
}
/* Tạo kiểu cho vùng chứa nút cancel */
.containerx .form .form-login .foot {
    padding:20px;    
    background-color:#f1f1f1;
}
/* Tạo kiểu cho nút cancel */
.containerx .form .form-login .foot .cancelbtn {
    border:none;
    outline:none;
    padding:15px 20px;
    border-radius:5px;
    color:white;
    background-color:red;
    cursor:pointer;
    font-size:18px;    
}
/* Thêm hiệu ứng khi hover */
.containerx .form .form-login .foot .cancelbtn:hover {
    background-color:dodgerblue;    
}
/* Dòng chữ quên password */
.containerx .form .form-login .foot span {
    float:right;
    display:inline-block;
    padding:15px 20px;
    font-size:18px;    
}
.containerx .form .form-login .foot span a {
    color:black;    
}
/* Tạo kiểu cho nút close modal */
.containerx .form #closex {
    font-size:40px;
    cursor:pointer;
    margin-left:90%;
    display:inline-block;
    padding:0 20px;    
}
/* Thêm hiệu ứng khi hover */
.containerx .form #closex:hover {
    color:red;
    background-color:#ccc;    
}
/* Định nghĩa hiệu ứng animation */
@keyframes formlogin {
    from { transform:scale(0);}
    to { transform:scale(1);}    
}
/* Thay đổi cách hiển thị khi màn hình nhỏ hơn 700px */
@media screen and (max-width: 700px) {
    .containerx .form {
        width:100%;    
    }
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>

// Khai báo các biến
var login, closex, cancelbtn, containerx;

// Lấy giá trị các phần tử
containerx = document.getElementsByClassName('containerx')[0];
login = document.getElementsByClassName('login')[0];
closex = document.getElementById('closex');
cancelbtn = document.getElementsByClassName('cancelbtn')[0];

// Gán hành động mở modal khi click lên nút login
login.onclick = function() {
    containerx.style.display = "block";    
}

// Gán hành động đóng modal khi click lên nút closex
closex.onclick = function() {
    containerx.style.display = "none";    
}

// Gán hành động đóng modal khi click lên nút cancel
cancelbtn.onclick = function() {
    containerx.style.display = "none";    
}

// Gán hành động đóng modal khi click bên ngoài form đăng nhập
window.onclick = function(e) {
    if(e.target == containerx) {
        containerx.style.display = "none";    
    }
}
</script>