Mẫu đăng nhập HTML

Sự khởi đầu của hành trình phát triển web (front-end) có thể khó khăn. Đánh dấu ban đầu thực sự kỳ lạ. CSS đôi khi làm cho trang của bạn đẹp, đôi khi bạn không biết tại sao một thuộc tính duy nhất lại biến trang của bạn thành một mớ hỗn độn. Và trong trường hợp đây là lần đầu tiên bạn làm việc với một ngôn ngữ lập trình, thì JavaScript có thể là ngôn ngữ khó khăn nhất trong ba ngôn ngữ này.

Tuy nhiên, khi cuối cùng bạn đã nắm được HTML, CSS và JavaScript, bạn sẽ làm gì với chúng? . Hãy nghĩ về điều gì đó mà bạn muốn làm với kiến ​​thức mới tìm được của mình, không quan trọng nếu nó “hữu ích”, không quan trọng nó phức tạp như thế nào. Chỉ cần làm điều gì đó giúp bạn cải thiện HTML, CSS và JavaScript. Và làm ơn, đừng bao giờ quên giá trị của việc xây dựng những thứ ngu ngốc. )

Hôm nay, như bạn đã biết từ tiêu đề, tôi sẽ hướng dẫn bạn cách tạo trang đăng nhập bằng HTML, CSS và JavaScript. Nhưng đừng lo lắng. Một lần nữa, như tiêu đề đã nói, đây là trang đăng nhập đầu tiên của bạn, có nghĩa là mã càng đơn giản càng tốt và sẽ có giải thích đi kèm với mỗi đoạn mã

Tuy nhiên, trước khi chuyển sang mã, hãy để tôi chỉ cho bạn những gì chúng tôi sẽ tạo

Login page

Trang đăng nhập

Successful login

Đăng nhập thành công

Login with invalid credentials

Đăng nhập bằng thông tin đăng nhập không hợp lệ

Như bạn có thể thấy, trang chứa tiêu đề, biểu mẫu đăng nhập (tên người dùng và mật khẩu) và nút đăng nhập “gửi” dữ liệu đầu vào. Lưu ý rằng tôi đã sử dụng dấu ngoặc kép xung quanh nội dung gửi vì thực tế không có nội dung gửi nào. Cả tên người dùng và mật khẩu đều không được gửi đến máy chủ để được xác thực. Thay vào đó, khi người dùng nhấp vào nút đăng nhập, chúng tôi xác thực rằng tên người dùng là “người dùng” và mật khẩu là “web_dev” bằng JavaScript. Nếu chúng khớp nhau thì hộp thoại cảnh báo sẽ hiển thị và trang được tải lại (để đơn giản);

Bây giờ bạn đã quen thuộc hơn với kết quả cuối cùng, hãy chuyển sang viết mã

HTML

Chúng tôi sẽ bắt đầu với HTML, vì nó chịu trách nhiệm về thông tin được hiển thị trên trang. Nói cách khác, trước tiên chúng ta sẽ viết và cấu trúc tất cả thông tin có trong trang mà không cần lo lắng về kiểu dáng (CSS) hay tính tương tác (JavaScript). Phân tích tệp HTML hoàn chỉnh trong bao lâu tùy thích và khi bạn đã sẵn sàng, hãy chuyển sang phần giải thích

tệp HTML

Như thường lệ trong các tệp HTML, chúng tôi có hai phần. . Cái trước bao gồm siêu thông tin về trang web của chúng tôi, như mã hóa ký tự được sử dụng, tiêu đề của trang (tên bạn thấy trong tab của trình duyệt) và các tham chiếu đến các tệp CSS và JavaScript mà tệp HTML này sẽ sử dụng. Lưu ý rằng có một thuộc tính defer trong thẻ

Vẫn trên , chúng tôi làm cho nó sử dụng màn hình lưới để căn giữa nội dung của nó theo chiều dọc và chiều ngang (tương ứng với defer0 và defer1). Nói cách khác, nó lấy nội dung của , vốn chỉ là phần tử

, và đặt
cùng nội dung của nó vào giữa màn hình. Đây được gọi là bố cục lưới CSS và nếu bạn chưa quen với nó, tôi đã viết một bài viết giới thiệu nhanh về nó ở đây trong trường hợp bạn muốn tìm hiểu thêm

Chúng tôi sẽ chỉ sử dụng các trường hợp sử dụng bố cục lưới đơn giản nhất, nghĩa là, để làm cho một phần tử sử dụng hiển thị lưới và sau đó định vị nội dung của nó cho phù hợp, nhưng tôi khuyên bạn nên xem xét Bố cục lưới khi bạn có thể. Đó là một công cụ đơn giản nhưng mạnh mẽ để định vị các thành phần trong trang của bạn

Đối với

