Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Login Page Bằng HTML CSS

Tạo Login Page Bằng HTML CSS


Ngày 19 Tháng 11 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo trang đăng nhập cho trang web bằng HTML CSS nhé!


Tạo Cấu Trúc Cho Login Page

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Font Awesome v4.7 và Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Trang Login</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>

Thêm Các Thẻ Cần Thiết Cho Trang Đăng Nhập

Trong phần này chúng ta sẽ thêm các thẻ HTML cần thiết để tạo trang login bằng đoạn mã dưới đây nhé:

HTML

<section>
    <!--Bắt Đầu Phần Hình Ảnh-->
    <div class="img-bg">
        <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/tao_trang_dang_nhap/hinh_anh_minh_hoa.jpg" alt="Hình Ảnh Minh Họa">
    </div>
    <!--Kết Thúc Phần Hình Ảnh-->
    <!--Bắt Đầu Phần Nội Dung-->
    <div class="noi-dung">
        <div class="form">
            <h2>Trang Đăng Nhập</h2>
            <form action="">
                <div class="input-form">
                    <span>Tên Người Dùng</span>
                    <input type="text" name="">
                </div>
                <div class="input-form">
                    <span>Mật Khẩu</span>
                    <input type="password" name="">
                </div>
                <div class="nho-dang-nhap">
                    <label><input type="checkbox" name=""> Nhớ Đăng Nhập</label>
                </div>
                <div class="input-form">
                    <input type="submit" value="Đăng Nhập">
                </div>
                <div class="input-form">
                    <p>Bạn Chưa Có Tài Khoản? <a href="#">Đăng Ký</a></p>
                </div>
            </form>
            <h3>Đăng Nhập Bằng Mạng Xã Hội</h3>
            <ul class="icon-dang-nhap">
                <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                <li><i class="fa fa-google" aria-hidden="true"></i></li>
                <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
            </ul>
        </div>
    </div>
    <!--Kết Thúc Phần Nội Dung-->
</section>

Kết quả bạn xem hình ảnh dưới đây nhé:

Trang Login 1

Thiết Lập Vị Trí Hình Ảnh Và Nội Dung Trong Trang Web

Trong phần này chúng ta sẽ thiết lập lại vị trí, độ rộng, chiều cao của phần hình ảnh và nội dung trong trang web bằng đoạn mã CSS sau đây nhé:

CSS

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
section{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}
section .img-bg{
    position: relative;
    width: 50%;
    height: 100%;
}
section .img-bg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Và kết quả bạn xem hình dưới đây nhé:

Trang Login 2

Thiết Lập Vị Trí Phần Tử Trong Phần Nội Dung

Trong phần này chúng ta sẽ đi vào thiết lập vị trí của form nằm chính giữa trong phần nội dung và trang trí lại tiêu đề h2 cho trang login bằng đoạn mã dưới đây nhé:

CSS

section .noi-dung{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}
section .noi-dung .form{
    width: 50%;
}
section .noi-dung .form h2{
    color: #607d8b;
    font-weight: 500;
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 4px solid #ff4584;
    display: inline-block;
    letter-spacing: 1px;
}

Và kết quả bạn xem hình bên dưới nhé:

Trang Login 3

Thiết Lập Style Cho Các Ô Input

Trong phần tiếp theo này chúng ta sẽ cùng nhau đi vào thiết lập style cho các ô input để nó trong cuốn hút và hấp dẫn hơn nhé:

CSS

section .noi-dung .form .input-form{
    margin-bottom: 20px;
}
section .noi-dung .form .input-form span{
    font-size: 16px;
    margin-bottom: 5px;
    display: inline-block;
    color: #607db8;
    letter-spacing: 1px;
     }
section .noi-dung .form .input-form input{
    width: 100%;
    padding: 10px 20px;
    outline: none;
    border: 1px solid #607d8b;
    font-size: 16px;
    letter-spacing: 1px;
    color: #607d8b;
    background: transparent;
    border-radius: 30px;
     }
section .noi-dung .form .input-form input[type="submit"]{
    background: #ff4584;
    color: #fff;
    outline: none;
    border: none;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
                0 2px 2px rgba(0,0,0,0.12),
                0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}
section .noi-dung .form .input-form input[type="submit"]:hover{
    background: #f53677;
}
section .noi-dung .form .nho-dang-nhap{
    margin-bottom: 10px;
    color: #607d8b;
    font-size: 14px;
}
section .noi-dung .form .input-form p{
    color: #607d8b;
}
section .noi-dung .form .input-form p a{
    color: #ff4584;
}

Kết quả bạn xem bên dưới nha:

Trang Login 4

Thiết Lập Style Cho Icon Trong Login Page

Trong phần này chúng ta sẽ đi vào thiết lập style cho phần icon-dang-nhap như vị trí, màu sắc cho từng icon, kích thước icon... Và để hiểu rõ hơn bạn xem đoạn mã sau nhé:

CSS

section .noi-dung .form h3{
    color: #607d8b;
    text-align: center;
    margin: 80px 0 10px;
    font-weight: 500;
}
section .noi-dung .form .icon-dang-nhap{
    display: flex;
    justify-content: center;
    align-items: center;
}
section .noi-dung .form .icon-dang-nhap li{
    list-style: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section .noi-dung .form .icon-dang-nhap li:nth-child(1){
    color: #3b5999;
}
section .noi-dung .form .icon-dang-nhap li:nth-child(2){
    color: #dd4b39;
}
section .noi-dung .form .icon-dang-nhap li:nth-child(3){
    color: #55acee;
}
section .noi-dung .form .icon-dang-nhap li i{
    font-size: 24px;
}

Kết quả bạn xem hình ảnh bên dưới nhé:

Trang Login 5

Reponsive Cho Trang Login Page

Trong phần cuối cùng chúng ta sẽ dử dụng @media để responsive trang đăng nhập giúp nó hiển thị tốt hơn trên màn hình điện thoại nhé:

CSS

@media (max-width: 768px){
    section .img-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    section .noi-dung{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    section .noi-dung .form{
        width: 100%;
        padding: 40px;
        background: rgba(255 255 255 / 0.9);
        margin: 50px;
    }
    section .noi-dung .form h3{
        color: #607d8b;
        text-align: center;
        margin: 30px 0 10px;
        font-weight: 500;
    }
}

Kết quả bạn xem hình ảnh bên dưới nhé:

Trang Login 6

Nếu bạn muốn xem dự án trên Codepen thì có thể truy cập đường dẫn bên dưới nha:

Nguồn Codepen

Nếu bạn muốn tải dự án thì có thể truy cập đường dẫn bên dưới nhé:

Nguồn Source

Nếu bạn muốn xem thêm các ví dụ khác về login page thì hãy truy cập đường dẫn sau nhé:

Form Đăng Ký Đăng Nhập Snippet trong Bootstrap

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức tạo login pagedành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!