可以使用 <input>
元素和 <datalist>
元素来创建可输入选项列表。
首先,在 <input>
元素中使用 list
属性,并将其设置为 <datalist>
元素的 id
值。例如:
<label for="myInput">选择一个水果:</label>
<input type="text" id="myInput" list="fruits">
<datalist id="fruits">
<option value="苹果">
<option value="香蕉">
<option value="橙子">
<option value="西瓜">
<option value="葡萄">
</datalist>
这将在输入框中创建一个下拉列表,其中包含 <datalist>
元素中定义的选项。
用户可以在输入框中输入文本,然后从下拉列表中选择一个选项。如果用户输入的文本与下拉列表中的选项匹配,则该选项将显示在输入框中。
关键词:
<input>
list
属性<datalist>
id
属性<option>