thực hành - form login trên NAV

Trong bài thực hành này. chúng ta sẽ tìm hiểu cách tạo một form đăng nhập trên thanh menu bar bằng HTML, CSS và JavaScript.

Form login trên thanh NAV

Home Contact About

Xem kết quả

Cách tạo một form login trên thanh NAV

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <a class="links" href="#">Home</a>
    <a class="links" href="#">Contact</a>
    <a class="links" href="#">About</a>
    <div class="login">
        <form action="/action_page.php" method="post">
            <input type="text" placeholder="Username" required="required" />
            <input type="password" placeholder="Password" required="required" />
            <button type="submit">Login</button>
        </form>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa thanh NAV bar */
.containerx {
    overflow:hidden;
    background-color:#ccc;
    border-radius:5px;    
}
/* Tạo kiểu cho các liên kết */
.containerx > a {
    display:block;
    float:left;
    padding:16px 20px;
    text-decoration:none;
    color:black;    
}
/* Thêm hiệu ứng khi hover */
.containerx > a:hover:not(.active) {
    background-color:red;
    color:white;    
}
/* Vùng chứa form bố cục sang phải */
.containerx > .login {
    float:right;
    margin-top:8px;
    margin-right:15px;
}
/* Tạo kiểu cho các thẻ input */
form > input {
    border:none;
    padding:8px;
    width:150px;
    border-radius:5px;
}
/* Tạo kiểu cho nút button */
form > button {
    border:none;
    outline:none;
    padding:8px 15px;
    background-color:dodgerblue;    
    color:white;
    border-radius:5px;
    cursor:pointer;
}
/* Thêm hiệu ứng khi hover */
form > button:hover {
    background-color:orange;    
}
/* Lớp kích hoạt */
.containerx > .active {
    background-color:green;
    color:white;    
}
/* Thay đổi cách hiển thị khi màn hình nhỏ hơn 700px */
@media screen and (max-width:700px) {
    .containerx > a, .containerx > .login {
        float:none;
        width:100%;    
    }
    .containerx > .login {
        margin:0;
        padding:0 5px;    
    }
    form > input, form > button {
        width:100%;
        display:block;
        border-radius:0;
        margin-bottom:5px;
    }
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>

// Thay đổi lớp active khi người dùng click chuột vào các liên kết
var i, links;
links = document.getElementsByClassName('links');
for(i = 0; i < links.length; i++) {
    links[i].onclick = function() {
        for(var j = 0; j < links.length; j++) {
            links[j].classList.remove("active");
        }
        this.classList.add("active");    
    }
}

// Tự động click vào liên kết đầu tiên
links[0].click();

</script>