form đăng nhập html

Bạn đang xem: form đăng nhập html Tại Hoanhtao3d.vn

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

Đang xem: Form đăng nhập 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: How To Find And download Games Purchased From Playstation, Start Ps4 Game downloads Remotely From A Browser

Xem thêm: Cách Tải Game Không Cần Mật Khẩu Itunes & App Store, Muốn Tải Game Không Cần Mật Khẩu Làm Cách Nào

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

 

Xem thêm bài viết thuộc chuyên mục: Đăng nhập

Khuyễn Mãi Hot