使用<datalist>
标签可以为表单输入框提供选项列表。在<input>
标签中使用list
属性,并将其值设置为<datalist>
标签的id
属性,即可将输入框与选项列表关联。<datalist>
标签内部使用<option>
标签来定义选项列表中的每个选项。
例如:
<label for="fruits">选择你喜欢的水果:</label>
<input type="text" id="fruits" name="fruits" list="fruit-list">
<datalist id="fruit-list">
<option value="苹果">
<option value="香蕉">
<option value="橙子">
<option value="草莓">
<option value="葡萄">
</datalist>
在上面的例子中,<input>
标签的list
属性值为fruit-list
,与<datalist>
标签的id
属性值相同。<datalist>
标签内部定义了5个选项,每个选项都使用<option>
标签来定义,value
属性表示选项的值。
当用户在输入框中输入内容时,浏览器会自动弹出符合用户输入的选项列表供用户选择。