Hộp tổ hợp html là gì?

Sự miêu tả

combobox là một tiện ích tổng hợp kết hợp trường đầu vào được đặt tên với cửa sổ bật lên cung cấp các giá trị có thể có cho trường đầu vào đó. Mục đích của tiện ích này là cải thiện trải nghiệm người dùng bằng cách giúp người dùng chọn một giá trị mà không cần phải nhập giá trị đầy đủ và tùy chọn tùy thuộc vào việc các giá trị được hỗ trợ có bị giới hạn hay không, ngăn người dùng nhập các giá trị không hợp lệ hoặc không được hỗ trợ

Vai trò combobox được đặt trên đầu vào kiểm soát một phần tử khác, chẳng hạn như hộp danh sách hoặc lưới, có thể tự động bật lên để giúp người dùng đặt giá trị của đầu vào

Trường đầu vào combobox có thể là trường văn bản một dòng hỗ trợ chỉnh sửa và nhập, tương tự như HTML có combobox0 hoặc một phần tử chỉ hiển thị giá trị hiện tại của hộp tổ hợp

Hộp tổ hợp WAI-ARIA chỉ có một thuộc tính bắt buộc mà tác giả chỉ định. combobox1. Tuy nhiên, nó cũng có một số thuộc tính khác cần được chỉ định, tùy thuộc vào việc triển khai hộp tổ hợp. Chúng bao gồm combobox2, combobox3, combobox4 và combobox5

Thông thường, trạng thái ban đầu của hộp tổ hợp được thu gọn, với combobox6 được đặt. Ở trạng thái thu gọn, chỉ phần tử hộp tổ hợp và, tùy chọn nút anh chị em để gọi cửa sổ bật lên, được hiển thị. combobox1, với giá trị được đặt thành combobox8, là bắt buộc khi được thu gọn, vì nó cho các công nghệ hỗ trợ biết rằng tiện ích con có thể mở rộng

Hộp tổ hợp ở trạng thái mở rộng khi cả phần tử hộp tổ hợp hiển thị giá trị hiện tại và phần tử bật lên được liên kết của nó đều hiển thị. Khi mở rộng, phải đặt combobox9

Phần tử bật lên được liên kết với một combobox có thể là một phần tử listbox, input2, grid hoặc input4

Các hộp tổ hợp có giá trị combobox2 ngầm định là listbox, do đó, việc bao gồm thuộc tính này là tùy chọn nếu cửa sổ bật lên là một listbox. Nếu phần tử bật lên của hộp tổ hợp là input2, grid hoặc input4 [bất kỳ thứ gì khác ngoài listbox], thì thuộc tính combobox2 là bắt buộc. Giá trị của combobox2 phải là vai trò input2, grid, input4 hoặc listbox. Lưu ý rằng đối với thuộc tính này, listbox8 có nghĩa là listbox9, vì vậy hãy đảm bảo rằng giá trị tương ứng với vai trò của cửa sổ bật lên, không phải giá trị Boolean

Khi cửa sổ bật lên của hộp tổ hợp được hiển thị, hãy đảm bảo thuộc tính combobox3 trên thành phần hộp tổ hợp được đặt thành grid1 của phần tử cửa sổ bật lên listbox, input2, grid hoặc input4. Đây là cách biểu thị mối quan hệ giữa phần tử có vai trò combobox và cửa sổ bật lên mà nó kiểm soát. [Ghi chú. Trong các thông số kỹ thuật ARIA cũ hơn, đây là grid7 thay vì combobox3, vì vậy bạn có thể thấy grid7 trong các triển khai hộp tổ hợp cũ hơn. grid7 trong mã phải được cập nhật thành combobox3. ]

Nếu giao diện người dùng hộp tổ hợp bao gồm một điều khiển có thể nhìn thấy, chẳng hạn như một biểu tượng, cho phép điều khiển khả năng hiển thị của cửa sổ bật lên thông qua con trỏ và các sự kiện chạm, thì điều khiển đó phải là một input2, thuộc loại input4 hoặc một thành phần vai trò input4 với một input6 . Làm như vậy sẽ cho phép nút có thể được đặt tiêu điểm nhưng không được bao gồm trong chuỗi tab bàn phím. Nó không được là hậu duệ của phần tử có vai trò combobox

