HTML 多种不同选项的输入

Question

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

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

还有一些单选按钮。我每个输入代表一个不同的类别。我有一个类别有 20 多个可能的选项。我需要一个 HTML 表格来执行此操作而不会占用很多 space。单选按钮不起作用，带有 20 多个可能选项的 select 输入似乎有点过头了。关于我应该使用什么类型的输入有什么想法吗？或者，能不能限制下拉框的长度，边上有滚动条？

Answer 1

如你所问：

Any ideas on what type of input I should use?

您可以只使用select的size属性：

<select size='5'>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
</select>

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

Answer 2

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

<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>

请注意，用户将能够提交唯一值。与收音机和 select 框不同，输入值不限于数据列表中提供的选项。

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

Answer 3

您可以在 HTML 表单上使用 CSS 样式来缩小尺寸，只需确保为特定表单元素提供一个 ID。您可以在大多数 [不是所有] 类型的表单内容上使用宽度和高度命令。如果您需要表单非常小，然后根据用户交互展开表单，您可以使用 JavaScript "onclick" 或 "onmouseover" 命令使表单元素在用户交互时展开将鼠标滚动到它上面或单击它。我将向您展示一个提交按钮的示例。同一模型适用于任何表单元素

HTML 表单可能如下所示：

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

CSS 看起来像这样：

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

使用必需的 JavaScript 命令时 HTML 的样子：

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

HTML 多种不同选项的输入

HTML input for many different options

html

css

forms

user-input

input