Tạo form đăng nhập với html css siêu đẹp

Nếu bạn muốn đi làm với nghề lập trình web chắn chắn sẽ tới một lúc bạn cần tạo ra form đăng nhập đăng ký để cho người dùng login vào hệ thống, trong bài viết này tôi sẽ giúp bạn.

Form đăng nhập – Form login là gì?

Form đăng nhập hay còn gọi là form login là một phần không thể thiếu trong những website có quản lý thành viên. Nó là nơi người dùng nhập thông tin tên đăng nhập (username) và mật khẩu (password) để xác thực và truy cập vào hệ thống bên trong.

Phần xử lý đăng nhập thì bạn sẽ được tôi hướng dẫn chuyên sâu ở chương trình Php Master

Còn bây giờ chúng ta sẽ tìm hiểu cách xây dựng giao diện của nó với Html, Css và Jquery để ẩn và hiển thị mật khẩu người dùng.

Hướng dẫn tạo Form đăng nhập bằng Html Css

Trong video này bạn sẽ được tôi hướng dẫn cách sử dụng html để tạo ra cấu trúc form và sử dụng css để bố cục lên giao diện như mong muốn.

Ngoài ra bạn được hướng dẫn cách để ẩn và hiển thị password trên form giúp người dùng theo tác đăng nhập được dễ dàng hơn. Bạn nhớ theo dõi từng chi tiết nhỏ sau đó ghi chép lại những phần note quan trọng sau đó bạn hãy bắt tay vào thực thi tạo ra form đăng nhập từ đầu tới cuối.

Đây là một video thực tế về lập trình web để đi làm vậy nên tôi muốn bạn hãy chú tâm để học thêm được những tư duy css mà tôi mang đến trong video này.

Quá trình theo dõi nếu có câu hỏi gì bạn cứ để lại ở phần comment tôi sẽ giải thích cho bạn những vướng mắc đó.

Cấu trúc thư mục

index.html
css/
images/
js/

Code Html form login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

    <title>Form login unitop.vn</title>
</head>
<body>
    <div id="wrapper">
        <form action="" id="form-login">
            <h1 class="form-heading">Form đăng nhập</h1>
            <div class="form-group">
                <i class="far fa-user"></i>
                <input type="text" class="form-input" placeholder="Tên đăng nhập">
            </div>
            <div class="form-group">
                <i class="fas fa-key"></i>
                <input type="password" class="form-input" placeholder="Mật khẩu">
                <div id="eye">
                    <i class="far fa-eye"></i>
                </div>
            </div>
            <input type="submit" value="Đăng nhập" class="form-submit">
        </form>
    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/app.js"></script>
</html>

Code Css Form Đăng nhập

body{
    background: url('../images/bg.jpeg');
    background-size: cover;
    background-position-y: -80px;
    font-size: 16px;
}
#wrapper{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#form-login{
    max-width: 400px;
    background: rgba(0, 0, 0 , 0.8);
    flex-grow: 1;
    padding: 30px 30px 40px;
    box-shadow: 0px 0px 17px 2px rgba(255, 255, 255, 0.8);
}
.form-heading{
    font-size: 25px;
    color: #f5f5f5;
    text-align: center;
    margin-bottom: 30px;
}
.form-group{
    border-bottom: 1px solid #fff;
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
}
.form-group i{
    color: #fff;
    font-size: 14px;
    padding-top: 5px;
    padding-right: 10px;
}
.form-input{
    background: transparent;
    border: 0;
    outline: 0;
    color: #f5f5f5;
    flex-grow: 1;
}
.form-input::placeholder{
    color: #f5f5f5;
}
#eye i{
    padding-right: 0;
    cursor: pointer;
}

.form-submit{
    background: transparent;
    border: 1px solid #f5f5f5;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    padding: 6px 10px;
    transition: 0.25s ease-in-out;
    margin-top: 30px;
}
.form-submit:hover{
    border: 1px solid #54a0ff;
}

Code Jquery ẩn hiện mật khẩu

$(document).ready(function(){
    $('#eye').click(function(){
        $(this).toggleClass('open');
        $(this).children('i').toggleClass('fa-eye-slash fa-eye');
        if($(this).hasClass('open')){
            $(this).prev().attr('type', 'text');
        }else{
            $(this).prev().attr('type', 'password');
        }
    });
});

Bạn nhớ hãy theo dõi kỹ video một lượt, ghi ra ý tưởng sau đó mới bắt đầu bắt tay vào thực hành để đạt kết quả tốt nhất. Nếu bạn muốn học để đi làm có thể tham khảo thêm Html Css 21 Ngày để học cách xây dựng giao diện dự án thực tế với Html Css.

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Gỡ triệt để phần mềm Visual Studio Code

Gỡ triệt để phần mềm VSC 1. Mở thư mục cài đặt VSC C:\Users\Name\AppData\Local\Programs\Microsoft VS CodeClick uninstoo.exe để gỡ phần mềm 2. Xoá thư mục

Subscribe
Notify of
guest
4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Trần Bửu
Trần Bửu
16 days ago

Mình không hiểu là cái ID và mật khẩu khi nhập vào nó sẽ lưu ỏ đâu

Trần Bửu
Trần Bửu
14 days ago

cảm ơn bạn

Người dùng html
17 days ago

Hay quá anh

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

4
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x