HTML表单：Select-Option vs Datalist-Option [英] HTML Form: Select-Option vs Datalist-Option

问题描述

我想知道Select-Option和Datalist-Option之间有什么区别。是否存在使用其中一种更好的情况？以下是每个示例：

选择选项

 < 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-Option

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

解决方案

建议。对于 select 元素，用户需要选择您给出的其中一个选项。对于 datalist 元素，建议用户选择您给出的其中一个选项，但他实际上可以在输入中输入他想要的任何内容。

编辑1：您使用哪一个取决于您的要求。如果用户必须输入其中一个选项，请使用选择元素。如果使用可以输入任何内容，请使用 datalist 元素。

编辑2：在 HTML生活标准：每个选项元素是数据元素元素的后代...表示一个建议。

I was wondering what the differences are between Select-Option and Datalist-Option. Is there any situation in which it would be better to use one or the other? An example of each follows:

Select-Option

<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-Option

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

解决方案

Think of it as the difference between a requirement and a suggestion. For the select element, the user is required to select one of the options you've given. For the datalist element, it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.

Edit 1: So which one you use depends upon your requirements. If the user must enter one of your choices, use the select element. If the use can enter whatever, use the datalist element.

Edit 2: Found this tidbit in the HTML Living Standard: "Each option element that is a descendant of the datalist element...represents a suggestion."

这篇关于HTML表单：Select-Option vs Datalist-Option的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！