input list
嗨,使用or 和有什么区别select
?
下面是一个例子。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<select name="Seleccion">
<option value="Rojo">rojo</option>
<option value="Verde">verde</option>
</select>
正如我读到的(今天),他
select
强迫你从列表中选择一个值,而datalist
他允许你输入一个不在列表中的值(这有时会导致用户出错),除了elementdatalist
,可以与其他类型的 一起使用input
,而不仅仅是文本。基于什么
W3C
,这类列表可以与类型url
、电话、颜色和日期一起使用。(https://www.lawebera.es/diseno-web-html-5/uso-elemento-datalist.php)一些区别:
list
/datalist
您可以手动输入与 中建议的值不完全匹配的值datalist
,而使用 aselect
您必须从 的值中进行选择option
。select
所有浏览器都支持,虽然对list
/的支持datalist
虽然很普遍,但还不完全存在,并且可能会导致问题(尤其是在移动设备上)......有趣的是,修复它的方法是select
在datalist
.input list
指向同一个datalist
而不影响页面(创建一个基本上是自动的),而您必须select
将它们全部插入option
以具有值,这会对性能产生负面影响。以下是一些取决于您使用的浏览器的差异:
list
/datalist
您可以在字符串中的任何位置搜索项目,而使用select
您必须从字符串的第一个字符开始搜索(例如,list
您可以在中键入“c”,它会自动建议“Google Chrome”,而在select
选择 Chrome 时,您必须以“g”开头,因为它是“Google Chrome”)。input
在 IE 中, /datalist
和之间的行为是相同的select
。select
将显示所有值(可能带有滚动条),而list
/datalist
将只显示一些或不显示(例如 Chrome 将显示一个选择列表而 Firefox 在您开始编写之前不会显示任何内容)。————
主要区别在于它们不一样:一个是带有自动完成/建议的文本字段,另一个是固定值列表。有些浏览器会以非常相似的方式呈现它们,但这种相似性将取决于所使用的浏览器(例如,IE 和 Chrome 显示
input list
与 a 的相似性,select
但 Firefox 将其呈现为普通文本字段,直到您开始输入)。