diff options
Diffstat (limited to 'files/zh-cn/web/html/element/select/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/select/index.html | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/select/index.html b/files/zh-cn/web/html/element/select/index.html new file mode 100644 index 0000000000..470f6ec2fa --- /dev/null +++ b/files/zh-cn/web/html/element/select/index.html @@ -0,0 +1,221 @@ +--- +title: <select> +slug: Web/HTML/Element/select +tags: + - Element + - Forms + - HTML + - HTML表单 + - 参考 + - 表单 +translation_of: Web/HTML/Element/select +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><select></code> 元素</strong>表示一个提供选项菜单的控件：</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</p> + +<p>上述例子展示了 <code><select></code> 的典型用法。元素中设置了 <code>id</code> 属性以将其与 {{htmlelement("label")}} 元素关联在一起，提高可及性（accessibility）。<code>name</code> 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <code><select></code> 中的一个 {{htmlelement("option")}} 元素定义。</p> + +<p>每个 <code><option></code> 元素都应该有一个 {{htmlattrxref("value", "option")}} 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 <code>value</code> 属性，则 <code>value</code> 值默认为元素中的文本。你可以在 <code><option></code> 元素中设置一个 {{htmlattrxref("selected")}} 属性以将其设置为页面加载完成时默认选中的元素。</p> + +<p><code><select></code> 元素有一些用于控制元素的特有属性，例如 <code>multiple</code> 规定了能不能同时选中多个选项，<code>size</code> 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 <code>required</code>, <code>disabled</code>, <code>autofocus</code> 等。</p> + +<p>你还可以将 <code><option></code> 元素放在 {{htmlelement("optgroup")}} 元素中以为下拉菜单创建不同的选项分组。</p> + +<p>在 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets">原生表单部件</a> 中查看更多示例。</p> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">包括下列<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</span></p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>一个 {{domxref("DOMString")}}，为 {{Glossary("user agent", "用户代理")}} 提供自动填充功能的线索。 关于该值的完整列表以及如何使用自动填充的详细信息，请参阅 <a href="/zh-CN/docs/Web/HTML/Attributes/自动完成属性">HTML 自动完成属性</a>。</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 <code>fieldset</code>；如果没有父元素设置了 <code>disabled</code> 属性, 那么默认该表单对象可用。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd> <code><select></code> 所关联的{{HTMLElement("form")}} (它的"表单拥有者")。其值必须是在同一文档中的 <code><form></code> 元素的{{htmlattrxref("id")}}（如果没有设置这个属性， <code><select></code> 元素则与其任何存在的祖先 <code><form></code> 元素关联）。</dd> + <dd>这个属性让你将 <code><select></code> 元素与文档中任意位置的 <code><form></code> 元素相关联，而不仅仅是包含 <code><select></code> 元素的 <code><form></code> 元素。这个属性还可以覆盖元素的祖先 <code><form></code> 元素。</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>该属性规定了控件的名称。</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>一个布尔值属性，表示必须选中一个有非空字符串值的选项。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>如果控件显示为滚动列表框（如声明了 <code>multiple</code>），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。</dd> +</dl> + +<div class="note"><strong>提示:</strong> 根据 HTML5 规范， 默认值应该为 1； 但是，在实践中，这样会影响到一些网站，同时其它浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。</div> + +<dl> +</dl> + +<h2 id="使用笔记">使用笔记</h2> + +<h3 id="选择多个选项">选择多个选项</h3> + +<p>在桌面电脑中，有几种方式在设置了 <code>multiple</code> 属性的 <code><select></code> 元素中选中多个选项：</p> + +<p>鼠标用户可以按住 <kbd>Ctrl</kbd>, <kbd>Command</kbd>, 或 <kbd>Shift</kbd> 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。</p> + +<div class="blockIndicator warning"> +<p><strong>警告：</strong>以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。</p> + +<p><strong>另请注意：</strong>在 macOS 中， <kbd>Ctrl</kbd> + <kbd>Up</kbd> 和 <kbd>Ctrl</kbd> + <kbd>Down</kbd> 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。</p> +</div> + +<p>键盘用户可以这样选中多个连续的选项：</p> + +<ul> + <li>聚焦于 <code><select></code> 元素（如使用 <kbd>Tab</kbd>）</li> + <li>使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键以从下向上或从上向下选择选项。</li> + <li>按住 <kbd>Shift</kbd> 键然后使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键来增加或减少选中的方向。</li> +</ul> + +<p>键盘用户还可以这样选中多个不连续的选项：</p> + +<ul> + <li>聚焦于 <code><select></code> 元素（例如使用 <kbd>Tab</kbd>）。</li> + <li>按住 <kbd>Ctrl</kbd> 键，然后使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键来改变聚焦的选项，聚焦的选项使用虚线轮廓高亮，和使用键盘聚焦链接的方式一样。</li> + <li>按下 <kbd>Space</kbd> 以选择或取消选择聚焦的选项。</li> +</ul> + +<h2 id="应用_CSS_样式">应用 CSS 样式</h2> + +<p>众所周知，<code><select></code>元素很难用 CSS 进行高效的设计。你可以像其他元素一样改变某些方面——例如，调整 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a>、<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts">显示的字体</a> 等，你还可以使用 {{cssxref("appearance")}} 属性来去除默认的系统外观。</p> + +<p>但是，这些属性的表现在不同浏览器之间并不一致，而且有些事情难以很好地处理，例如在一列中顺序排列不同类型的表单元素。 <code><select></code>元素的内部结构复杂，难以控制。 如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 来提供语义。</p> + +<p>有关样式<code><select></code>的更多有用信息，请参阅：</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="基本选择">基本选择</h3> + +<pre class="brush: html"><!-- 第二项会默认选中 --> +<select name="select"> + <option value="value1">Value 1</option> + <option value="value2" selected>Value 2</option> + <option value="value3">Value 3</option> +</select> +</pre> + +<h4 id="结果">结果</h4> + +<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p> + +<h3 id="使用多选的进阶选择">使用多选的进阶选择</h3> + +<p>下面的例子更加复杂，展示了可用在 <code><select></code> 元素上的更多功能：</p> + +<pre><label>Please choose one or more pets: + <select name="pets" multiple size="4"> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> +</label> +</pre> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="100" id="frame_Advanced_select_with_multiple_features" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/select$samples/Advanced_select_with_multiple_features?revision=1625986"></iframe></p> + +<p>你会看见：</p> + +<ul> + <li>可选中多个选项，因为我们使用了 <code>multiple</code> 属性。</li> + <li><code>size</code> 属性导致一次只有 4 行能显示；你可以滚动查看所有选项。</li> + <li>我们在其中使用了 {{htmlelement("optgroup")}} 元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。</li> + <li>"Hamster"选项使用了<code>disabled</code> 属性，因此不能被选中。</li> +</ul> + +<h2 id="技术概览">技术概览</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_labelable">labelable</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_resettable">resettable</a>, and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form-associated_">form-associated </a>element</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>Zero or more {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("combobox")}} with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise {{ARIARole("listbox")}}</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("menu")}} with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise no <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("html.elements.select")}}</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>其它表单对象: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li> + <li>由 <code><select></code> 触发的事件： {{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</li> +</ul> |