使用HTML中的<datalist>
元素可以创建自动完成输入框。在<input>
标签中,使用list
属性来关联<datalist>
元素的id
属性,然后在<datalist>
元素中添加<option>
元素作为自动完成的选项。用户在输入时,会根据已输入的内容自动匹配<datalist>
元素中的选项,并显示在下拉框中供用户选择。
示例代码如下:
<label for="search">搜索:</label>
<input type="text" id="search" name="search" list="options">
<datalist id="options">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Python">
<option value="Java">
</datalist>
在上述代码中,<input>
元素中的list
属性值为options
,与下面的<datalist>
元素的id
属性值相同,表示它们关联在一起。<datalist>
元素中的<option>
元素表示自动完成的选项,其中value
属性表示选项的值。
注意: <datalist>
元素不会在页面中显示,只有在用户输入内容时才会显示自动完成的下拉框。此外,<datalist>
元素的选项并不是必选项,用户也可以自由输入其他内容。
更多关于<datalist>
元素的详细信息,请参考MDN文档。