, được biết đến với id defer6 (dòng 15 của đoạn mã trên), chúng tôi điều chỉnh kích thước của nó và thay đổi phong cách của nó để làm cho nó nổi bật trên nền tối. Chúng tôi cũng biến
thành một lưới để tạo điều kiện thuận lợi cho việc định vị nội dung của nó, vốn chỉ gồm ba yếu tố. một 1, một
và một 4. Do đó, theo mặc định, CSS tạo lưới ba hàng này, một hàng cho mỗi phần tử. Nói cách khác, hãy nghĩ về hình chữ nhật màu trắng dưới dạng lưới ba hàng

Hàng đầu tiên của lưới, tiêu đề, giữ nguyên. Sửa đổi duy nhất mà nó nhận được là được căn giữa, do nội dung của defer6 được căn giữa

Mặt khác, hàng thứ hai có một số sửa đổi (dòng 26 đến 49), vì chúng ta cần sửa đổi cả hàng chứa thông báo lỗi và sau đó là chính thông báo lỗi. Chúng tôi sử dụng bố cục dạng lưới một lần nữa để căn giữa thông báo bên trong hàng thứ hai và làm cho

chiếm toàn bộ không gian có sẵn trong hàng của nó (hãy nhớ rằng theo mặc định, một
có cùng kích thước với các thành phần mà nó chứa, vì vậy để làm cho nó

Đối với thông báo lỗi, chúng tôi chỉ xem xét kích thước và kiểu dáng của nó. Do lưu ý rằng ban đầu

JavaScript

tệp JavaScript

Đối với người mới bắt đầu, chúng tôi nhận được tất cả các yếu tố mà chúng tôi sẽ cần để làm việc khi sử dụng JavaScript. biểu mẫu đăng nhập, nút đăng nhập và thông báo lỗi đăng nhập. Chúng tôi làm điều đó bằng cách gọi phương thức

5, truyền cho nó id của phần tử mà chúng tôi đang tìm kiếm. Ngoài ra, vì giá trị của ba biến đó sẽ không thay đổi, nghĩa là các biến sẽ luôn tham chiếu đến các phần tử giống hệt nhau, nên chúng tôi khai báo cả ba là
6

Sau đó, chúng tôi tạo một trình lắng nghe sự kiện cho nút đăng nhập, loại

7. Nói cách khác, mỗi khi nhấp vào nút đăng nhập, chức năng được xác định sau
8 sẽ được thực thi. Hàm nhận một tham số mà chúng ta gọi là
9, đây là một sự kiện chuột đại diện cho thao tác nhấp vào nút (đặt tên cho nó là
9 chỉ là một quy ước sắp xếp, hãy gọi nó là bất cứ thứ gì bạn thích)

Bên trong chức năng, chúng tôi bắt đầu bằng cách ngăn hành vi mặc định là nhấp vào nút đăng nhập (tức là gửi dữ liệu biểu mẫu). Trong phần trình diễn này, chúng tôi không muốn gửi dữ liệu, chúng tôi chỉ muốn xác thực dữ liệu đó bằng JavaScript, do đó,

1 để ngăn việc gửi

Sau đó, chúng tôi lấy các giá trị do người dùng nhập vào trong các trường biểu mẫu

2 và 6, tương ứng. Chúng ta có thể tận dụng cú pháp JavaScript để chọn một trường có dạng
4 là
5, trong đó
6 là HTML4 của bạn và
8 là giá trị được cung cấp cho thuộc tính
9 của phần tử 5 mà bạn đang tìm kiếm. Để lấy giá trị của trường đã chọn, chỉ cần thêm
1. Ví dụ: nếu người dùng đã nhập “user01” vào trường
2, thì chúng tôi sẽ nhận được giá trị đó với
3. Khá gọn gàng, phải không?

Bây giờ là những bước hoàn thiện. Bất cứ khi nào người dùng nhấp vào nút đăng nhập, chúng tôi sẽ truy xuất bất kỳ giá trị nào đã được nhập vào các trường biểu mẫu. Nhưng chúng ta cần phải làm gì đó với những thông tin đăng nhập đó. Sau đó, chúng ta sẽ viết một khối if/else để thực thi một đoạn mã nếu thông tin đăng nhập hợp lệ hoặc một đoạn mã khác nếu chúng không hợp lệ. Chúng ta cũng cần một điều kiện phải không? . Để đơn giản, việc xác thực đó sẽ kiểm tra xem tên người dùng đã nhập có phải là “người dùng” và mật khẩu là “web_dev” không. Theo cú pháp JavaScript, điều này có nghĩa là

4

trong đó

5 là toán tử AND chỉ định rằng chúng tôi cần cả tên người dùng phải bằng “người dùng” và mật khẩu phải bằng “web_dev”

Nếu thông tin đăng nhập thực sự hợp lệ, thì chúng tôi sẽ hiển thị hộp thoại cảnh báo với thông báo rằng người dùng đã đăng nhập thành công và tải lại trang tiếp theo (một lần nữa, chỉ vì mục đích đơn giản). Nhưng nếu tên người dùng hoặc mật khẩu không hợp lệ, thì chúng tôi sẽ thay đổi thuộc tính