# html表单下拉菜单_HTML表单：下拉菜单

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.

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="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:

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

• 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恤时的尺码。

html表单下拉菜单

04-28 424
08-07 1万+
04-26 113
10-23 7万+
12-08 2929
10-24 1万+

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助
提交