Sau đây, chúng ta sẽ đến với bài thực hành html và css đầu tiên. Trong bài học này, chúng ta sẽ học cách tạo form đăng nhập đẹp bằng html và css. Kiến thức trong bài học sẽ được trình bày theo từng bước, có code mẫu cuối bài viết để các bạn tải về xem thử trực tiếp.
Bài viết liên quan:
- Hướng dẫn làm chức năng quên mật khẩu bằng php
Kết quả form đăng nhập bằng html và css
Chúng ta sẽ từng bước viết mã html và css để có được form đăng nhập như hình bên dưới:
Thực hiện viết mã html cho form đăng nhập
Tạo file login.html với nội dung như sau:
Đăng nhập vào website
Đầu trang
Đăng nhập vào website
Đăng nhập
Chân trang
Lưu file login.html, và mở chạy trên trình duyệt, chúng ta sẽ được kết quả như sau:
Công bằng mà nói, thì xấu một cách hoàn hảo, và tất nhiên không giống mẫu ở đầu bài viết chút nào. Nguyên nhân là chúng ta chưa thực hiện làm đẹp đoạn mã html trên bằng css.
Định dạng form đăng nhập bằng css
Chúng ta sẽ tạo file login.css trong thư mục css, thư mục css chúng ta đặt cạnh file login.html
Sau đó, liên kết file css trên vào file login.html. Đoạn mã html trong file login.html trên đã bao gồm việc chèn file này, chúng ta có thể thấy tại dòng thứ 7 với nội dung:
Tiếp đến, chúng ta viết mã cho file login.css như sau:
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
box-sizing: border-box;
}
header{
background-color: #cccccc;
min-height: 70px;
padding: 15px;
}
main{
background-color: #dddddd;
min-height: 300px;
padding: 7.5px 15px;
}
footer{
background-color: #cccccc;
min-height: 70px;
padding: 15px;
}
.container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.login-form{
width: 100%;
max-width: 400px;
margin: 20px auto;
background-color: #ffffff;
padding: 15px;
border: 2px dotted #cccccc;
border-radius: 10px;
}
h2{
color: #009999;
font-size: 20px;
margin-bottom: 30px;
}
.input-box{
margin-bottom: 10px;
}
.input-box input{
padding: 7.5px 15px;
width: 100%;
border: 1px solid #cccccc;
outline: none;
}
.btn-box{
text-align: right;
margin-top: 30px;
}
.btn-box button{
padding: 7.5px 15px;
border-radius: 2px;
background-color: #009999;
color: #ffffff;
border: none;
outline: none;
}Vậy là hoàn tất, chạy lại file login.html trên trình duyệt và kết quả sẽ giống như sau:
Giờ thì đã giống mẫu rồi nhé.
Các bạn có thể tải về code tại link google drive sau:
Code form đăng nhập bằng html và css
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
Form login unitop.vn
Form đăng nhập
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.