Làm cách nào để tạo biểu mẫu đăng nhập bằng HTML và CSS?
|
Trang đăng nhập là một trong những trang quan trọng nhất của trang web/ứng dụng cho phép người dùng được ủy quyền truy cập toàn bộ trang web hoặc một phần của trang web. Đối với các trang web được bảo vệ đăng nhập, trang đăng nhập/đăng ký là trang đầu tiên hiển thị cho người dùng. Cho dù đó là trang đăng ký hay đăng nhập, nó phải hấp dẫn, thân thiện với người dùng và dễ sử dụng. Đây là bộ sưu tập các thiết kế trang đăng nhập được chọn thủ công với bản xem trước trực tiếp và mã HTML CSS có thể tải xuống. Bạn có thể tích hợp các mẫu biểu mẫu sẵn sàng sử dụng này vào dự án của mình để tiết kiệm thời gian và công sức Show
Bộ sưu tập các biểu mẫu đăng ký/đăng nhập này có các loại trang đăng nhập khác nhau. Mỗi trang đăng nhập đi kèm với các tính năng và chức năng khác nhau. Bạn có thể xem demo và tải mã nguồn HTML, CSS cho trang đăng nhập mà bạn thấy phù hợp với nhu cầu của mình 1. Trang đăng nhập đơn giản trong HTMLSau đây là một hình thức đăng nhập đơn giản đi kèm với giao diện người dùng rõ ràng để đăng nhập. Mẫu biểu mẫu đăng nhập này có tiêu đề, trường nhập email và mật khẩu, liên kết đến trang quên mật khẩu và hai nút dành cho “đăng ký” và “đăng nhập”. Hơn nữa, nó có một bảng màu đẹp lấy cảm hứng từ Thiết kế Vật liệu. Bảng màu có thể được tùy chỉnh theo nhu cầu của bạn Tác giả. Nitesh Kumar Niranjan Tải xuống bản trình diễn 2. Trang đăng nhập với hình nềnTrang đăng nhập sau có hình nền với hiệu ứng mờ. Nó sử dụng các biểu tượng hình ảnh PNG bên trong đầu vào email và mật khẩu. Thiết kế nút đầu vào và nút đăng nhập với căn giữa. Về cơ bản, hình thức đăng nhập này bao gồm toàn bộ trang cho hình nền. Dù sao đi nữa, bạn có thể đặt một trình bao bọc cụ thể nếu bạn muốn sử dụng nó với chiều rộng và chiều cao cố định Tác giả. Tobias Rickmann Tải xuống bản trình diễn 3. Trang đăng nhập trong HTML5 có xác thựcNếu bạn muốn tạo một trang đăng nhập đơn giản bằng HTML5 có xác thực, thì biểu mẫu sau khá phù hợp với nhu cầu của bạn. Nó sử dụng các thuộc tính xác thực HTML5 và các lớp giả CSS để xác thực tên người dùng và email. Hơn nữa, hình thức đăng nhập này đi kèm với một thiết kế đơn giản và sạch sẽ. Dù sao đi nữa, bạn có thể tùy chỉnh nó theo mẫu của mình bằng cách thay đổi giá trị CSS Tác giả. Roary Tubbs Tải xuống bản trình diễn 4. Trang đăng nhập với tên người dùng và mật khẩuĐôi khi, một mẫu trang web cần thiết kế trang đăng nhập với trường tên người dùng và mật khẩu mang tính biểu tượng. Trang đăng nhập sau có tông màu đen và hồng. Nó sử dụng các biểu tượng SVG bên trong trường tên người dùng và mật khẩu. Mẫu trang đăng nhập này là tốt nhất cho các chủ đề và trang web chế độ tối Tác giả. Marco Biedermann Tải xuống bản trình diễn 5. Trang đăng nhập bằng HTML với mã CSSBạn có muốn một thiết kế trang đăng nhập giàu tính năng? . Nó đi kèm với tất cả các yếu tố cần thiết mà một trang đăng nhập hoàn hảo nên có. Nó có các nút thời trang để đăng nhập qua hồ sơ Facebook và Twitter Bố cục của trang đăng nhập này được chia thành hai phần, một phần hiển thị tiêu đề lớn và hướng dẫn đăng nhập cơ bản và phần còn lại hiển thị biểu mẫu đăng nhập. Biểu mẫu đăng nhập chứa tiêu đề, liên kết đến biểu mẫu đăng ký, các trường nhập, hộp kiểm nhớ mật khẩu và nút đăng nhập Tác giả. Claudia Romano Tải xuống bản trình diễn 6. Mẫu đăng nhập và đăng ký trong HTMLSau đây là biểu mẫu đăng nhập và đăng ký đa chức năng được tạo bằng HTML, CSS và jQuery. Về cơ bản, nó hiển thị hai nút để đăng nhập và đăng ký. Khi người dùng nhấp vào nút, một phương thức bật lên được kích hoạt với biểu mẫu được gắn thẻ đăng nhập và đăng ký. Người dùng có thể dễ dàng chuyển đổi giữa tab “Đăng nhập” và “Tài khoản mới” Giao diện người dùng của trang đăng nhập này cũng hấp dẫn, nó đi kèm với các trường nhập mang tính biểu tượng và chức năng hiển thị/ẩn mật khẩu. Hơn nữa, nó được phát triển tốt với jQuery để xác thực các trường đầu vào trước khi gửi. Nó hiển thị các chú giải lỗi được thiết kế tùy chỉnh trong trường hợp tên người dùng, email hoặc mật khẩu không hợp lệ Tác giả. Emil Tải xuống bản trình diễn 7. Mẫu đăng ký sinh viên bằng HTML và CSSNếu bạn đang làm thiết kế mẫu website giáo dục thì mẫu đăng ký học sinh này rất hữu ích cho bạn. Nó được tạo bằng HTML và CSS với tất cả các yếu tố cần thiết mà học sinh phải nộp. Về cơ bản, thiết kế thực sự đơn giản nhưng nó có thể được tùy chỉnh bằng CSS bổ sung theo nhu cầu của bạn Tác giả. Roshan Tải xuống bản trình diễn 8. Mẫu biểu mẫu đăng nhập và đăng kýĐó là một biểu mẫu được gắn thẻ khác với các tùy chọn đăng nhập và đăng ký. Trang đăng ký/đăng nhập này sử dụng Bootstrap cho thiết kế đáp ứng và jQuery để xác thực đầu vào. Nội dung của trang chứa hình nền và biểu mẫu có màu tối hơi trong suốt. Bảng màu mặc định có chủ đề màu đen và vàng. Tuy nhiên, bạn có thể đặt màu tùy chỉnh theo mẫu trang web của mình nếu bạn muốn tích hợp biểu mẫu này Tác giả. Petia Tải xuống bản trình diễn 9. Trang đăng nhập HTML với BootstrapCần một thiết kế trang đăng nhập sạch sẽ và đáp ứng? . Đừng lo lắng nếu bạn không thích màu vàng. Bạn chỉ cần thay đổi màu sắc theo nhu cầu của bạn. Dù sao đi nữa, thiết kế của biểu mẫu đăng nhập này hoàn toàn được xây dựng với thành phần biểu mẫu Bootstrap Tác giả. ganesh Tải xuống bản trình diễn 10. Trang đăng nhập HTML có xác thực JavaScriptBiểu mẫu đăng nhập thời trang xác thực các trường nhập và hiển thị thông báo lỗi tùy chỉnh. Mẫu biểu mẫu đăng nhập này sử dụng plugin xác thực jQuery để xác thực các trường nhập. Trải nghiệm người dùng tổng thể của biểu mẫu đăng nhập này có liên quan đến Thiết kế Vật liệu. Nhưng các đầu vào đi kèm với một hoạt ảnh vẽ đường viền bổ sung trong sự kiện tiêu điểm Tác giả. ioSkye Tải xuống bản trình diễn 11. Mẫu đăng nhập thiết kế phẳng hiện đạiNgày nay, có một xu hướng của các yếu tố hình ảnh thiết kế phẳng. Mẫu đăng nhập đơn giản sau đây là sự lựa chọn tốt nhất để tích hợp nó vào các mẫu thiết kế phẳng. Về cơ bản, nó đi kèm với một thiết kế tối giản sạch sẽ với tông màu xám nhạt và xanh lục. Các mục nhập và nút đăng nhập của biểu mẫu được thiết kế hoàn hảo bằng CSS. Bạn có thể dễ dàng đặt màu nền tùy chỉnh cho biểu mẫu đăng nhập này bằng những thay đổi nhỏ trong CSS Tác giả. Lụa tơ tằm Aigar Tải xuống bản trình diễn 12. Mẫu đăng nhập cổ điểnBiểu mẫu đăng nhập sau đây đi kèm với màu nền gradient CSS và đầu vào động. Về cơ bản, đây là một mẫu biểu mẫu đăng nhập được thiết kế cổ điển tối giản, phù hợp nhất cho các dự án web nhỏ và ứng dụng di động lai. Bạn có thể đặt màu nền gradient tùy chỉnh và tích hợp nó vào các dự án của mình Tác giả. Cầu Tải xuống bản trình diễn 13. Màn hình đăng nhập hình nền độngNếu bạn đang làm việc trên một dự án web thì màn hình đăng nhập này có thể hữu ích cho bạn. Nó đi kèm với nền hoạt hình tương tác với chuyển động của chuột Tác giả. Jay Tải xuống bản trình diễn 14. Biểu mẫu đăng nhập HTML không có CSSNói chung, một biểu mẫu HTML không có CSS không có ý nghĩa gì đối với thiết kế giao diện người dùng. Dù sao đi nữa, đôi khi bạn cần một thành phần HTML không có CSS cho nhiều mục đích khác nhau. Nếu bạn cần một biểu mẫu đăng nhập đơn giản không có CSS, biểu mẫu sau có thể phù hợp với nhu cầu của bạn Làm cách nào để tạo biểu mẫu đăng nhập bằng CSS và HTML?Các bước thực hiện. . Tạo Thư mục dự án và mở nó trong IDE bạn chọn và liên kết HTML với CSS bằng mã bên dưới. . Tiếp theo, tạo cấu trúc cho trang đăng nhập bằng HTML. . Tiếp theo, chúng tôi sẽ thêm CSS để tạo kiểu cho trang đăng nhập của chúng tôi. . Trước khi Áp dụng CSS, đầu ra trông như thế này Làm cách nào để tạo biểu mẫu đăng nhập bằng HTML và JavaScript?Để tạo xác thực biểu mẫu đăng nhập bằng HTML CSS & JavaScript, hãy làm theo các bước sau. . Ban đầu, bạn cần tạo hai tệp một HTML (. html) và một tệp CSS khác (. css). . Và, tạo một tệp CSS có tên style Cuối cùng, tạo một tệp JavaScript với tên của tập lệnh |
