Biểu mẫu HTML: Chọn-Tùy chọn so với Nhà cung cấp-Tùy chọn

Tôi đã tự hỏi sự khác biệt giữa Lựa chọn-Tùy chọn và Tùy chọn dữ liệu. Có bất kỳ tình huống nào sẽ tốt hơn khi sử dụng cái này hay cái kia không? Một ví dụ về mỗi sau:

Chọn tùy chọn

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Tùy chọn

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Hãy nghĩ về nó như sự khác biệt giữa một yêu cầu và một gợi ý. Đối với selectphần tử, người dùng được yêu cầu chọn một trong các tùy chọn bạn đã đưa ra. Đối với datalistphần tử, người dùng nên chọn một trong các tùy chọn bạn đã đưa ra, nhưng anh ta thực sự có thể nhập bất cứ thứ gì anh ta muốn vào đầu vào.

Chỉnh sửa 1: Vì vậy, cái nào bạn sử dụng phụ thuộc vào yêu cầu của bạn. Nếu người dùng phải nhập một trong các lựa chọn của bạn, hãy sử dụng selectphần tử. Nếu việc sử dụng có thể nhập bất cứ điều gì, sử dụng các datalistyếu tố.

Chỉnh sửa 2: Tìm thấy mẩu tin này trong Tiêu chuẩn sống HTML : "Mỗi phần tử tùy chọn là hậu duệ của phần tử dữ liệu ... đại diện cho một đề xuất."

Từ quan điểm kỹ thuật, chúng hoàn toàn khác nhau. <datalist>là một thùng chứa các tùy chọn trừu tượng cho các yếu tố khác. Trong trường hợp của bạn, bạn đã sử dụng nó với <input type="text"nhưng bạn cũng có thể sử dụng nó với phạm vi, màu sắc, ngày tháng, v.v ... http://demo.agektmr.com/dirthist/

Nếu sử dụng nó với kiểu nhập văn bản, như một kiểu tự động hoàn thành, thì câu hỏi thực sự là: Sử dụng kiểu nhập văn bản dạng tự do hay danh sách tùy chọn được xác định trước là tốt hơn? Trong trường hợp đó tôi nghĩ câu trả lời rõ ràng hơn một chút.

Nếu chúng ta tập trung vào việc sử dụng <datalist>làm danh sách các tùy chọn cho trường văn bản thì đây là một số khác biệt cụ thể giữa hộp đó và hộp chọn:

• Một <datalist>hộp văn bản được cung cấp có một chuỗi cho cả nhãn hiển thị và gửi. Một hộp chọn có thể có giá trị gửi khác với nhãn hiển thị <option value='ie'>Internet Explorer</option>.
• Một <datalist>hộp văn bản cho ăn không hỗ trợ <optgroup>thẻ để tổ chức hiển thị.
• Bạn không thể giới hạn người dùng trong danh sách các tùy chọn <datalist>giống như bạn có thể với <select>.
• Sự kiện onchange hoạt động khác nhau. Trên một <select>phần tử, sự kiện onchange được kích hoạt ngay lập tức khi thay đổi, trong khi đó với <input type="text"sự kiện được kích hoạt sau khi phần tử mất tiêu điểm hoặc người dùng nhấn enter.
• <datalist>đã thực sự hỗ trợ đốm trên các trình duyệt. Cách để hiển thị tất cả các tùy chọn có sẵn là không nhất quán và mọi thứ chỉ trở nên tồi tệ hơn từ đó.

Điểm cuối cùng thực sự là một điểm lớn trong quan điểm của tôi. Vì bạn sẽ phải có một dự phòng tự động hoàn thành phổ quát hơn, nên gần như không có lý do gì để trải qua sự cố cấu hình a <datalist>. Ngoài ra, bất kỳ thao tác cắm tự động hoàn chỉnh nào cũng sẽ cho phép các cách định kiểu hiển thị các tùy chọn của bạn, điều <datalist>này không thực hiện được. Nếu các yếu tố <datalist>được chấp nhận <li>mà bạn có thể thao tác theo cách bạn muốn, nó sẽ thực sự tuyệt vời! Nhưng không.

Cũng trong chừng mực mà tôi có thể nói, <datalist>tìm kiếm là một kết hợp chính xác từ đầu chuỗi. Vì vậy, nếu bạn có <option value="internet explorer">và bạn đã tìm kiếm 'thám hiểm', bạn sẽ không nhận được kết quả. Hầu hết các plugin tự động hoàn thành sẽ tìm kiếm bất cứ nơi nào trong văn bản.

Tôi chỉ được sử dụng <datalist>như một người trợ giúp tiện lợi nhanh chóng và lười biếng cho một số trang nội bộ mà tôi biết chắc chắn 100% rằng người dùng có Chrome hoặc Firefox mới nhất và sẽ không cố gửi các giá trị không có thật. Đối với bất kỳ trường hợp nào khác, thật khó để khuyến nghị sử dụng <datalist>do hỗ trợ trình duyệt rất kém.

Datalist bao gồm tự động hoàn thành và đề xuất nguyên bản, nó cũng có thể cho phép người dùng nhập một giá trị không được xác định trong các đề xuất.

Chọn chỉ cung cấp cho bạn các tùy chọn được xác định trước mà người dùng phải chọn từ

Danh sách dữ liệu là một thẻ HTML mới trong các trình duyệt được hỗ trợ HTML5. Nó kết xuất dưới dạng một hộp văn bản với một số danh sách các tùy chọn. Ví dụ cho hộp Văn bản Giới tính, nó sẽ cung cấp cho bạn các tùy chọn là Nam Nữ khi bạn nhập 'M' hoặc 'F' trong Hộp văn bản.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Để trả lời cụ thể một phần câu hỏi của bạn "Có tình huống nào tốt hơn là sử dụng cái này hay cái kia không?", Hãy xem xét một hình thức với các phần lặp lại. Nếu phần lặp lại chứa nhiều selectthẻ, thì options phải được hiển thị cho mỗi lựa chọn, cho mỗi hàng.

Trong trường hợp như vậy, tôi sẽ cân nhắc sử dụng datalistvới input, bởi vì datalistcó thể sử dụng tương tự cho bất kỳ số inputs nào. Điều này có khả năng tiết kiệm một lượng lớn thời gian kết xuất trên máy chủ và sẽ mở rộng tốt hơn cho bất kỳ số lượng hàng nào.

Tôi nhận thấy rằng không có tính năng được chọn trong datalist. Nó chỉ cung cấp cho bạn sự lựa chọn nhưng không thể có tùy chọn mặc định. Bạn cũng không thể hiển thị tùy chọn đã chọn trên trang tiếp theo.

Có một sự khác biệt quan trọng khác giữa selectvà datalist. Ở đây có yếu tố hỗ trợ trình duyệt.

select được hỗ trợ rộng rãi bởi các trình duyệt so với datalist. Vui lòng xem trang này để được hỗ trợ trình duyệt hoàn chỉnh của datalist--

Hỗ trợ trình duyệt dữ liệu

Khi chọn được hỗ trợ hiệu quả trong tất cả các trình duyệt (kể từ IE6 +, Firefox 2+, Chrome 1+, v.v.)

Tương tự như chọn, nhưng datalist có các chức năng bổ sung như tự động đề xuất. Bạn thậm chí có thể nhập và xem các đề xuất như và khi bạn nhập.

Người dùng cũng sẽ có thể viết các mục không có trong danh sách.