Question

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

有没有更好的方法来实现这个？那里有插件可以让我做得更好吗？或者标准HTML元素是否足够（某些设置为select标签，可能是）？

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类型，请输入他们自己的cookie。

在你的情况下，我唯一的优点是它可能不会立即显示给用户，他们可以将它用作下拉菜单。但这可以通过一点点css轻松解决。

Answer 2

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

Answer 3

这是在纸上和网上设计表单的一种相当常见的方式。我不太确定你用更好的方法来表达你的意思......

如果您担心如果用户禁用了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版本添加到输入页面（因此两者都不可能同时出现，以便它们可以具有相同的名称。

HTML选择和文本输入

3 个答案: