Hộp tổ hợp HTML
HTML Combobox được sử dụng chủ yếu để tạo biểu mẫu trong HTML. Người dùng có thể chọn một tùy chọn từ danh sách lựa chọn của họ. Hộp tổ hợp trong HTML bao gồm phần tử được chọn và phần tử input type= “text”. Chức năng của hộp tổ hợp giống như một thẻ chọn. Nó cũng có một thuộc tính thẻ bên trong thẻ để chọn tùy chọn menu từ danh sách để bất kỳ ai cũng có thể chọn tùy chọn mà họ chọn Show
Combobox là một phần tử HTML có thể dễ dàng giữ tất cả các loại trình duyệt. Nó hoạt động như một dạng mới nhất của Combobox như một đối tượng để điền dữ liệu thông qua các lựa chọn trong trường văn bản đã cho đọc thêm. Sự khác biệt giữa phần và thẻ div Cú pháp hộp tổ hợp HTMLNhư chúng ta đã biết Combobox là sự kết hợp giữa thẻ và phần tử nên cú pháp của Combobox chỉ được quy định riêng Cú pháp HTML In the above-provided syntax, the input type is a component that will create input text where we can take input from the user and show it. Also, we used Thí dụ Ví dụ sáng Combobox với đầu vào tìm kiếmCombobox HTML là một trong những phần quan trọng nhất của phát triển web để tạo danh sách lựa chọn. Nó được sử dụng phổ biến nhất trong hầu hết các trình duyệt quá hạn. Tôi hy vọng bạn thích bài viết này. Hãy bình luận bên dưới nếu bạn có bất kỳ câu hỏi nào Bạn sử dụng thẻ select HTML để tạo menu thả xuống để người dùng có thể chọn giá trị họ muốn. Đây là một tính năng công cụ trong việc thu thập dữ liệu để gửi đến máy chủ Thẻ chọn thường nằm trong một phần tử biểu mẫu, với các mục để chọn được mã hóa trong một thẻ khác, 0. Nó cũng có thể là một phần tử độc lập, vẫn được liên kết với một biểu mẫu với một trong các thuộc tính đặc biệt của nó, 1Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo menu thả xuống với thẻ select để bạn có thể bắt đầu sử dụng nó để thu thập dữ liệu trong các dự án mã hóa của mình. Tôi cũng sẽ đề cập đến cách tạo kiểu cho thẻ select vì nó nổi tiếng là khó tạo kiểu Các thuộc tính của Select TagTrước khi tôi tìm hiểu sâu về cách tạo menu thả xuống với thẻ chọn, chúng ta cần thảo luận về các thuộc tính mà thẻ chọn sử dụng Đây là những thuộc tính của nó
Cách tạo Menu thả xuống bằng thẻ chọnĐể tạo menu thả xuống với thẻ chọn, trước tiên bạn cần có phần tử biểu mẫu. Điều này là do bạn cũng sẽ có một nút gửi bên trong nó (phần tử biểu mẫu) để gửi dữ liệu đến máy chủ
Tôi đã thêm một số CSS đơn giản để căn giữa menu thả xuống và nút, đồng thời tạo cho phần thân một nền màu xám nhạt
Để làm cho nó phức tạp hơn và dễ truy cập hơn, bạn cũng có thể đính kèm hộp chọn vào một thành phần nhãn để nó được lấy tiêu điểm khi nhấp vào văn bản nhãn. Bạn có thể làm điều đó với mã này
Tôi đặt ký hiệu số (#) làm giá trị của thuộc tính hành động để bạn không nhận được lỗi 404 khi nhấp vào nút gửi Nhưng bây giờ chúng ta phải thực hiện một chút thay đổi trong CSS
Cuối cùng thì đây là kết quả Nó không kết thúc ở đó. Một trong các mục thả xuống xuất hiện theo mặc định và sẽ được chọn nếu người dùng nhấp vào nút gửi ngay khi họ truy cập trang Nhưng đây không phải là trải nghiệm người dùng tốt. Bạn có thể loại bỏ nó bằng cách viết mã trong “chọn ngôn ngữ” làm mục đầu tiên của danh sách thả xuống
Khi người dùng nhấp vào hộp chọn để chọn một mục, menu thả xuống cũng che nút gửi – một điều khác ảnh hưởng tiêu cực đến trải nghiệm người dùng tốt Bạn có thể thay đổi điều này bằng thuộc tính 2, thuộc tính này sẽ hiển thị một số mục nhất định theo mặc định và hiển thị cuộn cho các mục khác trong danh sách thả xuốngĐiều này cũng cho phép bạn loại bỏ mục giả đầu tiên, bởi vì một số mục sẽ tự động hiển thị cho người dùng
Với thuộc tính 3, bạn có thể cho phép người dùng chọn nhiều mục từ danh sách thả xuống
Điều này làm cho 4 mục hiển thị theo mặc định. Để chọn nhiều mục, người dùng phải giữ phím shift hoặc ctrl, sau đó chọn bằng chuột Đó không phải là tất cả những gì bạn có thể làm với các thẻ select và 0. Bạn cũng có thể tạo hộp chọn nhiều lớp với phần tử 5 bên trong thẻ 6Bạn có thể chuyển đổi danh sách thả xuống đã được tạo thành hộp chọn nhiều lớp như thế này
Cách tạo kiểu cho phần tử chọnViệc tạo kiểu cho phần tử chọn thường gây nhầm lẫn và hiển thị không nhất quán trong các trình duyệt. Nhưng bạn luôn có thể thử như sau
Trong đoạn mã CSS ở trên, tôi đã cho văn bản trong hộp chọn có dạng như sau
Hộp chọn bây giờ trông đẹp hơn Phần kết luậnThẻ select rất hữu ích khi bạn tạo danh sách thả xuống và danh sách kết hợp trong HTML. Nó giống như một nút radio và hộp kiểm trong một gói Hãy nhớ rằng với các nút radio, bạn chỉ có thể chọn một mục từ danh sách – nhưng với hộp kiểm, bạn có thể chọn nhiều mục. Lựa chọn linh hoạt hơn vì bạn có thể định cấu hình để chỉ chấp nhận một mặt hàng hoặc nhiều mặt hàng Một vấn đề với thẻ select là rất khó tạo kiểu. Một giải pháp hợp lý là sử dụng thư viện CSS cung cấp các lớp tiện ích tuyệt vời để tạo kiểu cho biểu mẫu cùng với phần tử chọn Tôi hy vọng hướng dẫn này đã giúp bạn quen thuộc hơn với thẻ select để bạn có thể bắt đầu sử dụng nó trong các dự án của mình Cảm ơn bạn đã đọc và tiếp tục mã hóa QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu ComboBox trong HTML là gì?Hộp tổ hợp về cơ bản là ĐẦU VÀO HTML của loại văn bản và CHỌN HTML được nhóm lại với nhau để cung cấp cho bạn chức năng của hộp tổ hợp . Bạn có thể đặt văn bản trong điều khiển INPUT bằng cách sử dụng điều khiển SELECT hoặc nhập trực tiếp vào trường văn bản. Trong ví dụ này, CHỌN sẽ được điền từ thuộc tính id=year.
Làm cách nào để tạo danh sách thả xuống trong HTML? |