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

Question

我正在制作一个具有多个输入的HTML表单。我主要使用选择输入(如下所示)，

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

和一些单选按钮。每个输入代表一个不同的类别。我有一个类别有20多个可能的选择。我需要一个HTML表单来做到这一点，而不占用大量的空间。单选按钮不起作用，20多个选项的选择输入似乎有点夸张。关于我应该使用什么类型的输入有什么想法吗?或者，是否可以限制下拉框的长度，并在旁边设置滚动条?

Answer 1

如您所愿:

关于我应该使用什么类型的输入有什么想法吗?

你可以只使用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>

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

进一步阅读: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'>