Thẻ tùy chọn trong HTML là gì?

The Tuy Chon Trong Html La Gi



Các ' ” thẻ được sử dụng để xác định tùy chọn mà người dùng có thể chọn từ menu thả xuống hoặc từ danh sách lựa chọn trong biểu mẫu web. Các ' ” thẻ cho phép các nhà phát triển tạo một tập hợp các tùy chọn mà từ đó người dùng có thể chọn bất kỳ tùy chọn nào. Nó đang được sử dụng trong các ứng dụng khác nhau như khảo sát, trang web mua sắm trực tuyến, biểu mẫu đăng ký, v.v.

Bài viết này minh họa thẻ tùy chọn trong HTML cùng với các ví dụ thực tế:





Thẻ tùy chọn là gì và Cách sử dụng nó trong HTML?

Thẻ tùy chọn có thể được sử dụng với “ ' Và ' ” thẻ. Trong trường hợp của “ ”, nó tạo ra một danh sách các tùy chọn mà trình duyệt có thể tự động hoàn thành. Chúng ta hãy xem qua một vài ví dụ để hiểu rõ hơn về mối quan hệ giữa “ ” gắn thẻ với “ ' Và ' ” thẻ:



Ví dụ 1: Tạo danh sách thả xuống



Các ' ” thẻ được sử dụng với “ ” để tạo danh sách thả xuống trên trang web. Các ' ” tạo từng mục tùy chọn/danh sách trong danh sách thả xuống. Để hiểu rõ hơn, chúng ta hãy làm theo đoạn mã dưới đây:



< h2 > Ngôn ngữ lập trình h2 >
< nhãn vì = 'prog-vũ khí' > Chọn một vũ khí lập trình: nhãn >
< lựa chọn nhận dạng = 'prog-list' >
< lựa chọn giá trị = '' > Chọn một Tùy chọn lựa chọn >
< lựa chọn giá trị = 'C++' > C++ lựa chọn >
< lựa chọn giá trị = '.mạng lưới' > chấm lưới lựa chọn >
< lựa chọn giá trị = 'nút j' > nút js lựa chọn >
lựa chọn >

Trong đoạn mã trên:



  • Đầu tiên ' ” thẻ được sử dụng để hiển thị dữ liệu và nó được gán với “ ” gắn thẻ bằng cách sử dụng “ vì ' thuộc tính.
  • Sau đó, “ ” được sử dụng để tạo môi trường cho danh sách thả xuống.
  • Tiếp theo, phần “ ” thẻ được sử dụng để tạo các mục danh sách được đặt dưới dạng các mục danh sách thả xuống.

Sau khi thiết lập cấu trúc của danh sách thả xuống, bây giờ chúng ta hãy áp dụng một số kiểu dáng cơ bản:

nhãn {
hiển thị: khối;
lề dưới: 5px;
}
lựa chọn {
phần đệm: 5px;
bán kính đường viền: 5px;
chiều rộng: 200px;
}

Giải thích về các thuộc tính CSS được mô tả bên dưới:

  • Đầu tiên, chọn “ nhãn ” và sau đó đặt các giá trị của “block” và “5px” thành CSS “ trưng bày ' Và ' lề dưới ' của cải.
  • Tiếp theo, phần “ lựa chọn ” được chọn và cung cấp các giá trị “5px”, “5px” và “200px” cho CSS “ đệm ”, “ bán kính đường viền ' Và ' chiều rộng ” thuộc tính, tương ứng. Các thuộc tính này được sử dụng để nâng cao khả năng hiển thị của người dùng.

Sau khi thực hiện các đoạn mã trên, trang web trông như thế này:

Đầu ra ở trên cho thấy rằng danh sách thả xuống đã được tạo bằng cách sử dụng “ ” gắn thẻ với “ ' nhãn.

Ví dụ 2: Tạo danh sách tự động hoàn thành

Các ' ” thẻ được sử dụng với “ ” để tạo danh sách tự động hoàn thành. Nó được sử dụng cùng với “ <đầu vào> ” được lấp đầy bởi các tùy chọn có sẵn trong danh sách tự động hoàn thành. Mã để tạo danh sách tự động hoàn thành bằng HTML được hiển thị trong đoạn mã bên dưới:

< nhãn vì = 'công cụ prog' > Hoặc kiểu một công cụ lập trình: nhãn >
< đầu vào kiểu = 'chữ' nhận dạng = 'công cụ prog' danh sách = 'công cụ' >
< danh sách dữ liệu nhận dạng = 'công cụ' >
< lựa chọn giá trị = 'C++' >
< lựa chọn giá trị = 'Cuộc họp' >
< lựa chọn giá trị = '.Mạng lưới' >
< lựa chọn giá trị = 'PHP' >
< lựa chọn giá trị = 'Hồng ngọc' >
< lựa chọn giá trị = 'Nhanh' >
< lựa chọn giá trị = 'Nút js' >
< lựa chọn giá trị = 'Phản ứng' >
< lựa chọn giá trị = 'Mông Cổ' >
< lựa chọn giá trị = 'Java' >
< lựa chọn giá trị = 'Trăn' >
danh sách dữ liệu >

Trong đoạn mã trên:

  • Đầu tiên, thêm “ ” thẻ hiển thị văn bản cùng với phần tử HTML.
  • Tiếp theo, sử dụng “ <đầu vào> ” được người dùng điền thủ công hoặc có thể được điền tự động bằng các tùy chọn có sẵn trong danh sách tự động hoàn thành.
  • Sau đó, sử dụng “ ” gắn thẻ và đặt “ nhận dạng ” giá trị thuộc tính bằng với giá trị của “ danh sách ” thuộc tính của “ <đầu vào> ' nhãn.
  • Tiếp theo, sử dụng “ ” bên trong thẻ “” để tạo một mục cho danh sách tự động hoàn thành.

Sau khi thực thi đoạn mã trên, trang web sẽ xuất hiện như sau:

Đầu ra cho thấy danh sách tự động hoàn thành được tạo bằng cách sử dụng “ ” thẻ với sự kết hợp của “ ' Và ' <đầu vào> ” thẻ.

Phần kết luận

Các ' ” thẻ cho phép nhà phát triển tạo các tùy chọn cho danh sách tùy chọn, từ đó người dùng có thể chọn bất kỳ tùy chọn nào. Thẻ “