html表单下拉菜单

Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s province, state or country.

表单上使用下拉菜单来捕获响应，对于这些响应，可以从多个可能的答案中获得一个正确的响应。 一个很好的例子就是要求访问者所在的省，州或国家。

考虑替代方案 (Considering Alternatives)

It's important to consider all the possibilities when making a form. We could simply present a textbox in which the user could type the province name, but that allows the possibility that they could make a typing mistake (which becomes an issue if this information is entered directly into a database, without human oversight). We could reduce the size of the textbox to to allow just two characters, and prompt the user just to type in the province or state abbreviation: while that reduces the possibility of error, it does not remove it.

制作表格时，必须考虑所有可能性。 我们可以简单地显示一个文本框，用户可以在其中输入省名，但是这允许他们可能会键入错误(如果将此信息直接输入到数据库中而没有人为监督，则会成为问题)。 我们可以将文本框的大小减小为仅允许两个字符，并提示用户仅输入省或州的缩写：虽然这会减少出错的可能性，但不会将其删除。

One of the best solutions to use for a question in a form for which there is only one right answer from a large number of possibilities is a drop-down menu.

下拉菜单是在多种可能性中只有一个正确答案的形式中用于问题的最佳解决方案之一。

下拉标记 (Drop-down Markup)

In an HTML form, this is created through the use of the <select> tag.

在HTML表单中，这是通过使用<select>标记创建的。

As always, we place our <label> in first, with a for attribute and an appropriate accesskey. Just like the <input> tag, <select> should have an id and name attribute. Each item inside the drop-down menu is then delimited by <option> tags.

与往常一样，我们将<label>放在第一位，带有for属性和适当的accesskey 。 就像<input>标记一样， <select>应该具有id和name属性。 然后，下拉菜单中的每个项目都由<option>标记分隔。

<label for="province" accesskey="p">Province / Territory</label>
<select name="province" id="province"><option>Alberta<option>British Columbia
</select>

The form itself is not aware of any text between the opening and closing option tags. While the first option can be selected by our user, no actual data will be sent to the formhandler.php script which interprets the data in the form. We probably don’t want the word “Alberta” in any case; “AB” would be preferable for adding to a mailing list or database. To do this, we must add value attributes to each of these options:

表单本身不知道在开始和结束option标签之间的任何文本。 尽管我们的用户可以选择第一个选项，但不会将实际数据发送到formhandler.php脚本，该脚本会解释表单中的数据。 在任何情况下，我们可能都不希望使用“艾伯塔省”一词。 添加到邮件列表或数据库时，最好使用“ AB”。 为此，我们必须将value属性添加到以下每个选项中：

<select name="province"><option value="AB">Alberta<option value="BC">British Columbia
</select>

(Note that the value attribute can also be used to pre-set the text for an <input> textbox).

(请注意， value属性还可以用于为<input>文本框预先设置文本)。

Finally, the first option in our drop-drown menu will be auto-selected by default. This is not always a good thing. First, keep in mind our assumptions about our user. If we have pre-selected something, it is likely that he will skip over it to save time or simply miss it. It is better to prompt the user to make a selection and make that prompt selected by default, unless you can be absolutely certain that the vast majority of the respondents to your form will meet a pre-selected criteria.

最后，默认情况下将自动选择下拉菜单中的第一个选项。 这并不总是一件好事。 首先，请记住我们对用户的假设。 如果我们预先选择了某些内容，他可能会跳过它以节省时间或只是错过了它。 最好提示用户进行选择，并默认使该提示处于选中状态，除非您可以绝对确定表单的绝大多数答复者都将满足预选条件。

<select name="province"><option value="none" selected="selected"> -- choose one --<option value="AB">Alberta<option value="BC">British Columbia
</select>

You will find textbooks and online help that provide code to make multiple options in the drop-down list selectable, or which turns the select drop-down into a scrolling interface. Generally speaking, these practices are strongly inadvisable. People become confused when presented with them, leading to data entry errors.

您会找到教科书和在线帮助，这些教科书和在线帮助提供了使下拉列表中的多个选项变为可选的代码，或者将选择下拉列表变成了滚动界面。 一般来说，强烈建议不要使用这些做法。 人们在与他们在一起时会感到困惑，从而导致数据输入错误。

The optgroup element should be used to indicate groups of related options in a drop-down; the optgroup itself is not selectable. Rather confusingly, the optgroup has a required attribute, label, that is used to indicate the group reference.

optgroup元素应用于在下拉列表中指示相关选项的组 ； optgroup本身是不可选择的。 令人困惑的是， optgroup具有必需的属性label ，用于指示组引用。

For example, to show states in the US and provinces/territories in Canada in the same drop-down, we could do the following.

例如，要在同一下拉列表中显示美国各州和加拿大的省/地区，我们可以执行以下操作。

<label for="state" accesskey="s">State / Province / Territory</label>
<select name="state" id=state"><option value="">-- choose one --<optgroup label="USA"><option value="AL">Alabama<option value="CA">California<option> … remaining US states … </optgroup><optgroup label="Canada"><option value="AB">Alberta<option value="CA">British Columbia<option> … remaining provinces and territories … </optgroup>
</select>

In the browser, the result would look something like this:

在浏览器中，结果如下所示：

State / Province / Territory州/省/地区 -- choose one -- - 选一个 -

• Alabama阿拉巴马州California加利福尼亚州 … remaining US states … …美国其余州… Alberta艾伯塔省British Columbia不列颠哥伦比亚省 … remaining provinces and territories … ……其余省份和领土……

For a select menu this long and complicated, it is usually a good idea to use JavaScript to dynamically alter the content of the select based on user choices earlier in the form. For example, having the user choose their country first should reduce the number of visible options in the “state” drop-down to show only the relevant territories in their particular nation. This makes for a more intelligent and intuitive form, and a better user experience.

对于一个如此漫长而复杂的select菜单，通常最好使用JavaScript根据表单中较早的用户选择动态更改select内容。 例如，让用户首先选择他们的国家应该减少“州”下拉列表中可见选项的数量，以仅显示其特定国家/地区中的相关领土。 这使表格更智能，更直观，并提供了更好的用户体验。

Naturally, a <select> menu is not only used for geographical location; there are many instances in which it can be used to capture single answers from multiple possibilities: sizes when shopping for T-shirts, for example.

自然， <select>菜单不仅用于地理位置； 在很多情况下，它可以用来捕获多种可能性的单个答案：例如，购买T恤时的尺码。

翻译自: https://thenewcode.com/166/HTML-Forms-Drop-down-Menus

html表单下拉菜单