HTML 选择和文本输入

Question

我们都见过无数的表单实例，带有一个选择下拉菜单，其中一个选项为“其他”，在选择该选项时，我们会看到一个输入文本框（一直隐藏）要求我们输入在我们的输入中。

有没有更好的方法来实现这一点？是否有插件可以让我做得更好？还是标准的 HTML 元素就足够了（选择标签的某些设置可能）？

Answer 1

您可以使用datalist。示例：

<input list="cookies" placeholder="Type of Cookie"/>

<datalist id="cookies">
    <option value="Chocolate Chip"/>
    <option value="Peanut Butter"/>
    <option value="Raisin Oatmeal"/>
</datalist>

小提琴：http://jsfiddle.net/joshpauljohnson/Uv5Wk/

这使用户能够从 cookie 列表中进行选择，如果在列表中找不到他们寻找的 cookie 类型，则输入他们自己的。

在您的情况下，我唯一不满意的是，用户可能不会立即将其用作下拉菜单。但这可以通过一点 css 轻松解决。

Answer 2

这是在纸上和网络上设计表单的一种相当常见的方式。 我不太清楚你所说的更好的方法是什么意思......

如果您担心如果用户禁用了 javascript，则隐藏字段不会出现，我建议您使用 javascript 隐藏该字段或在 noscript 块中使用重复的“如果其他请指定”文本区域：

<select><!-- implemented something like rahul showed  -->
<noscript>
   <label for="ifOtherInput">If other please specify</label>
   <input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
    <!-- Here we know the user selected other so we can just have this label: -->
    <label for="ifOtherInputJs">Please specify</label> 
   <input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>

后端必须处理 noscript 块中的输入可能丢失。或者，您可以使用 javascript 将输入的 javascript 版本添加到输入页面（因此两者不可能同时出现，因此它们可以具有相同的名称。

Answer 3

可编辑的组合框可能是一个不错的选择。挑战在于以这样一种方式设置它的样式，让用户清楚地知道他可以实际编辑控件的内容，而不仅仅是选择提供的默认内容。