Trường số
Nhập số liệu một cách chính xác và đầy phong cách. Từ các ô nhập số đơn giản đến các thanh trượt tương tác với định dạng tiền tệ - trường Số cung cấp khả năng xác thực, định dạng và trải nghiệm người dùng tuyệt vời.
Thu thập số điện thoại thông minh với tính năng xác thực tích hợp.
Hoàn hảo cho:
Các tính năng mạnh mẽ cho mọi trường hợp sử dụng
🎯 Kiểm soát xác thực chính xác
Giới hạn tối thiểu/tối đa
Đặt giá trị tối thiểu và tối đa cho phép. Ngăn chặn các mục nhập không hợp lệ trước khi gửi bằng tính năng xác thực tích hợp của trình duyệt.
Kiểm soát kích thước bước
Xác định các giá trị gia tăng – số nguyên (1), nửa bước (0.5) hoặc số thập phân chính xác (0.01) cho tiền tệ.
Ví dụ:
- Trường độ tuổi: Tối thiểu 18, Tối đa 100, Bước 1
- Trường giá: Tối thiểu 0, Tối đa 10000, Bước nhảy 0.01
- Thang điểm: Tối thiểu 1, Tối đa 5, Bước nhảy 0.5
💰 Định dạng số thông minh
Nhiều tùy chọn định dạng:
- Nhập số đơn giản – Nhập số thông thường (123)
- Tiền tệ – Tiền có ký hiệu ($123.00, €123.00, £123.00)
- Phần trăm – Ký hiệu % tự động thêm (85%)
- Số thập phân – Số chữ số thập phân cố định (123.45)
Ký hiệu tiền tệ tùy chỉnh
Hỗ trợ mọi loại tiền tệ: $, €, £, ¥, ₹ và nhiều loại khác – hoàn hảo cho các biểu mẫu quốc tế.
Độ chính xác thập phân
Kiểm soát số chữ số thập phân từ 0 đến 4 để tính toán chính xác.
Chế độ thanh trượt tương tác
Lựa chọn số trực quan
Biến các ô nhập liệu số thành các thanh trượt đẹp mắt. Người dùng trượt để chọn giá trị – hoàn hảo cho xếp hạng, phạm vi và tùy chọn.
Giao diện tùy chỉnh
- Chọn màu thanh trượt phù hợp với thương hiệu của bạn.
- Hiển thị/ẩn giá trị hiện tại
- Hoạt ảnh và chuyển tiếp mượt mà
Lý tưởng cho:
- Đánh giá mức độ hài lòng (1-10)
- Ngân sách dao động từ 0 đến 5000 đô la Mỹ
- Bộ chọn độ tuổi
- Mức độ ưu tiên
- Bất kỳ lựa chọn phạm vi nào
🔀 Logic điều kiện
Khả năng hiển thị trường thông minh
Hiển thị hoặc ẩn trường số này dựa trên giá trị của các trường khác. Tạo các biểu mẫu động thích ứng với dữ liệu nhập của người dùng.
Các quy tắc logic nâng cao:
- Logic AND – Tất cả các điều kiện phải được đáp ứng
- Logic OR – Bất kỳ điều kiện nào cũng có thể kích hoạt hành động.
- 8 toán tử – Bằng, Không bằng, Lớn hơn, Nhỏ hơn, Chứa, Rỗng, và nhiều toán tử khác
Trường hợp sử dụng:
- Chỉ hiển thị “Số lượng khách” khi hộp kiểm “Mang theo khách?” được chọn.
- Hiển thị “Phạm vi ngân sách” khi loại dịch vụ bằng “Cao cấp”
- Ẩn mã giảm giá khi tổng giá trị đơn hàng dưới 50 đô la.
- Hiển thị các tùy chọn bị giới hạn độ tuổi khi độ tuổi lớn hơn 1.
🎨 Tùy chỉnh đầy đủ
- Các lớp CSS tùy chỉnh
- Chế độ trường ẩn
- Đầu vào được tối ưu hóa cho thiết bị di động
- Hỗ trợ khả năng tiếp cận
- Tích hợp với tất cả các tính năng của biểu mẫu
- Bước nhảy, Giá trị khởi đầu
- Giá trị thấp nhất/cao nhất được phép
- Trường ẩn, Giá trị ẩn
⚙️ Cấu hình thông minh
Giá trị mặc định
Điền sẵn các trường bằng số bắt đầu để hướng dẫn người dùng hoặc tăng tốc quá trình hoàn thành.
Văn bản giữ chỗ
Hiển thị các gợi ý hữu ích như “Nhập số lượng” hoặc “Tuổi của bạn” trước khi người dùng nhập liệu.
Văn bản trợ giúp
Thêm mô tả để làm rõ cần nhập những con số nào.
Thiết lập đơn giản chỉ với 3 bước
Chuẩn bị trường thả xuống của bạn chỉ trong vài phút
Thêm trường số
Kéo và thả trường Số từ phần Trường cơ bản vào biểu mẫu của bạn.
Thiết lập quy tắc xác thực
Thiết lập giá trị tối thiểu/tối đa, bước nhảy và giá trị bắt đầu để kiểm soát các số mà người dùng có thể nhập.
Chọn định dạng & kiểu
Chọn định dạng văn bản thông thường, tiền tệ, phần trăm hoặc thập phân. Có thể bật chế độ thanh trượt để lựa chọn trực quan hơn.
🎉 Vậy là xong! Trường số của bạn đã sẵn sàng với tính năng xác thực và định dạng thông minh.
Ứng dụng trong thế giới thực
Thương mại điện tử & Đơn đặt hàng
- Bộ chọn số lượng sản phẩm
- bộ lọc phạm vi giá
- Nhập phần trăm chiết khấu
- Số lượng và tổng số mặt hàng
Khảo sát & Xếp hạng
- Điểm đánh giá mức độ hài lòng (1-10)
- Xếp hạng sao
- Xếp hạng ưu tiên
- Thang đo xác suất
Thể dục & Sức khỏe
- Theo dõi cân nặng
- Số đo chiều cao
- số lần lặp lại bài tập
- Máy tính chỉ số BMI
Đặt phòng & Giữ chỗ
- Số lượng khách mời/người tham dự
- Số lượng phòng
- Thời lượng (giờ/ngày)
- quy mô bữa tiệc
Đơn xin việc
- Xác nhận tuổi
- Số năm kinh nghiệm
- Mức lương kỳ vọng
- Phạm vi ngân sách
Kinh doanh & Tài chính
- Đầu vào doanh thu
- Số tiền đầu tư
- Tỷ lệ ROI
- Tỷ lệ hoa hồng
Hoàn thành các tùy chọn trường
Cấu hình cơ bản
- nhãn trường – Tiêu đề hiển thị phía trên ô số
- Mô tả/Văn bản trợ giúp – Hướng dẫn bổ sung dành cho người dùng
- Phần bắt buộc – Bắt buộc nhập số
- Văn bản giữ chỗ – Văn bản gợi ý trước khi người dùng nhập số
Cài đặt xác thực
- Giá trị tối thiểu cho phép (Min) – Số lượng tối thiểu có thể chấp nhận được
- Giá trị tối đa cho phép (Max) – Số lượng tối đa có thể chấp nhận được
- Cỡ bước chân – Giá trị gia tăng (1, 0.5, 0.01, v.v.)
- Giá trị ban đầu – Số mặc định được điền sẵn
Số định dạng
- Định dạng hiển thị
- Số đơn giản
- Đơn vị tiền tệ (có ký hiệu)
- Phần trăm (%)
- Số thập phân (số chữ số cố định)
tệ Symbol – $, €, £, ¥, ₹ (khi định dạng là Tiền tệ)
Vị trí thập phân – 0, 1, 2, 3 hoặc 4 chữ số (khi định dạng là số thập phân)
Tùy chọn thanh trượt
- Hiển thị dưới dạng thanh trượt – Kích hoạt chế độ thanh trượt tương tác
- Màu thanh trượt – Công cụ chọn màu tùy chỉnh cho thương hiệu
- Hiển thị số bên cạnh thanh trượt – Hiển thị giá trị hiện tại
Logic có điều kiện
- Bật Logic điều kiện – Hiển thị/ẩn dựa trên điều kiện
Loại logic- Tất cả các điều kiện phải được đáp ứng (VÀ)
- Mọi điều kiện đều có thể được đáp ứng (HOẶC)
- Quy tắc điều kiện
- Hiện an – Hành động cần thực hiện
- Phần – Cần kiểm tra lĩnh vực nào
- Nhà điều hành – Bằng, Không bằng, Chứa, Lớn hơn, Nhỏ hơn, Rỗng, Không rỗng
- Giá trị – Giá trị so sánh
- Nhiều điều kiện – Thêm quy tắc không giới hạn
Tùy chọn nâng cao
- Chế độ trường ẩn – Sử dụng như một trường ẩn với giá trị được thiết lập sẵn
- Các lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh
- Thuộc tính trợ năng – Nhãn và mô tả ARIA
Tại sao nên chọn trường số của chúng tôi?
✅ Chính xác – Kiểm tra chính xác giá trị tối thiểu/tối đa giúp ngăn chặn các mục nhập không hợp lệ
✅ Linh hoạt
– Nhiều định dạng cho mọi trường hợp sử dụng
✅ Hình ảnh – Chế độ thanh trượt tạo ra những tương tác hấp dẫn
✅ Thông minh – Logic điều kiện tạo ra các dạng động
✅ Dễ Sử Dụng – Các thông báo xác thực rõ ràng hướng dẫn người dùng
✅ Chuyên nghiệp – Định dạng tiền tệ và phần trăm được tích hợp sẵn
✅ Tối ưu hóa điện thoại di động – Bàn phím số hoàn hảo trên thiết bị di động
✅ Tích hợp đầy đủ – Hoạt động liền mạch với tất cả các tính năng của biểu mẫu
Câu Hỏi Thường Gặp
Hỏi: Sự khác biệt giữa Min/Max và xác thực là gì?
A: Cài đặt Min/Max cung cấp tính năng xác thực tức thì ở cấp độ trình duyệt. Người dùng không thể nhập các số không hợp lệ, giúp biểu mẫu không có lỗi và thân thiện với người dùng.
Hỏi: Tôi có thể sử dụng số thập phân không?
A: Vâng! Hãy đặt giá trị Bước để kiểm soát số thập phân. Sử dụng 0.01 cho tiền tệ (giá cả), 0.1 cho một chữ số thập phân, hoặc bất kỳ bước tùy chỉnh nào.
Hỏi: Thanh trượt hoạt động như thế nào trên thiết bị di động?
A: Thanh trượt được tối ưu hóa cho cảm ứng và hoạt động mượt mà trên thiết bị di động.
Hỏi: Tôi có thể thu thập các số âm không?
A: Chắc chắn rồi! Hãy đặt giá trị Min âm (ví dụ: Min: -100, Max: 100) để cho phép số âm.
Hỏi: Hệ thống hỗ trợ những loại ký hiệu tiền tệ nào?
A: Bất kỳ ký hiệu nào! Nhập $, €, £, ¥, ₹, hoặc bất kỳ ký hiệu tùy chỉnh nào có tối đa 3 ký tự.
Hỏi: Tôi có thể sử dụng logic điều kiện dựa trên so sánh số không?
A: Đúng vậy! Hãy sử dụng các toán tử như "Lớn hơn", "Nhỏ hơn" và "Bằng" để tạo logic dựa trên các giá trị số.
Hỏi: Làm thế nào để tạo trường phần trăm?
A: Chọn “Tỷ lệ phần trăm (%)” làm Định dạng hiển thị. Ký hiệu % sẽ tự động xuất hiện, và người dùng nhập các giá trị từ 0 đến 100.
Hỏi: Tôi có thể thay đổi màu của thanh trượt không?
A: Đúng vậy! Khi chế độ thanh trượt được bật, bạn có thể chọn bất kỳ màu nào bằng công cụ chọn màu.
Hỏi: Điều gì sẽ xảy ra nếu người dùng nhập số nằm ngoài phạm vi cho phép?
A: Quá trình xác thực trình duyệt ngăn chặn việc gửi dữ liệu và hiển thị thông báo lỗi như “Giá trị phải nằm trong khoảng từ 1 đến 100.”
Hỏi: Tôi có thể sử dụng trường số để thực hiện các phép tính không?
A: Có! Giá trị trường số hoạt động trong các phép so sánh có điều kiện và trong các phép tính khi xử lý biểu mẫu của bạn.
Hỏi: Số thập phân có thể chính xác đến mức nào?
A: Bạn có thể thiết lập số chữ số thập phân từ 0 đến 4 chữ số, và giá trị bước có thể chính xác đến mức cần thiết (ví dụ: 0.001).
