initial commit

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>&lt;select&gt;</code> 元素</strong>表示一个提供选项菜单的控件：</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</p>
+
+<p>上述例子展示了 <code>&lt;select&gt;</code> 的典型用法。元素中设置了 <code>id</code> 属性以将其与 {{htmlelement("label")}} 元素关联在一起，提高可及性（accessibility）。<code>name</code> 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <code>&lt;select&gt;</code> 中的一个 {{htmlelement("option")}} 元素定义。</p>
+
+<p>每个 <code>&lt;option&gt;</code> 元素都应该有一个 {{htmlattrxref("value", "option")}} 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 <code>value</code> 属性，则 <code>value</code> 值默认为元素中的文本。你可以在 <code>&lt;option&gt;</code> 元素中设置一个 {{htmlattrxref("selected")}} 属性以将其设置为页面加载完成时默认选中的元素。</p>
+
+<p><code>&lt;select&gt;</code> 元素有一些用于控制元素的特有属性，例如 <code>multiple</code> 规定了能不能同时选中多个选项，<code>size</code> 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 <code>required</code>, <code>disabled</code>, <code>autofocus</code> 等。</p>
+
+<p>你还可以将 <code>&lt;option&gt;</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>&lt;select&gt;</code> 所关联的{{HTMLElement("form")}} (它的"表单拥有者")。其值必须是在同一文档中的 <code>&lt;form&gt;</code> 元素的{{htmlattrxref("id")}}（如果没有设置这个属性， <code>&lt;select&gt;</code> 元素则与其任何存在的祖先 <code>&lt;form&gt;</code> 元素关联）。</dd>
+ <dd>这个属性让你将 <code>&lt;select&gt;</code> 元素与文档中任意位置的 <code>&lt;form&gt;</code> 元素相关联，而不仅仅是包含 <code>&lt;select&gt;</code> 元素的 <code>&lt;form&gt;</code> 元素。这个属性还可以覆盖元素的祖先 <code>&lt;form&gt;</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>&lt;select&gt;</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>&lt;select&gt;</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>&lt;select&gt;</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>&lt;select&gt;</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>&lt;select&gt;</code>元素的内部结构复杂，难以控制。 如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 来提供语义。</p>
+
+<p>有关样式<code>&lt;select&gt;</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">&lt;!-- 第二项会默认选中 --&gt;
+&lt;select name="select"&gt;
+  &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+  &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
+  &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+&lt;/select&gt;
+</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>&lt;select&gt;</code> 元素上的更多功能：</p>
+
+<pre>&lt;label&gt;Please choose one or more pets:
+  &lt;select name="pets" multiple size="4"&gt;
+    &lt;optgroup label="4-legged pets"&gt;
+      &lt;option value="dog"&gt;Dog&lt;/option&gt;
+      &lt;option value="cat"&gt;Cat&lt;/option&gt;
+      &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Flying pets"&gt;
+      &lt;option value="parrot"&gt;Parrot&lt;/option&gt;
+      &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+      &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+</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', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</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>&lt;select&gt;</code> 触发的事件： {{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</li>
+</ul>