Thanh tiến trình nhiều bước css

Tìm hiểu cách xây dựng biểu mẫu trông hiện đại được chia thành nhiều bước với sự trợ giúp của công nghệ web

Để xử lý các biểu mẫu dài, phức tạp, chúng ta cần chia chúng thành nhiều bước. Bằng cách chỉ hiển thị một vài đầu vào trên màn hình tại một thời điểm, biểu mẫu sẽ dễ hiểu hơn và giúp người dùng không bị choáng ngợp bởi một biển các trường biểu mẫu

Trong bài viết này, tôi sẽ cung cấp cho bạn hướng dẫn từng bước để triển khai biểu mẫu nhiều bước trong ứng dụng web của bạn. Các bước sẽ được hiển thị phía trên biểu mẫu sẽ đại diện cho thanh tiến trình khi chúng tôi tiếp tục điền vào các bước của biểu mẫu. Mỗi bước biểu mẫu sẽ chứa các nút có tên Prev và Next. Các nút này sẽ cho phép bạn điều hướng giữa các bước

Xây dựng biểu mẫu nhiều bước trong 3 bước đơn giản

1. Tạo bố cục của các thành phần biểu mẫu và bước bằng HTML
2. Làm cho biểu mẫu nhiều bước hoạt động bằng JavaScript
3. Thiết kế biểu mẫu và các thành phần bước bằng CSS

Bước 1. Tạo bố cục của các thành phần biểu mẫu và bước bằng HTML

Hãy thiết lập một biểu mẫu HTML cơ bản trước khi triển khai bộ điều hướng cho các bước của biểu mẫu. Nó sẽ bao gồm một bước biểu mẫu, sẽ đóng vai trò là thanh tiến trình. Nó sẽ chứa nhiều mục đại diện cho số bước. Các mục này sẽ được hiển thị dưới dạng vòng tròn có số bước bên trong chúng. Các bước chưa hoàn thành sẽ có màu nền của vòng tròn là màu xám. Bước hiện hoạt sẽ có màu nền của vòng tròn là màu tím. Và, các bước đã hoàn thành sẽ có màu nền của vòng kết nối là xanh lục. Sau bước biểu mẫu, chúng ta cần tạo một biểu mẫu có nhiều phần. Các phần này sẽ có sẵn cho tất cả các bước và sẽ chứa các trường biểu mẫu cho từng bước biểu mẫu. Mỗi bước sẽ chứa một nút trước đó và nút tiếp theo, điều này sẽ giúp điều hướng giữa các bước. Tuy nhiên, bước cuối cùng sẽ hiển thị nút Lưu, qua đó bạn có thể gửi biểu mẫu

Thêm đoạn mã sau vào phần mà bạn muốn triển khai biểu mẫu nhiều bước

Bước 2. Làm cho biểu mẫu nhiều bước hoạt động bằng JavaScript

Bây giờ, chúng ta cần triển khai logic để điều hướng giữa các bước của biểu mẫu. Tạo một hàm mũi tên có tên là navigateToFormStep, hàm này sẽ chấp nhận một tham số có tên là stepNumber. Hàm này sẽ nhận giá trị của bước mà bạn muốn truy cập. Nó sẽ đánh dấu các bước trước đó là đã hoàn thành, bước hiện tại là đang hoạt động và các bước còn lại là chưa hoàn thành. Nó sẽ hoạt động cho cả nút trước và nút tiếp theo, vì chúng ta chỉ cần chuyển số bước sẽ hiển thị và được đánh dấu là đang hoạt động. Tiếp theo, chúng ta cần chọn tất cả các nút trước đó và tiếp theo và thêm trình xử lý sự kiện nhấp chuột vào từng nút. Khi nhấp vào bất kỳ nút nào trong số này, một hàm ẩn danh sẽ được kích hoạt, hàm này sẽ lấy giá trị của bước đích và sẽ gọi hàm navigateToFormStep để thực hiện quy trình điều hướng

Thêm đoạn mã sau vào bên trong phần tử script trên trang

Bước 3. Thiết kế biểu mẫu và các thành phần bước bằng CSS

Vì chúng tôi đã hoàn thành việc triển khai biểu mẫu nhiều bước, chúng tôi cần thêm một số đoạn mã CSS để thiết kế bố cục cho nội dung HTML của chúng tôi

Thêm đoạn mã sau vào phần tử style hoặc bên trong tệp CSS bên ngoài và sử dụng nó trên trang

kết quả

Thanh danh. Bạn đã hoàn thành việc học cách tạo biểu mẫu nhiều bước bằng HTML, CSS và JavaScript thuần túy

Nếu bạn thích đọc bài đăng này và thấy nó hữu ích cho bạn, thì hãy vỗ tay, chia sẻ nó với bạn bè của bạn và theo dõi tôi để nhận thông tin cập nhật về các bài viết sắp tới của tôi. Bạn có thể kết nối với tôi trên LinkedIn

Trong bài viết này, chúng tôi sẽ tạo một thanh tiến trình gồm nhiều bước bằng Bootstrap. Ngoài Bootstrap, chúng tôi sẽ sử dụng jQuery để thao tác DOM

Thanh tiến trình được sử dụng để trực quan hóa số lượng công việc đã hoàn thành. Độ mạnh của thanh tiến trình cho biết tiến độ của công việc. Nó thường được sử dụng trong các ứng dụng web trực tuyến như YouTube, GitHub, v.v., để hiển thị cách trang được tải cho đến nay. Bạn cũng có thể tìm thấy thanh tiến trình trong khi tải xuống hoặc tải nội dung lên ứng dụng web

Thanh tiến trình nhiều bước được sử dụng để hiển thị tiến độ công việc ở định dạng bước

Ví dụ

 Step1 -> Step2 -> Step3 -> Final

Mỗi bước có một thanh tiến trình hiển thị tiến trình của nó để đạt được bước tiếp theo

Ví dụ. Để tạo thanh tiến trình gồm nhiều bước, hãy tạo 3 tệp index. html, phong cách. css, kịch bản. js

mục lục. html

HTML

________số 8

<Prev0Prev1

Prev2

<Prev4____11

Prev6<1 23

4Prev1

Prev2

Prev6<9 <03

<2Prev1

Prev6<59Prev1

Prev2

Prev6<9 <03

Prev04Prev1

Prev6<59Prev1

Prev2

Prev6<1 Prev143Prev16 23Prev19Prev1

<5Prev4Prev1

Prev2

<Prev26____11

Prev6<<0 <13<3Prev1

<5<<0 <13Prev40Prev1

Prev42<<0 Prev45

Prev46____147

Prev46______9<0 <13Prev13Prev1

Prev15<Prev17 Prev183Prev60Prev1

Prev62<Prev64 Prev183Prev67Prev1

Prev69<01 Prev18350251153112901Prev1