html可输入下拉框代码

HTML中可输入下拉框是一个非常有用的工具，它允许用户在已经设置好的选项列表中进行选择，同时又可以允许用户自己输入选项，从而增强用户体验。下面是一个可输入下拉框的代码示例：

  <select name="input-list">
    <option value="option-1">选项1</option>
    <option value="option-2">选项2</option>
    <option value="option-3">选项3</option>
    <option value="option-4">选项4</option>
    <option value="option-5">选项5</option>
    <option value="option-6">选项6</option>
    <option value="option-7">选项7</option>
    <option value="option-8">选项8</option>
    <option value="option-9">选项9</option>
    <option value="option-10">选项10</option>
    <option value="option-11">选项11</option>
  </select>

如上所示，代码使用了<select>标签来创建下拉框，其中每个选项都用<option>标签包裹起来，并用value属性为每个选项赋值。尤其要注意的是，input标签要设置name属性，来标志表单中该下拉框的名字。

值得一提的是，如果需要开启可输入功能，只需要在select标签上添加属性"oninput='this.setCustomValidity('')'"。这样将允许用户在下拉框中选择已有的选项，也可以自由输入新的选项。

  <select name="input-list" oninput="this.setCustomValidity('')">
    <option value="option-1">选项1</option>
    <option value="option-2">选项2</option>
    <option value="option-3">选项3</option>
    <option value="option-4">选项4</option>
    <option value="option-5">选项5</option>
    <option value="option-6">选项6</option>
    <option value="option-7">选项7</option>
    <option value="option-8">选项8</option>
    <option value="option-9">选项9</option>
    <option value="option-10">选项10</option>
    <option value="option-11">选项11</option>
  </select>

总的来说，可输入下拉框是HTML中非常有用的工具，可以为用户提供更加自由、方便的选择体验。