Biểu mẫu đăng nhập bootstrap 3
Nếu bạn muốn làm việc với sự nghiệp lập trình web, rào cản sẽ hướng tới một thời điểm bạn cần tạo ra biểu mẫu đăng nhập đăng ký để cho phép người dùng đăng nhập vào hệ thống, trong bài viết này tôi sẽ giúp bạn Nội dung chính Hiển thị
Form đăng nhập – Form đăng nhập 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 (tên người dùng) và mật khẩu (mật khẩu) để 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 trong 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 CssTrong video này, bạn sẽ được tôi hướng dẫn cách sử dụng html để tạo biểu mẫu cấu trúc và sử dụng css để bố trí giao diện cục bộ như mong muốn Ngoài ra, bạn được hướng dẫn cách ẩn và hiển thị mật khẩu trên biểu mẫu giúp người dùng theo tác vụ đăng nhập 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 ghi chú quan trọng sau đó bạn hãy bắt tay vào thực thi tạo form đăng nhập từ đầu đến cuối Đây là một video thực tế về lập trình web để đi làm như vậy nên tôi muốn bạn hãy chú ý để học hỏi 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 bình luận tôi sẽ giải thích cho bạn những bộ quần áo bó sát đó Constructor directory chỉ mục. html Mã đăng nhập biểu mẫu Html
Code Css Form Đăng nhậpbody{
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;
}Mã 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');
}
});
});
Các bạn nhớ theo dõi kỹ video một lượt ghi ra ý tưởng tưởng sau đó mới bắt đầu bắt tay vào thực hiện để đạ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 |
