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

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 HTML

Như 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

Ví dụ sáng

Combobox với đầu vào tìm kiếm



  

Combobox 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,

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
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ó,
body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
1

Trong 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 Tag

Trướ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ó

  • Tên. Bạn cần đính kèm tên cho mọi điều khiển biểu mẫu vì tên này được dùng để tham chiếu dữ liệu sau khi được gửi tới máy chủ
  • nhiều. Thuộc tính này cho phép người dùng chọn nhiều tùy chọn từ menu thả xuống
  • yêu cầu. Điều này thường được sử dụng để xác nhận. Với nó, biểu mẫu sẽ không gửi trừ khi người dùng chọn ít nhất một tùy chọn từ danh sách thả xuống
  • tàn tật. Thuộc tính này ngăn người dùng tương tác với các tùy chọn
  • kích thước. Được biểu thị bằng số, thuộc tính kích thước được sử dụng để chỉ định số lượng tùy chọn sẽ hiển thị cùng một lúc
  • tự động lấy nét. Thuộc tính này được sử dụng trên tất cả các đầu vào biểu mẫu, bao gồm chọn, để chỉ định rằng đầu vào phải được lấy nét khi tải trang

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

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Để 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

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Cuối cùng thì đây là kết quả

Hộp tổ hợp HTML

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

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
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

 

Hộp tổ hợp HTML

Với thuộc tính

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
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

Hộp tổ hợp HTML

Đó không phải là tất cả những gì bạn có thể làm với các thẻ select và

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
0. Bạn cũng có thể tạo hộp chọn nhiều lớp với phần tử
body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
5 bên trong thẻ
body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }
6

Bạ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

Hộp tổ hợp HTML

Cách tạo kiểu cho phần tử chọn

Việ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

 
 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Trong đoạn mã CSS ở trên, tôi đã cho văn bản trong hộp chọn có dạng như sau

  • một họ phông chữ thảo và một màu trắng,
  • đường viền bằng 0 để loại bỏ đường viền xấu xí khi nó được lấy nét,
  • một nền màu xanh lá cây,
  • đường viền màu đỏ thẫm đánh dấu 1 pixel,
  • bán kính đường viền là 4 pixel để có đường viền hơi tròn ở tất cả các bên,
  • và một phần đệm 4 pixel để tạo khoảng trống cho mọi thứ một chút

Hộp chọn bây giờ trông đẹp hơn

Hộp tổ hợp HTML

Phần kết luận

Thẻ 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


Hộp tổ hợp HTML
Kolade Chris

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?

Sử dụng bất kỳ phần tử nào để mở menu thả xuống, e. g. một phần tử