Question

我正在制作一个包含多个输入的HTML表单。我主要使用选择输入（如下所示），

<select>
<option></option>
<option></option>
</select>

还有一些单选按钮。我的每个输入代表一个不同的类别。我有一个类别，有20多个可能的选项。我需要一个HTML表单才能做到这一点而不占用大量空间。单选按钮不起作用，具有20多个可能选项的选择输入似乎有点过分。我应该使用什么类型的输入的任何想法？或者，是否可以限制下拉框的长度，并在侧面有一个滚动条？

Answer 1

正如你问的那样：

关于我应该使用什么类型的输入的任何想法？

你可以只使用size的{{1}}属性：

＆＃13;

select

＆＃13;

然而，正如您所看到的，不再有下拉列表 - 但选项仍然存在，具有可控限制和滚动条。

Answer 2

考虑使用耦合到<datalist>元素的自由格式文本输入框，一旦用户开始在框中键入内容，就会提供建议选项列表。您应该为尚未支持<select>的浏览器提供<datalist>备用，如下所示：

<input type="text" name="{NameOfYourField}" list="datalist-dogs" />
<datalist id="datalist-dogs">
    <select name="{NameOfYourField}">
        <option>Affenpinscher</option>
        <option>Afghan Hound</option>
        <option>Aidi</option>
        ...
    </select>
</datalist>

请注意，用户可以提交唯一值。取消无线电和选择框，输入值不限于数据列表中提供的选项。

进一步阅读：https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

Answer 3

您可以在HTML表单上使用CSS样式来缩小大小，只需确保为特定表单元素提供ID。您可以在大多数[并非所有]类型的表单内容上使用width和height命令。如果您需要表单非常小，但随后根据用户交互扩展表单，您可以使用JavaScript“onclick”或“onmouseover”命令，以便在用户将鼠标滑过它或点击时使表单元素展开在上面。我将在提交按钮上向您展示一个示例。相同的模型适用于任何表单元素

HTML表单可能如下所示：

 <input id="button" name="button" type="submit" value="Send">

CSS看起来像这样：

#button {
height:  5px;
width:  20px; 
};

HTML如何使用所需的JavaScript命令：

<input id="button" name="button" type="submit" value="Send" onmouseover="this.style.height='50px', this.style.width='200px'>

用于许多不同选项的HTML输入

3 个答案: