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 unitop 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.
Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!
Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.
Hẹn gặp lại!
Phan Văn Cương và Cộng Sự
Chúc bạn thành công!
Làm thê nào để khi gõ lệnh #wrapper thì nó hiện thị được lệnh div
Bạn cài đặt VSCode, bạn đánh vào cấu trúc #wrapper sau đó nhấn tab là ok nhé.
Cảm ơn nhé! Mình đã hiểu vấn đề
làm thế nào để tạo hiệu ứng loading khi thực hiện một số thao tác trên web vậy anh
Bữa nào a làm video nhé. Theo dõi trên kênh https://unitop.com.vn/yt
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
Bài này chỉ dừng lại ở xây dựng giao diện bạn nhé. Còn khi kết hợp với ngôn ngữ lập trình web backend thì sẽ lấy thông tin lưu vào cơ sở dữ liệu. Nội dung này có chia sẻ chi tiết trong Php Master trên https://unitop.vn
cảm ơn bạn
Hay quá anh