Đăng nhập

tạo bảng đăng nhập trong html

Tri thức / Lập trình / Lập trình web / Html & Css      13582 – 0      1 năm trước

Đang xem: Tạo bảng đăng nhập trong html

0 0

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.

Xem thêm: Đăng Nhập Vietmap Tracking Vietmap Login, Vietmap Tracking Login V3 Tracking Mobile

Xem thêm: 502 Bad Gateway – Oriental Legend Special : Tây Du Ký 2 Cho Pc

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.

 

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:

<!DOCTYPE html> <html> <head> <title>Đăng nhập vào website</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”css/login.css” rel=”stylesheet” type=”text/css”/> </head> <body> <header> <div class=”container”> Đầu trang </div> </header> <main> <div class=”container”> <div class=”login-form”> <form action=”” method=”post”> <h1>Đăng nhập vào website</h1> <div class=”input-box”> <i ></i> <input type=”text” placeholder=”Nhập username”> </div> <div class=”input-box”> <i ></i> <input type=”password” placeholder=”Nhập mật khẩu”> </div> <div class=”btn-box”> <button type=”submit”> Đăng nhập </button> </div> </form> </div> </div> </main> <footer> <div class=”container”> Chân trang </div> </footer> </body> </html>

 

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:

<link href=”css/login.css” rel=”stylesheet” type=”text/css”/>

 

Tiếp đến, chúng ta viết mã cho file login.css như sau:

* header main footer .container .login-form h1 .input-box .input-box input .btn-box .btn-box button

 

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:

download  Code form đăng nhập bằng html và css

 

Show More

Related Articles

Back to top button
Close