Hướng dẫn form html đẹp

Posted on by mtoplistChuyên mục:Top List

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">
            <h2 class="form-heading">Form đăng nhập</h2>
            <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.

mtoplist