Để có thể truy cập bằng bàn phím, hỗ trợ bàn phím để di chuyển tiêu điểm giữa phần tử trường đầu vào combobox và các phần tử có trong cửa sổ bật lên listbox, input2, grid hoặc input4, phải được lập trình trong. Một quy ước phổ biến là Mũi tên xuống di chuyển tiêu điểm từ đầu vào sang hậu duệ có thể đặt tiêu điểm đầu tiên của phần tử bật lên

Thuộc tính combobox4 có thể được sử dụng để xác định phần tử hiện đang hoạt động của cửa sổ bật lên hộp tổ hợp, chẳng hạn như một combobox5 trong cửa sổ bật lên listbox, để triển khai trong đó tiêu điểm DOM vẫn nằm trên hộp tổ hợp. Nếu tiêu điểm DOM không còn trên hộp tổ hợp khi cửa sổ bật lên của nó được gọi, mà thay vào đó, tiêu điểm DOM di chuyển vào cửa sổ bật lên, chẳng hạn như hộp thoại, thì có thể không cần thiết có combobox4

Nếu phần tử hộp tổ hợp là phần tử , giá trị của hộp tổ hợp là giá trị của đầu vào. Mặt khác, giá trị của hộp tổ hợp đến từ các phần tử con của nó

Nếu combobox hỗ trợ nhập văn bản và cung cấp hành vi tự động hoàn thành, hãy đặt combobox5 trên phần tử hộp tổ hợp thành giá trị tương ứng với hành vi được cung cấp. combobox1, combobox2 hoặc combobox3. Thuộc tính combobox5 cho biết rằng việc nhập văn bản sẽ kích hoạt hiển thị một hoặc nhiều dự đoán về giá trị dự định của người dùng cho hộp tổ hợp và chỉ định cách các dự đoán sẽ được trình bày khi thực hiện

Mỗi combobox phải có một tên có thể truy cập. Nếu sử dụng phần tử , tên có thể truy cập phải đến từ combobox7 được liên kết. Nếu không, nếu nhãn thích hợp hiển thị trong nội dung, hãy cung cấp tên qua combobox8. Nói cách khác, nếu có một phần tử trong giao diện người dùng đóng vai trò là nhãn cho trường đầu vào combobox, hãy bao gồm combobox8 làm thuộc tính trên phần tử có vai trò là combobox và đặt giá trị của thuộc tính thành grid1 của . Nếu không có nhãn nhìn thấy được, hãy sử dụng combobox3 để thay thế. Không phải cả hai

Các vai trò, trạng thái và thuộc tính WAI-ARIA được liên kết

combobox1

Yêu cầu. Xác định xem combobox đang mở [listbox8] hay đóng [combobox8]

Bao hàm. Nếu bỏ qua, mặc định là listbox. Cũng hỗ trợ input2, grid hoặc input4. Xác định hộp tổ hợp có cửa sổ bật lên và cho biết loại

Tương tác bàn phím

mũi tên xuống

Di chuyển tiêu điểm đến tùy chọn tiếp theo hoặc đến tùy chọn đầu tiên nếu không có tùy chọn nào được chọn

Nếu cửa sổ bật lên khả dụng nhưng không hiển thị, hãy hiển thị cửa sổ bật lên mà không di chuyển tiêu điểm

Di chuyển tiêu điểm đến tùy chọn trước đó. Di chuyển tiêu điểm đến tùy chọn đầu tiên nếu tiêu điểm ban đầu nằm ở tùy chọn cuối cùng

Nếu cửa sổ bật lên có tiêu điểm, trả về tiêu điểm cho hộp tổ hợp, nếu không, nó sẽ đóng cửa sổ bật lên

Nếu hộp tổ hợp có thể chỉnh sửa được và đề xuất tự động hoàn thành được chọn trong cửa sổ bật lên, hãy chấp nhận đề xuất đó bằng cách đặt con trỏ nhập vào cuối giá trị được chấp nhận trong hộp tổ hợp hoặc bằng cách thực hiện tác vụ mặc định đối với giá trị. Ví dụ: trong ứng dụng nhắn tin, hành động mặc định có thể là thêm giá trị được chấp nhận vào danh sách người nhận tin nhắn, sau đó xóa hộp tổ hợp để người dùng có thể thêm người nhận khác

Thẻ nào được sử dụng để tạo hộp tổ hợp trong HTML?

Hộp tổ hợp trong JavaScript là gì?

HTML chính xác để tạo hộp kiểm là gì?

Làm thế nào để làm cho một giọt