diff options
| author | Jason Lee <huacnlee@gmail.com> | 2022-01-04 17:38:26 +0800 |
|---|---|---|
| committer | Irvin <irvinfly@gmail.com> | 2022-02-15 22:48:15 +0800 |
| commit | 01b845e6d402777fe03cc4dd7ed5f21af400eed1 (patch) | |
| tree | b3d3d8272d9c7c5207ebb016d072a10d9b7e04ea /files/zh-cn/web/html/element/input | |
| parent | c1ed2f39d8921536444e3334bab549d7100a286e (diff) | |
| download | translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.tar.gz translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.tar.bz2 translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.zip | |
Improve copywriting for add spaces between Chinese and English words for files/zh-cn/web/html/element.
Diffstat (limited to 'files/zh-cn/web/html/element/input')
22 files changed, 318 insertions, 318 deletions
diff --git a/files/zh-cn/web/html/element/input/button/index.html b/files/zh-cn/web/html/element/input/button/index.html index de6f8031bb..61a701e3ae 100644 --- a/files/zh-cn/web/html/element/input/button/index.html +++ b/files/zh-cn/web/html/element/input/button/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/button --- <p>{{HTMLRef}}</p> -<p><span class="seoSummary"><code><strong>元素<input type="button"></strong></code> 是 <strong><code><input></code></strong> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a>元素取代</strong></span></p> +<p><span class="seoSummary"><code><strong>元素<input type="button"></strong></code> 是 <strong><code><input></code></strong> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在 HTML5 被 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a>元素取代</strong></span></p> <p>浏览器生成一个控件没有默认值的可点击按钮。该按钮上可有任何标签。该控件在不同的浏览器上，可能有不同的样式。</p> @@ -198,7 +198,7 @@ translation_of: Web/HTML/Element/input/button <tr> <th>Feature</th> <th>Android</th> - <th>Firefox 移动版(Gecko)</th> + <th>Firefox 移动版 (Gecko)</th> <th>IE 移动版</th> <th>Opera 移动版</th> <th>Safari 移动版</th> @@ -247,5 +247,5 @@ translation_of: Web/HTML/Element/input/button <ul> <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> - <li>HTML5的替代方式为 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong> 元素</li> + <li>HTML5 的替代方式为 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong> 元素</li> </ul> diff --git a/files/zh-cn/web/html/element/input/checkbox/index.html b/files/zh-cn/web/html/element/input/checkbox/index.html index 4f349c2449..aeb7784bd1 100644 --- a/files/zh-cn/web/html/element/input/checkbox/index.html +++ b/files/zh-cn/web/html/element/input/checkbox/index.html @@ -3,10 +3,10 @@ title: <input type="checkbox"> slug: Web/HTML/Element/Input/checkbox translation_of: Web/HTML/Element/input/checkbox --- -<p><span class="seoSummary">HTML input元素 <strong><code><input type="checkbox"></code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p> +<p><span class="seoSummary">HTML input 元素 <strong><code><input type="checkbox"></code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p> <div class="note"> -<p><strong>注意</strong>： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。</p> +<p><strong>注意</strong>： 若表单提交时，checkbox 未勾选，则提交的值并非为 value=unchecked；此时的值不会被提交到服务器。</p> </div> <h2 id="属性">属性</h2> @@ -16,13 +16,13 @@ translation_of: Web/HTML/Element/input/checkbox <dl> <dt>{{htmlattrdef("checked")}}</dt> <dd> - <p>当<strong>type</strong>属性的值为<code>checkbox时</code>, 这个属性的存在表示input是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p> + <p>当<strong>type</strong>属性的值为<code>checkbox 时</code>, 这个属性的存在表示 input 是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p> </dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>指定input的值。如果省略，获取该元素的值的结果为字符串"on"。<br> - 请注意，如果value值发生改变后页面重新加载，Gecko和IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略HTML源代码中设置的value值</a>。</dd> + <dd>指定 input 的值。如果省略，获取该元素的值的结果为字符串"on"。<br> + 请注意，如果 value 值发生改变后页面重新加载，Gecko 和 IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略 HTML 源代码中设置的 value 值</a>。</dd> <dt>{{htmlattrdef("indeterminate")}}</dt> - <dd>指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。</dd> + <dd>指定 checkbox 处于不定状态（在大多数平台，这样会产生一个划过 checkbox 的横线）。</dd> </dl> <h2 id="Example">示例</h2> @@ -37,7 +37,7 @@ translation_of: Web/HTML/Element/input/checkbox </p> </pre> -<p>以上代码将产生2个checkbox，如下所示：</p> +<p>以上代码将产生 2 个 checkbox，如下所示：</p> <p>{{EmbedLiveSample("Example")}}</p> diff --git a/files/zh-cn/web/html/element/input/color/index.html b/files/zh-cn/web/html/element/input/color/index.html index 0645e125e6..dbf1d2c6c6 100644 --- a/files/zh-cn/web/html/element/input/color/index.html +++ b/files/zh-cn/web/html/element/input/color/index.html @@ -3,15 +3,15 @@ title: <input type="color"> slug: Web/HTML/Element/Input/color translation_of: Web/HTML/Element/input/color --- -<p><strong><code><input type="color"></code>元素</strong>是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）</p> +<p><strong><code><input type="color"></code>元素</strong>是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域。（不支持 Alpha 通道）</p> -<p>此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。（<a href="https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29">更多信息</a>）</p> +<p>此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其 UI 除要能接收文本格式的颜色外，未要求其他特性。（<a href="https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29">更多信息</a>）</p> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容分类</a></th> - <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流动区域</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_listed">列表</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_submittable">可提交</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_resettable">可重置</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form-associated_content">表单相关元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>, 可标记元素, 可触摸元素。</td> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流动区域</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_listed">列表</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_submittable">可提交</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_resettable">可重置</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form-associated_content">表单相关元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>, 可标记元素，可触摸元素。</td> </tr> <tr> <th scope="row">允许的内容</th> @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/input/color <td>任何接受<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td> </tr> <tr> - <th scope="row">DOM接口</th> + <th scope="row">DOM 接口</th> <td>{{domxref("HTMLInputElement")}}</td> </tr> </tbody> @@ -38,17 +38,17 @@ translation_of: Web/HTML/Element/input/color <dl> <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt> - <dd>设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。</dd> + <dd>设置颜色区域的 autocomplete 值。如果为 true，则将自动填充颜色选择器上次存储的值。</dd> <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt> <dd>此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有<strong>autofocus</strong>属性，值为布尔值。</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。</p> + <p>此布尔值标明颜色选择其是否不可用于交互。另外，disabled 时的值不会随表单提交。</p> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>随表单一起提交的颜色选择器的name。</dd> + <dd>随表单一起提交的颜色选择器的 name。</dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。</dd> + <dd>颜色选择器的 value，指定颜色选择器默认选择的颜色。input 的 value 值必须是长度为 7 的字符串，以#开始，包含 16 进制格式的颜色值。例如：#FF0000 为红色的 16 进制值。</dd> </dl> <h2 id="使用">使用</h2> @@ -69,11 +69,11 @@ translation_of: Web/HTML/Element/input/color <p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> -<p>下面的图片展示了macOS平台Chrome浏览器的颜色选择器：</p> +<p>下面的图片展示了 macOS 平台 Chrome 浏览器的颜色选择器：</p> <p><img alt="This is how an input type color looks on Mac and within Chrome" src="https://mdn.mozillademos.org/files/12311/Input_Type_Color_sample.png" style="height: 400px; width: 318px;"></p> -<p>如果你没有手动指定的话，元素的默认值为<code>"#000000"</code>，即黑色。输入必须为7个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如<code>"#rrggbb"</code>。如果你想输入的颜色是其他格式（比如CSS中的<code>rgb()</code>或<code>rgba()</code>记法），在设定<code>value</code>值时必须将其转换为这种格式。</p> +<p>如果你没有手动指定的话，元素的默认值为<code>"#000000"</code>，即黑色。输入必须为 7 个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各 2 个，形如<code>"#rrggbb"</code>。如果你想输入的颜色是其他格式（比如 CSS 中的<code>rgb()</code>或<code>rgba()</code>记法），在设定<code>value</code>值时必须将其转换为这种格式。</p> <h3 id="监听颜色变化">监听颜色变化</h3> @@ -103,21 +103,21 @@ colorPicker<span class="punctuation token">.</span><span class="function token"> <h3 id="实现差异">实现差异</h3> -<p>如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在Safari 10.1中，你将会看到以下内容：</p> +<p>如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在 Safari 10.1 中，你将会看到以下内容：</p> <p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> -<p>而相同的内容在Firefox 55下则会显示成：</p> +<p>而相同的内容在 Firefox 55 下则会显示成：</p> <p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> -<p>如果点击元素，则会弹出选色器，在此例中，为macOS平台的选色器。</p> +<p>如果点击元素，则会弹出选色器，在此例中，为 macOS 平台的选色器。</p> <p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> <h2 id="验证">验证</h2> -<p>如果当前的{{Glossary("user agent")}}下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。</p> +<p>如果当前的{{Glossary("user agent")}}下，用户输入无法转换为 7 个字符的十六进制 RGB 形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。</p> <h2 id="规范">规范</h2> @@ -217,4 +217,4 @@ colorPicker<span class="punctuation token">.</span><span class="function token"> </table> </div> -<p id="footnote_1">[1] 在Windows Touch上尚未实现。</p> +<p id="footnote_1">[1] 在 Windows Touch 上尚未实现。</p> diff --git a/files/zh-cn/web/html/element/input/date/index.html b/files/zh-cn/web/html/element/input/date/index.html index 70199c42e2..1ec9f893fd 100644 --- a/files/zh-cn/web/html/element/input/date/index.html +++ b/files/zh-cn/web/html/element/input/date/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTML/Element/input/date --- <p>{{HTMLRef}}</p> -<p>日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。<a href="/en-US/docs/Web/HTML/Element/input/time">time</a> 和 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>输入类支持time 和 date/time 输入。</p> +<p>日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。<a href="/en-US/docs/Web/HTML/Element/input/time">time</a> 和 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>输入类支持 time 和 date/time 输入。</p> -<p>通常来说控件的UI界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a>输入框。</p> +<p>通常来说控件的 UI 界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a>输入框。</p> <div id="Basic_example"> <pre class="brush: html"><input id="date" type="date"></pre> @@ -15,15 +15,15 @@ translation_of: Web/HTML/Element/input/date <p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> </div> -<p>其中，Chrome/Opera浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：</p> +<p>其中，Chrome/Opera 浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> -<p>Edge的日期控件看起来是这样子的:</p> +<p>Edge 的日期控件看起来是这样子的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> -<p>Firefox的日期控件看起来是这样子的:</p> +<p>Firefox 的日期控件看起来是这样子的：</p> <p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> @@ -62,16 +62,16 @@ translation_of: Web/HTML/Element/input/date <p>有一点需要注意的是，在格式方面显示的日期与实际的不一样 — 显示的日期格式取决于用户浏览器的区域设定，而日期值的格式始终为 <code>yyyy-mm-dd。</code></p> -<p>当然你也可以在JavaScript中通过input元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如:</p> +<p>当然你也可以在 JavaScript 中通过 input 元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如：</p> <pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01';</pre> -<p>这行代码查找类型为date的第一个input元素，并且将其值设置为2017-06-01（2017年6月1日）</p> +<p>这行代码查找类型为 date 的第一个 input 元素，并且将其值设置为 2017-06-01（2017 年 6 月 1 日）</p> <h2 id="使用日期输入控件">使用日期输入控件</h2> -<p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择UI界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> +<p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择 UI 界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> <p>我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅{{anch("Handling browser support")}}）。</p> @@ -101,25 +101,25 @@ dateControl.value = '2017-06-01';</pre> <p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> -<p>在结果中我们可以看到，只有2017年4月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出4月份以外的日期不能通过日期控件的选择小部件选择。</p> +<p>在结果中我们可以看到，只有 2017 年 4 月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出 4 月份以外的日期不能通过日期控件的选择小部件选择。</p> <div class="note"> -<p><strong>注意</strong>: 您应该可以使用step属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。</p> +<p><strong>注意</strong>: 您应该可以使用 step 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。</p> </div> <h3 id="控制输入框大小">控制输入框大小</h3> -<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助.</p> +<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助。</p> <h2 id="验证">验证</h2> -<p>默认情况下, <code><input type="date"></code> 对输入的值不会做任何校验。 UI实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者 (在被优雅降级为 <code>text</code> 类型的输入框) 输入一个不合法的值 (例如： 4月32号)。</p> +<p>默认情况下，<code><input type="date"></code> 对输入的值不会做任何校验。 UI 实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者 (在被优雅降级为 <code>text</code> 类型的输入框) 输入一个不合法的值 (例如： 4 月 32 号)。</p> -<p>如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而, 你必须检查这些结果以确保他们在这些日期范围内, 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> +<p>如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而， 你必须检查这些结果以确保他们在这些日期范围内， 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> -<p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期, 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> +<p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期， 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> -<p>让我们看一个例子 — 我们设置了日期的最大和最小值, 并且设定为必填:</p> +<p>让我们看一个例子 — 我们设置了日期的最大和最小值， 并且设定为必填：</p> <pre class="brush: html"><form> <div> @@ -132,15 +132,15 @@ dateControl.value = '2017-06-01';</pre> </div> </form></pre> -<p>如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子:</p> +<p>如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子：</p> <p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> -<p>这个截图是为那些浏览器不支持的人准备的:</p> +<p>这个截图是为那些浏览器不支持的人准备的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>这是上面例子使用的css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身, 因为在Chrome中被放置在表单中生成的内容不能有效的样式化或者显示。</p> +<p>这是上面例子使用的 css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身， 因为在 Chrome 中被放置在表单中生成的内容不能有效的样式化或者显示。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -164,18 +164,18 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>重要</strong>: HTML表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整HTML绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> +<p><strong>重要</strong>: HTML 表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整 HTML 绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> </div> <h2 id="手持設備浏览器支持">手持設備浏览器支持</h2> -<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}} （浏览器支持）. 举一个例子, 在安卓系统的Firefox中选择器是这样子的:</p> +<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}}（浏览器支持）. 举一个例子， 在安卓系统的 Firefox 中选择器是这样子的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> -<p>在不支持的浏览器上会被降级为文本输入框, 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。</p> +<p>在不支持的浏览器上会被降级为文本输入框， 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。</p> -<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如:</p> +<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如：</p> <ul> <li><code>ddmmyyyy</code></li> @@ -186,7 +186,7 @@ input:valid+span:after { <li><code>Month dd yyyy</code></li> </ul> -<p> 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子:</p> +<p> 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子：</p> <pre class="brush: html"><form> <div> @@ -201,7 +201,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> -<p>如果你尝试提交，如果你的输入不符合正则表达式 <code>nnn-nn-nn</code>（<code>n</code> 是0到9的数字）， 你将会看到浏览器显示一个错误(并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如<code>yyyy-dd-mm</code> (而我们想要的 <code>yyyy-mm-dd</code>)。因此我们仍然有一个问题。</p> +<p>如果你尝试提交，如果你的输入不符合正则表达式 <code>nnn-nn-nn</code>（<code>n</code> 是 0 到 9 的数字）， 你将会看到浏览器显示一个错误 (并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如<code>yyyy-dd-mm</code> (而我们想要的 <code>yyyy-mm-dd</code>)。因此我们仍然有一个问题。</p> <div class="hidden"> <pre class="brush: css">div { @@ -229,17 +229,17 @@ input:valid + span:after { }</pre> </div> -<p>目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用JavaScript库， 例如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> +<p>目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用 JavaScript 库， 例如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> <h2 id="例子">例子</h2> -<p>在这个例子中，我们创建了两组用于选择日期的UI元素: 一个本地 <code><input type="date"></code> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。</p> +<p>在这个例子中，我们创建了两组用于选择日期的 UI 元素: 一个本地 <code><input type="date"></code> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。</p> <p>{{ EmbedLiveSample('Examples', 600, 100) }}</p> <h3 id="HTML">HTML</h3> -<p>HTML看起来像这样:</p> +<p>HTML 看起来像这样：</p> <pre class="brush: html"><form> <div class="nativeDatePicker"> @@ -279,7 +279,7 @@ input:valid + span:after { </div> </form></pre> -<p>月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的(请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)</p> +<p>月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的 (请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)</p> <div class="hidden"> <pre class="brush: css">input:invalid+span:after { @@ -295,7 +295,7 @@ input:valid+span:after { <h3 id="JavaScript">JavaScript</h3> -<p>代码的另一部分也可能是最有意思的部分那就是特征检验代码 — 去检测浏览器是否支持 <code><input type="date"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素, 设置它的 <code>type</code> 为 <code>date</code>,然后立刻检查它的类型 —不支持的浏览器将会返回 <code>text</code>, 因为 <code>date</code> 类型会被优雅的降级为<code>text</code>。如果 <code><input type="date"></code> 不被浏览器支持, 我们隐藏本地选取器并用备用选取器UI ({{htmlelement("select")}}) 替代.</p> +<p>代码的另一部分也可能是最有意思的部分那就是特征检验代码 — 去检测浏览器是否支持 <code><input type="date"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素， 设置它的 <code>type</code> 为 <code>date</code>,然后立刻检查它的类型 —不支持的浏览器将会返回 <code>text</code>, 因为 <code>date</code> 类型会被优雅的降级为<code>text</code>。如果 <code><input type="date"></code> 不被浏览器支持， 我们隐藏本地选取器并用备用选取器 UI ({{htmlelement("select")}}) 替代。</p> <pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); @@ -412,7 +412,7 @@ daySelect.onchange = function() { }</pre> <div class="note"> -<p><strong>注意</strong>: 请记住有些年份有53周 (请看 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! 当你开发应用程序时需要考虑到这一点。</p> +<p><strong>注意</strong>: 请记住有些年份有 53 周 (请看 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! 当你开发应用程序时需要考虑到这一点。</p> </div> <h2 id="规范">规范</h2> @@ -500,6 +500,6 @@ daySelect.onchange = function() { <h2 id="也可以参见">也可以参见</h2> <ul> - <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口, {{domxref("HTMLInputElement")}}</li> + <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口，{{domxref("HTMLInputElement")}}</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/datetime-local/index.html b/files/zh-cn/web/html/element/input/datetime-local/index.html index 5f94c41650..367e59de60 100644 --- a/files/zh-cn/web/html/element/input/datetime-local/index.html +++ b/files/zh-cn/web/html/element/input/datetime-local/index.html @@ -5,11 +5,11 @@ translation_of: Web/HTML/Element/input/datetime-local --- <div>{{HTMLRef}}</div> -<p>{{htmlelement("input")}} 元素的 <code><strong>datetime-local </strong></code>类型创建让用户便捷输入日期和时间的输入控件，包括“年”、“月”、“日”，以及“时”和“分”。</p> +<p>{{htmlelement("input")}} 元素的 <code><strong>datetime-local </strong></code>类型创建让用户便捷输入日期和时间的输入控件，包括 “年”、“月”、“日”，以及 “时” 和 “分”。</p> <p>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</p> -<p>所使用的是用户所在时区。此控件的样式因浏览器而异；目前支持的浏览器为数不多，桌面端仅有 Chrome/Opera 和 Edge，移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中，此类型会降级显示为简单的 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 控件.</p> +<p>所使用的是用户所在时区。此控件的样式因浏览器而异；目前支持的浏览器为数不多，桌面端仅有 Chrome/Opera 和 Edge，移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中，此类型会降级显示为简单的 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 控件。</p> <p>控件不支持输入秒。</p> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/input/datetime-local <tbody> <tr> <td><strong>{{anch("Value")}}</strong></td> - <td>一个表示日期和时间的 {{domxref("DOMString")}} （本地时区）或空值。</td> + <td>一个表示日期和时间的 {{domxref("DOMString")}}（本地时区）或空值。</td> </tr> <tr> <td><strong>事件</strong></td> @@ -64,10 +64,10 @@ translation_of: Web/HTML/Element/input/datetime-local <p>一件需要注意的事情是显示的日期时间的格式与实际 <code>value</code> 里的格式不同，显示的日期和时间格式以用户操作系统所的区域设置信息为准，而控件的日期/时间值 <code>value</code> 总是 <code>yyyy-MM-ddThh:mm</code> 格式。例如，当上例中的值被提供到服务器之后，将会像这样 <code>partydate=2017-06-01T08:30</code>.</p> <div class="note"> -<p>另外请注意，如果这样的数据以 HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 提交，时间部分的冒号“:”需要编码之后才能放在 URL 参数中，例如 <code>partydate=2017-06-01T08%3A30</code>。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} 。</p> +<p>另外请注意，如果这样的数据以 HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 提交，时间部分的冒号 “:” 需要编码之后才能放在 URL 参数中，例如 <code>partydate=2017-06-01T08%3A30</code>。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} 。</p> </div> -<p>你也可以在 JavaScript中使用 {{domxref("HTMLInputElement.value")}} 属性来获取和设置日期的值，例如：</p> +<p>你也可以在 JavaScript 中使用 {{domxref("HTMLInputElement.value")}} 属性来获取和设置日期的值，例如：</p> <pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); dateControl.value = '2017-06-01T08:30';</pre> @@ -103,8 +103,8 @@ dateControl.value = '2017-06-01T08:30';</pre> <p>结果如下：</p> <ul> - <li>只有“2017年6月”可供选择 —— 只有“日期”部分的值可修改，并且6月以外的日期不能被选到日期控件内</li> - <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如Chrome）</li> + <li>只有 “2017 年 6 月” 可供选择 —— 只有 “日期” 部分的值可修改，并且 6 月以外的日期不能被选到日期控件内</li> + <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如 Chrome）</li> </ul> <div class="note"> @@ -145,7 +145,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <h2 id="校验">校验</h2> -<p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4月32日）。</p> +<p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4 月 32 日）。</p> <p>你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 anch("设定日期时间的最大值和最小值")），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。</p> @@ -170,7 +170,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> -<p>这里有上面例子的CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。</p> +<p>这里有上面例子的 CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。</p> <pre class="brush: css notranslate">div { margin-bottom: 10px; @@ -194,7 +194,7 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>重要提示：</strong>HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候 （或是数据太大，或是格式错误，等等）。</p> +<p><strong>重要提示：</strong>HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候（或是数据太大，或是格式错误，等等）。</p> </div> <h2 id="处理浏览器支持">处理浏览器支持</h2> @@ -213,8 +213,8 @@ input:valid+span:after { <li><code>mm/dd/yyyy</code></li> <li><code>dd-mm-yyyy</code></li> <li><code>mm-dd-yyyy</code></li> - <li><code>mm-dd-yyyy hh:mm</code> （12小时制）</li> - <li><code>mm-dd-yyyy HH:mm</code> （24小时制）</li> + <li><code>mm-dd-yyyy hh:mm</code> （12 小时制）</li> + <li><code>mm-dd-yyyy HH:mm</code> （24 小时制）</li> <li>等等</li> </ul> @@ -236,7 +236,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('处理浏览器支持', 600, 100) }}</p> -<p>你试一下提交数据，如果你输入的内容不满足 <code>nnnn-nn-nnTnn:nn</code> 格式（n为0 ~ 9的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。</p> +<p>你试一下提交数据，如果你输入的内容不满足 <code>nnnn-nn-nnTnn:nn</code> 格式（n 为 0 ~ 9 的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。</p> <p>然而什么样的用户会去理解这样一个他们要输入的日期和时间格式呢？</p> @@ -268,15 +268,15 @@ input:valid + span:after { }</pre> </div> -<p>目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript库，如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> 及 <a href="http://timepicker.co/">jQuery timepicker plugin</a>。</p> +<p>目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript 库，如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> 及 <a href="http://timepicker.co/">jQuery timepicker plugin</a>。</p> <h2 id="例子">例子</h2> -<p>在这个例子中，我们创建两套UI元素来选择日期时间 —— 一套原生的 <code><input type="datetime-local"></code> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。</p> +<p>在这个例子中，我们创建两套 UI 元素来选择日期时间 —— 一套原生的 <code><input type="datetime-local"></code> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。</p> <p>{{ EmbedLiveSample('例子', 600, 140) }}</p> -<p>HTML代码如下：</p> +<p>HTML 代码如下：</p> <pre class="brush: html notranslate"><form> <div class="nativeDateTimePicker"> @@ -359,7 +359,7 @@ input:valid+span:after { }</pre> </div> -<p>代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <code><input type="datetime-local"></code>，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 <code>type</code> 为 <code>datetime-local</code>，然后立即检查它被设置的类型。不支持 <code>datetime-local</code> 的浏览器返回 <code>text</code>，因为这就是 <code>datetime-local</code> 要回退的类型。 如果 <code><input type="datetime-local"></code> 不被支持，我们隐藏原生的控件并显示备用的控件UI （{{htmlelement("select")}}）来替代。</p> +<p>代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <code><input type="datetime-local"></code>，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 <code>type</code> 为 <code>datetime-local</code>，然后立即检查它被设置的类型。不支持 <code>datetime-local</code> 的浏览器返回 <code>text</code>，因为这就是 <code>datetime-local</code> 要回退的类型。 如果 <code><input type="datetime-local"></code> 不被支持，我们隐藏原生的控件并显示备用的控件 UI （{{htmlelement("select")}}）来替代。</p> <pre class="brush: js notranslate">// define variables var nativePicker = document.querySelector('.nativeDateTimePicker'); @@ -497,7 +497,7 @@ daySelect.onchange = function() { }</pre> <div class="note"> -<p><strong>注意：请记住某些年份有53个星期（见</strong><a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a><strong>）！当你在开发产品应用时应当考虑这个问题。</strong></p> +<p><strong>注意：请记住某些年份有 53 个星期（见</strong><a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a><strong>）！当你在开发产品应用时应当考虑这个问题。</strong></p> </div> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/input/email/index.html b/files/zh-cn/web/html/element/input/email/index.html index 98fa9af208..0814303bc3 100644 --- a/files/zh-cn/web/html/element/input/email/index.html +++ b/files/zh-cn/web/html/element/input/email/index.html @@ -12,10 +12,10 @@ translation_of: Web/HTML/Element/input/email --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">带有 <code><strong>"email"</strong></code> (电子邮箱)类型标记的输入框元素({{HTMLElement("input")}})能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式).</span> CSS伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。</p> +<p><span class="seoSummary">带有 <code><strong>"email"</strong></code> (电子邮箱) 类型标记的输入框元素 ({{HTMLElement("input")}}) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式).</span> CSS 伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。</p> <div class="note"> -<p><strong>注意</strong>: 不支持“电子邮件”类型的浏览器可以回退为标准的“文本”输入。</p> +<p><strong>注意</strong>: 不支持 “电子邮件” 类型的浏览器可以回退为标准的 “文本” 输入。</p> </div> <div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-standard")}}</div> @@ -72,14 +72,14 @@ translation_of: Web/HTML/Element/input/email -<p>电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件”输入类型可以使您作为Web开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值“email”创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。</p> +<p>电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件” 输入类型可以使您作为 Web 开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值 “email” 创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。</p> <p>然而，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，对应于站点的用户，或者以任何其他方式可接受。 它只是确保将字段的值正确格式化为电子邮件地址。</p> <div class="note"> -<p><strong>注意：记住用户可以在幕后修改HTML也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。</strong></p> +<p><strong>注意：记住用户可以在幕后修改 HTML 也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。</strong></p> </div> <h3 id="A_simple_email_input">A simple email input</h3> @@ -192,12 +192,12 @@ translation_of: Web/HTML/Element/input/email <p>There are two levels of content validation available for <code>"email"</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid email address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> <div class="warning"> -<p><strong>重要提示：HTML表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整HTML非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的HTML并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。</strong></p> +<p><strong>重要提示：HTML 表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整 HTML 非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的 HTML 并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。</strong></p> </div> <h3 id="Basic_validation">Basic validation</h3> -<p>支持“电子邮件”输入类型的浏览器会自动提供验证，以确保只有符合Internet电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：</p> +<p>支持 “电子邮件” 输入类型的浏览器会自动提供验证，以确保只有符合 Internet 电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：</p> <pre class="brush: js">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ diff --git a/files/zh-cn/web/html/element/input/file/index.html b/files/zh-cn/web/html/element/input/file/index.html index c05b5c51e4..e5b6df3c32 100644 --- a/files/zh-cn/web/html/element/input/file/index.html +++ b/files/zh-cn/web/html/element/input/file/index.html @@ -70,7 +70,7 @@ translation_of: Web/HTML/Element/input/file <div class="note"><strong>Note:</strong> <ol> - <li>如果选择了多个文件, 这个值表示第一个已选择文件的路径。JavaScript 可以<a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_files">通过 input 的 files 属性访问其他文件</a>。</li> + <li>如果选择了多个文件，这个值表示第一个已选择文件的路径。JavaScript 可以<a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_files">通过 input 的 files 属性访问其他文件</a>。</li> <li>如果没有选择文件，该值为空字符串 <code>""</code>。</li> <li>为了阻止恶意软件猜测文件路径，字符串<a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">以 C:\fakepath\ 为前缀</a>。</li> </ol> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input/file <p>如果出现布尔属性 <code>webkitdirectory，</code>表示在文件选择器界面中用户只能选择目录。更多细节和示例见 {{domxref("HTMLInputElement.webkitdirectory")}}。</p> <div class="note"> -<p><strong>Note:</strong> 尽管 <code>webkitdirectory</code> 最初仅为基于webkit的浏览器实现，它还在Microsoft Edge和Firefox 50及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。</p> +<p><strong>Note:</strong> 尽管 <code>webkitdirectory</code> 最初仅为基于 webkit 的浏览器实现，它还在 Microsoft Edge 和 Firefox 50 及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。</p> </div> </div> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/file <ul> <li>一个以英文句号（"."）开头的合法的不区分大小写的文件名扩展名。例如： <code>.jpg</code>，<code>.pdf</code> 或 <code>.doc</code>。</li> <li>一个不带扩展名的 MIME 类型字符串。</li> - <li>字符串 <code>audio/*</code>， 表示“任何音频文件”。</li> + <li>字符串 <code>audio/*</code>， 表示 “任何音频文件”。</li> <li>字符串 <code>video/*</code>，表示 “任何视频文件”。</li> <li>字符串 <code>image/*</code>，表示 “任何图片文件”。</li> </ul> @@ -217,7 +217,7 @@ translation_of: Web/HTML/Element/input/file <dt><code>name</code></dt> <dd>文件名。</dd> <dt><code>lastModified</code></dt> - <dd>一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970年1月1日午夜）以来的毫秒数表示。</dd> + <dd>一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970 年 1 月 1 日午夜）以来的毫秒数表示。</dd> <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> <dd>一个 {{jsxref("Date")}} 对象，表示文件最后一次修改的日期和时间。<em>这被弃用，并且不应使用。使用 <code>lastModified</code> 作为替代</em>。</dd> <dt><code>size</code></dt> @@ -300,7 +300,7 @@ input.value = "foo"; <p>在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 <code>HTMLInputElement.files</code> 属性中可用的文件信息，并且展示了一些聪明的技巧。</p> <div class="note"> -<p><strong>Note</strong>: 你可以在 GitHub 中查看本示例的完整源代码 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> （<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">在线运行</a>）。我们不会解释 CSS；JavaScript是主要的关注点。</p> +<p><strong>Note</strong>: 你可以在 GitHub 中查看本示例的完整源代码 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> （<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">在线运行</a>）。我们不会解释 CSS；JavaScript 是主要的关注点。</p> </div> <p>首先，让我们看看 HTML：</p> @@ -376,7 +376,7 @@ form label:active, form button:active { <p>这和我们之前看到的类似 — 没有什么要说明的。</p> -<p>接下来，让我们看一下JavaScript。</p> +<p>接下来，让我们看一下 JavaScript。</p> <p>在脚本的第一行，我们获得了对表单 input 本身和拥有 <code>.preview</code> 类的 {{htmlelement("div")}} 元素的引用。然后，我们隐藏了 {{htmlelement("input")}} 元素 — 我们这样做是因为文件输入往往很难看，难于设计样式，而且在跨浏览器中对它们的设计不一致。你可以通过单击 <code>input</code> 元素来激活它，因此，最好在视觉上隐藏 input 并将 label 设计成按钮的样式，这样用户如果想上传文件就会知道如何与之交互。</p> @@ -396,9 +396,9 @@ input.style.opacity = 0;</pre> <p>每当 <code>updateImageDisplay()</code> 函数被调用时，我们：</p> <ul> - <li>使用一个 {{jsxref("Statements/while", "while")}} 循环来清空preview <code><div></code> 留下的内容。</li> + <li>使用一个 {{jsxref("Statements/while", "while")}} 循环来清空 preview <code><div></code> 留下的内容。</li> <li>获取包含所有已选择文件信息的 {{domxref("FileList")}} 对象，并将其用一个变量 <code>curFiles</code> 保存。</li> - <li>通过检查 <code>curFiles.length</code> 是否等于0来检查是否没有文件被选择。如果是，则用 preview <code><div></code> 输出一条消息，来表示没有选择文件。</li> + <li>通过检查 <code>curFiles.length</code> 是否等于 0 来检查是否没有文件被选择。如果是，则用 preview <code><div></code> 输出一条消息，来表示没有选择文件。</li> <li>如果<em>选择</em>了文件，我们将循环遍历每个文件，并将关于它的信息输出到 preview <code><div></code>。注意事项：</li> <li>我们使用定制的 <code>validFileType()</code> 函数来检查文件的类型是否正确。（例如，用 <code>accept</code> 属性指定的图片类型）。</li> <li>如果是，我们： @@ -509,5 +509,5 @@ function validFileType(file) { <ul> <li><a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications">在 web 应用中使用文件</a> — 包含许多其它关于 <code><input type="file"></code> 和 <a href="/zh-CN/docs/Web/API/File">File API</a> 的有用示例。</li> - <li><a href="zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CCSS属性兼容性</a></li> + <li><a href="zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CCSS 属性兼容性</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/hidden/index.html b/files/zh-cn/web/html/element/input/hidden/index.html index a1ed459082..c7a5d72c3d 100644 --- a/files/zh-cn/web/html/element/input/hidden/index.html +++ b/files/zh-cn/web/html/element/input/hidden/index.html @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/input/hidden </table> <div class="blockIndicator note"> -<p><strong>注意：</strong><code>{{HTMLElement("input")}}</code>和<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/change">change</a></code>事件不适用于此输入类型。隐藏的输入无法获得焦点, 即使使用JavaScript 例如(e.g. <code>hiddenInput.focus()</code>)</p> +<p><strong>注意：</strong><code>{{HTMLElement("input")}}</code>和<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/change">change</a></code>事件不适用于此输入类型。隐藏的输入无法获得焦点， 即使使用 JavaScript 例如 (e.g. <code>hiddenInput.focus()</code>)</p> </div> <h2 id="属性值">属性值</h2> @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/input/hidden <p><code>{{HTMLElement("input")}}</code>元素的<code>{{htmlattrxref("value", "input")}}</code>属性有<code>{{domxref("DOMString")}}</code>，其中包含您想提交到服务器的隐藏数据尽管您可以通过浏览器开发人员工具编辑该值，但明确的是，用户不能通过用户界面对其编辑或看到。</p> <div class="warning"> -<p><strong>重要提示：</strong>尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能来查看并进行编辑。 请不要依赖 <code>hidden</code> 输入作为安全表单。</p> +<p><strong>重要提示：</strong>尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或 “查看源代码” 功能来查看并进行编辑。 请不要依赖 <code>hidden</code> 输入作为安全表单。</p> </div> <h2 id="额外属性">额外属性</h2> @@ -95,11 +95,11 @@ translation_of: Web/HTML/Element/input/hidden <ol> <li>用户决定编辑他们可以控制的某些内容，例如博客文章或产品条目。 他们可以通过按编辑按钮开始。</li> - <li>要被编辑的内容从数据库中提取并加载到HTML表单中，以允许用户进行更改。</li> + <li>要被编辑的内容从数据库中提取并加载到 HTML 表单中，以允许用户进行更改。</li> <li>编辑后，用户提交表单，并将更新后的被数据发送回服务器以在数据库中进行更新。</li> </ol> -<p>在这里的步骤2思路中，要被更新的ID记录保留在隐藏的输入中。 在步骤3中提交表单后，该ID随记录内容自动发送回服务器。 该ID使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。</p> +<p>在这里的步骤 2 思路中，要被更新的 ID 记录保留在隐藏的输入中。 在步骤 3 中提交表单后，该 ID 随记录内容自动发送回服务器。 该 ID 使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。</p> <p>您可以在下面的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">{{anch("例子")}}</a> 部分中看到完整的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">示例</a>。</p> @@ -119,9 +119,9 @@ translation_of: Web/HTML/Element/input/hidden <h2 id="例子">例子</h2> -<p>让我们看一下如何使用隐藏输入保存正在被编辑的记录的ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content">{{anch("Tracking edited content")}}</a></code>）。</p> +<p>让我们看一下如何使用隐藏输入保存正在被编辑的记录的 ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content">{{anch("Tracking edited content")}}</a></code>）。</p> -<p>编辑表单的HTML可能看起来像这样：</p> +<p>编辑表单的 HTML 可能看起来像这样：</p> <pre class="brush: html"><form> <div> @@ -140,7 +140,7 @@ This is the content of my excellent blog post. I hope you enjoy it! <input type="hidden" id="postId" name="postId" value="34657"> </form></pre> -<p>我们还添加一些简单的CSS：</p> +<p>我们还添加一些简单的 CSS：</p> <pre class="brush: css">html { font-family: sans-serif; @@ -173,14 +173,14 @@ textarea { height: 60px; }</pre> -<p>在将表单发送给用户的浏览器之前，服务器会将ID <code>"postID"</code>的隐藏输入的值设置为其数据库中发送的ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。</p> +<p>在将表单发送给用户的浏览器之前，服务器会将 ID <code>"postID"</code>的隐藏输入的值设置为其数据库中发送的 ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。</p> <p>输出看起来像这样：</p> <p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> <div class="note"> -<p>注意：您还可以在GitHub上找到示例（请参见<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">源代码</a>，并可以<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">实时运行</a>）。</p> +<p>注意：您还可以在 GitHub 上找到示例（请参见<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">源代码</a>，并可以<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">实时运行</a>）。</p> </div> <p>提交后，发送到服务器的表单数据将如下所示：</p> diff --git a/files/zh-cn/web/html/element/input/index.html b/files/zh-cn/web/html/element/input/index.html index 2c35a8ea74..2b95e433f8 100644 --- a/files/zh-cn/web/html/element/input/index.html +++ b/files/zh-cn/web/html/element/input/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/input --- <p id="概述">{{HTMLRef}}</p> -<p><strong>HTML <code><input></code> 元素</strong>用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent")}}。</p> +<p><strong>HTML <code><input></code> 元素</strong>用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent")}}。</p> <p>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</p> @@ -282,7 +282,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/datetime", "datetime")}}</td> - <td>{{deprecated_inline}} {{obsolete_inline}} 用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。</td> + <td>{{deprecated_inline}} {{obsolete_inline}} 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。</td> <td id="exampledatetime"> <pre class="brush: html hidden"> <input type="datetime" name="datetime"/></pre> @@ -300,7 +300,7 @@ translation_of: Web/HTML/Element/input <table> <caption> - <p>{{htmlelement('input')}}元素的属性包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局HTML属性</a>和以下属性：</p> + <p>{{htmlelement('input')}}元素的属性包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局 HTML 属性</a>和以下属性：</p> <table> <thead> @@ -319,7 +319,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefalt', 'alt')}}</td> <td>image</td> - <td>image type的alt属性，是可访问性的要求。</td> + <td>image type 的 alt 属性，是可访问性的要求。</td> </tr> <tr> <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> @@ -354,12 +354,12 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefform', 'form')}}</td> <td>所有</td> - <td>将控件和一个form元素联系在一起</td> + <td>将控件和一个 form 元素联系在一起</td> </tr> <tr> <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> <td>image, submit</td> - <td>用于提交表单的URL</td> + <td>用于提交表单的 URL</td> </tr> <tr> <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> @@ -369,7 +369,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> <td>image, submit</td> - <td>用于表单提交的HTTP方法 </td> + <td>用于表单提交的 HTTP 方法 </td> </tr> <tr> <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> @@ -391,7 +391,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdeflist', 'list')}}</td> <td>绝大部分</td> - <td>自动填充选项的{{htmlelement('datalist')}} 的id值</td> + <td>自动填充选项的{{htmlelement('datalist')}} 的 id 值</td> </tr> <tr> <td>{{anch('htmlattrdefmax', 'max')}}</td> @@ -421,7 +421,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefname', 'name')}}</td> <td>所有</td> - <td>input表单控件的名字。以名字/值对的形式随表单一起提交</td> + <td>input 表单控件的名字。以名字/值对的形式随表单一起提交</td> </tr> <tr> <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> @@ -455,13 +455,13 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{anch('htmlattrdefstep', 'step')}}</td> - <td>数字type</td> + <td>数字 type</td> <td>有效的递增值</td> </tr> <tr> <td>{{anch('htmlattrdeftype', 'type')}}</td> <td>所有</td> - <td>input表单控件的type</td> + <td>input 表单控件的 type</td> </tr> <tr> <td>{{anch('htmlattrdefvalue', 'value')}}</td> @@ -484,7 +484,7 @@ translation_of: Web/HTML/Element/input <dl> <dt>{{ htmlattrdef("accept") }}</dt> - <dd>如果该元素的 <strong>type</strong> 属性的值<code>是file</code>,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明： + <dd>如果该元素的 <strong>type</strong> 属性的值<code>是 file</code>,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明： <ul> <li>以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）</li> <li>一个有效的 MIME 类型，但没有扩展名</li> @@ -496,7 +496,7 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("accesskey") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> <dd>用户按下后可以获得此控件焦点的单个字符。这是 HTML5 全局属性。</dd> <dt>{{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个属性表示这个控件的值是否可被浏览器自动填充。如果<strong>type</strong>属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是: + <dd>这个属性表示这个控件的值是否可被浏览器自动填充。如果<strong>type</strong>属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是： <ul> <li><code>off</code>: 用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。</li> <li><code>on</code>: 浏览器可以根据用户先前的填表情况对此字段自动填值。</li> @@ -544,18 +544,18 @@ translation_of: Web/HTML/Element/input </li> </ul> - <p>如果<code><input></code>元素上没有<strong>autocomplete</strong>属性，浏览器可使用包含该input元素的表单（<code><form></code>）或通过input的<strong>form</strong>属性指定的表单的<strong>autocomplete</strong>属性值。更多信息请参见{{ HTMLElement("form") }}的<code>autocomplete</code>属性。</p> + <p>如果<code><input></code>元素上没有<strong>autocomplete</strong>属性，浏览器可使用包含该 input 元素的表单（<code><form></code>）或通过 input 的<strong>form</strong>属性指定的表单的<strong>autocomplete</strong>属性值。更多信息请参见{{ HTMLElement("form") }}的<code>autocomplete</code>属性。</p> - <p>与其他浏览器不同，<strong>autocomplete </strong>还控制着Firefox浏览器 对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置<strong>autocomplete</strong>的值为<strong>off </strong>可以关闭该特性<strong>。</strong>即使autocomplete属性通常不应用于<input>的type，它也可以工作。具体可以查看{{bug(654072)}}。</p> + <p>与其他浏览器不同，<strong>autocomplete </strong>还控制着 Firefox 浏览器 对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置<strong>autocomplete</strong>的值为<strong>off </strong>可以关闭该特性<strong>。</strong>即使 autocomplete 属性通常不应用于<input>的 type，它也可以工作。具体可以查看{{bug(654072)}}。</p> </dd> <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。 如果type属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。</dd> + <dd>这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。 如果 type 属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。</dd> <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> <dd> <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p> </dd> <dt>{{ htmlattrdef("checked") }}</dt> - <dd>如果该元素的<strong>type</strong>属性的值为<span style="font-family: courier new;">radio或者</span><span style="font-family: courier new;">checkbox</span>,则该布尔属性的存在与否表明了该控件是否是默认选择状态。 + <dd>如果该元素的<strong>type</strong>属性的值为<span style="font-family: courier new;">radio 或者</span><span style="font-family: courier new;">checkbox</span>,则该布尔属性的存在与否表明了该控件是否是默认选择状态。 <p>If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/zh-CN/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p> <div class="note"> @@ -680,7 +680,7 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("max") }} {{ HTMLVersionInline(5) }} </dt> <dd>此项目的最大（数字或日期时间）值，且不得小于其最小值（<strong>min</strong>属性）值。</dd> <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline(5) }}</dt> - <dd>如果 <strong>type</strong> 的值是 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">email</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">password</span>, <span style="font-family: courier new;">tel</span>, 或 <span style="font-family: courier new;">url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 </span><strong>size</strong> 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+</dd> + <dd>如果 <strong>type</strong> 的值是 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">email</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">password</span>, <span style="font-family: courier new;">tel</span>, 或 <span style="font-family: courier new;">url，那么这个属性指明了用户最多可以输入的字符个数（按照 Unicode 编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 </span><strong>size</strong> 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+</dd> <dt>{{ htmlattrdef("min") }} {{ HTMLVersionInline(5) }} </dt> <dd>此项目的最小（数字或日期时间）值，且不得大于其最大值（最大属性）值。</dd> <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> @@ -690,33 +690,33 @@ translation_of: Web/HTML/Element/input <p>The input will fail <a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p> </dd> <dt>{{ htmlattrdef("multiple") }}{{ HTMLVersionInline(5) }}</dt> - <dd>This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在<strong>type</strong>属性为email或file的时候生效 ; 否则被忽视.</dd> + <dd>This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在<strong>type</strong>属性为 email 或 file 的时候生效 ; 否则被忽视。</dd> <dt>{{ htmlattrdef("name") }}</dt> <dd>控件的名称，与表单数据一起提交。</dd> <dt>{{ htmlattrdef("pattern") }}{{ HTMLVersionInline(5) }}</dt> - <dd>检查控件值的正则表达式.。pattern必须匹配整个值，而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> 或 <span style="font-family: courier new;">email</span>时，此属性适用，否则将被忽略。译者注:ie10+</dd> + <dd>检查控件值的正则表达式.。pattern 必须匹配整个值，而不仅仅是某些子集.。使用 title 属性来描述帮助用户的模式.。当类型属性的值为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> 或 <span style="font-family: courier new;">email</span>时，此属性适用，否则将被忽略。译者注:ie10+</dd> <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline(5) }}</dt> - <dd>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email时</span>; 否则会被忽略。 - <div class="note"><strong>Note:</strong> 请不要用<code>placeholder</code> 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而<code>placeholder</code> 属性是提示用户内容的输入格式。某些情况下 <code>placeholder</code> 属性对用户不可见, 所以当没有它时也需要保证form能被理解。</div> + <dd>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email 时</span>; 否则会被忽略。 + <div class="note"><strong>Note:</strong> 请不要用<code>placeholder</code> 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而<code>placeholder</code> 属性是提示用户内容的输入格式。某些情况下 <code>placeholder</code> 属性对用户不可见， 所以当没有它时也需要保证 form 能被理解。</div> </dd> <dt>{{ htmlattrdef("readonly") }}</dt> <dd>这个布尔属性用于指明用户无法修改控件的值。 - <p>{{ HTMLVersionInline(5) }} 如果控件的 <strong>type</strong> 属性为<span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file 或 </span>type时，此属性会被忽略。</p> + <p>{{ HTMLVersionInline(5) }} 如果控件的 <strong>type</strong> 属性为<span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file 或 </span>type 时，此属性会被忽略。</p> </dd> <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用. {{ cssxref(":optional") }} 和 {{ cssxref(":required") }} CSS 伪元素的样式将可以被该字段应用作外观.</dd> + <dd>这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden,image 或者按钮类型 (submit,reset,button) 时不可使用. {{ cssxref(":optional") }} 和 {{ cssxref(":required") }} CSS 伪元素的样式将可以被该字段应用作外观。</dd> <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline(5) }}</dt> <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> <dt>{{ htmlattrdef("size") }}</dt> - <dd>控件的初始大小。以像素为单位。但当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span> 或 <span style="font-family: courier new;">password时</span>, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 <strong>type</strong> 属性为 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>,或 <span style="font-family: courier new;">password；</span>否则会被忽略。 此外，它的值必须大于0。 如果未指定大小，则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有x的字符即使定义了到x的大小也将显示不完整。 。</dd> + <dd>控件的初始大小。以像素为单位。但当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span> 或 <span style="font-family: courier new;">password 时</span>, 它表示输入的字符的长度。从 HTML5 开始， 此属性仅适用于当 <strong>type</strong> 属性为 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>,或 <span style="font-family: courier new;">password；</span>否则会被忽略。 此外，它的值必须大于 0。 如果未指定大小，则使用默认值 20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有 x 的字符即使定义了到 x 的大小也将显示不完整。 。</dd> <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> <dd>将此属性的值设置为<code>true</code>表示元素需要检查其拼写和语法。值<code>default</code> 表示该元素将根据默认行为进行操作，可能基于父元素自己的<code>spellcheck</code>值。值<code>false</code>表示不应该检查元素</dd> <dt>{{ htmlattrdef("src") }}</dt> - <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image</span>, 这个属性指定了按钮图片的路径; 否则它被忽视.</dd> + <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image</span>, 这个属性指定了按钮图片的路径; 否则它被忽视。</dd> <dt>{{ htmlattrdef("step") }} {{ HTMLVersionInline(5) }}</dt> <dd>使用<strong>min</strong>和<strong>max</strong> 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值。</dd> <dt>{{ htmlattrdef("tabindex") }} element-specific in {{ HTMLVersionInline(4) }}, global in {{ HTMLVersionInline(5) }}</dt> - <dd>元素在当前文档的Tab导航顺序中的位置。</dd> + <dd>元素在当前文档的 Tab 导航顺序中的位置。</dd> <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> <dd> <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> @@ -724,9 +724,9 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("type") }}</dt> <dd>要呈现的控件类型。有关各个类型的信息，请参阅 {{anch("Form <input> types")}}，其中包含指向每个类型的更多信息的链接。</dd> <dt>{{ htmlattrdef("usemap") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> - <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称.</dd> + <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称。</dd> <dt>{{ htmlattrdef("value") }}</dt> - <dd>控件的初始值. 此属性是可选的，除非<strong>type</strong> 属性是<code>radio</code>或<code>checkbox</code><span style="font-family: courier new;">。</span>注意，当重新加载页面时，如果在重新加载之前更改了值，<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">Gecko和IE将忽略HTML源代码中指定的值</a>。</dd> + <dd>控件的初始值。此属性是可选的，除非<strong>type</strong> 属性是<code>radio</code>或<code>checkbox</code><span style="font-family: courier new;">。</span>注意，当重新加载页面时，如果在重新加载之前更改了值，<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">Gecko 和 IE 将忽略 HTML 源代码中指定的值</a>。</dd> <dt>{{ htmlattrdef("width") }} {{ HTMLVersionInline(5) }}</dt> <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image，这个属性定义了按钮图片的宽度。</span></dd> <dt> diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html index 91767c43f0..58ceb8f2ea 100644 --- a/files/zh-cn/web/html/element/input/month/index.html +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -18,11 +18,11 @@ original_slug: Web/HTML/Element/Input/月份 <p>这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> -<p>对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。</p> +<p>对于那些使用不支持的浏览器的用户，Chrome / Opera 月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> -<p>Edge的 <code>month</code> 看起来像这样的:</p> +<p>Edge 的 <code>month</code> 看起来像这样的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> @@ -53,20 +53,20 @@ original_slug: Web/HTML/Element/Input/月份 <h2 id="Value">Value</h2> -<p>{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.</p> +<p>{{domxref("DOMString")}} 表示输入输入的月份和年份的值，in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.</p> -<p>你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:</p> +<p>你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里，像这样：</p> <pre class="brush: html"><label for="bday-month">What month were you both in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> <p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> -<p>需要注意的是显示的如期格式不同于实际的<code>value</code> — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 <code>yyyy-MM</code>。</p> +<p>需要注意的是显示的如期格式不同于实际的<code>value</code> — 日期显示的格式将根据用户的操作系统的时区设置，而时间的格式通常会格式化为 <code>yyyy-MM</code>。</p> <p>在向服务器提交上述值的时候他们看起来像这样：<code>bday-month=1978-06</code>.</p> -<p>你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：</p> +<p>你也可以使用 JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：</p> <pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); monthControl.value = '1978-06';</pre> @@ -136,7 +136,7 @@ monthControl.value = '1978-06';</pre> <h2 id="Using_month_inputs">Using month inputs</h2> -<p>与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <code><input type="month"></code>还是存在兼容性问题。</p> +<p>与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是，由于浏览器支持有限，所以这个 <code><input type="month"></code>还是存在兼容性问题。</p> <p>我们在往下看更多关于<code><input type="month"></code>基础和更多的高级的用法</p> @@ -144,7 +144,7 @@ monthControl.value = '1978-06';</pre> <h3 id="Basic_uses_of_month">Basic uses of month</h3> -<p>最简单的<code><input type="month"></code> 涉及到基础的 <code><input></code> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:</p> +<p>最简单的<code><input type="month"></code> 涉及到基础的 <code><input></code> 和 {{htmlelement("label")}} 的元素组合，像下面这样：</p> <pre class="brush: html"><form> <label for="bday-month">What month were you both in?</label> @@ -155,7 +155,7 @@ monthControl.value = '1978-06';</pre> <h3 id="设置最长和最短日期">设置最长和最短日期</h3> -<p>你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份<code>1900-01</code> 最大月份到 <code>2017-08</code>:</p> +<p>你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期。在下列的例子中我们设置最小月份<code>1900-01</code> 最大月份到 <code>2017-08</code>:</p> <pre class="brush: html"><form> <label for="bday-month">What month were you both in?</label> @@ -165,10 +165,10 @@ monthControl.value = '1978-06';</pre> <p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> -<p>结果是这样:</p> +<p>结果是这样：</p> <ul> - <li>月份只有在2017年八月份到1900年一月可以选择 — 在这个控件里这个范围以外的月份不能滚动选择。</li> + <li>月份只有在 2017 年八月份到 1900 年一月可以选择 — 在这个控件里这个范围以外的月份不能滚动选择。</li> <li>Depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. Edge), or invalid (see {{anch("Validation")}}) but still available (e.g. Chrome).</li> </ul> diff --git a/files/zh-cn/web/html/element/input/number/index.html b/files/zh-cn/web/html/element/input/number/index.html index 4baa8ba6ee..41fc88d92b 100644 --- a/files/zh-cn/web/html/element/input/number/index.html +++ b/files/zh-cn/web/html/element/input/number/index.html @@ -53,7 +53,7 @@ translation_of: Web/HTML/Element/input/number <h2 id="值">值</h2> -<p>填写到输入框中的数值文字的{{jsxref("Number")}}表示。你可以通过把一个数字放在{{htmlattrxref("value", "input")}} 属性中来设置输入框的默认值，如下:</p> +<p>填写到输入框中的数值文字的{{jsxref("Number")}}表示。你可以通过把一个数字放在{{htmlattrxref("value", "input")}} 属性中来设置输入框的默认值，如下：</p> <pre class="brush: html"><input id="number" type="number" value="42"></pre> @@ -64,10 +64,10 @@ translation_of: Web/HTML/Element/input/number <p><code><input type ="number"></code>元素可以帮助您在构建用户界面和将数字输入到表单中的逻辑时简化你的工作。 当你使用正确的 type 值 <code>"number"</code> 创建数字输入时，会自动验证你输入的文本是否为数字，通常是一组向上和向下按钮。</p> <div class="note"> -<p><strong>注意：</strong>记住用户可以在幕后修改HTML是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。</p> +<p><strong>注意：</strong>记住用户可以在幕后修改 HTML 是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。</p> </div> -<p>此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自Firefox for Android：</p> +<p>此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自 Firefox for Android：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> @@ -98,43 +98,43 @@ translation_of: Web/HTML/Element/input/number <h3 id="控制步进大小">控制步进大小</h3> -<p>默认情况下，向上和向下按钮可以将值增加或减小1。您可以通过使用{{htmlattrxref("step","input")}} 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是10的倍数，所以设置 <code>step</code> 的值为10是合理的：</p> +<p>默认情况下，向上和向下按钮可以将值增加或减小 1。您可以通过使用{{htmlattrxref("step","input")}} 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是 10 的倍数，所以设置 <code>step</code> 的值为 10 是合理的：</p> <pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> <p>{{ EmbedLiveSample('控制步进大小', 600, 40) }}</p> -<p>在这个例子中，你会发现上下箭头每次会将其值增加和减少10，而不是1。你仍然可以手动输入一个不是10的倍数的数字，但它会被认为是无效的。</p> +<p>在这个例子中，你会发现上下箭头每次会将其值增加和减少 10，而不是 1。你仍然可以手动输入一个不是 10 的倍数的数字，但它会被认为是无效的。</p> <h3 id="指定最小和最大值">指定最小和最大值</h3> -<p>可以使用{{htmlattrxref("min","input")}} 和{{htmlattrxref("max","input")}} 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为0，最大值为100：</p> +<p>可以使用{{htmlattrxref("min","input")}} 和{{htmlattrxref("max","input")}} 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为 0，最大值为 100：</p> <pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> <p>{{ EmbedLiveSample('指定最小和最大值', 600, 40) }}</p> -<p>修改过后，你会发现点击上下按钮不会让你低于0或高于100 . 可以在这些界限之外手动输入数字，但它将被视为无效。</p> +<p>修改过后，你会发现点击上下按钮不会让你低于 0 或高于 100 . 可以在这些界限之外手动输入数字，但它将被视为无效。</p> <h3 id="允许小数值">允许小数值</h3> -<p>数字输入的一个问题是，步长默认为1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 <code>step</code> 值（例如，<code>step="0.01"</code> 以允许2位小数）。 这里有一个简单的例子：</p> +<p>数字输入的一个问题是，步长默认为 1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 <code>step</code> 值（例如，<code>step="0.01"</code> 以允许 2 位小数）。 这里有一个简单的例子：</p> <pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> <p>{{EmbedLiveSample("允许小数值", 600, 40)}}</p> -<p>你可以看到这个例子允许0.0到10.0之间的任何值，小数点为2位。本例中，"9.52" 是有效的，但" 9.521" 无效。</p> +<p>你可以看到这个例子允许 0.0 到 10.0 之间的任何值，小数点为 2 位。本例中，"9.52" 是有效的，但" 9.521" 无效。</p> <h3 id="控制输入框大小">控制输入框大小</h3> <p>类型为<code>"number"</code> 的 {{HTMLElement("input")}} 元素不支持像 {{htmlattrxref("size", "input")}} 之类的调整大小属性。你必须通过借助 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变它们的尺寸大小。</p> -<p>例如，要调整输入框的宽度为仅可输入3位数字的宽度，我们可以在HTML中添加 一个ID并缩短很长的占位符文本，如下：</p> +<p>例如，要调整输入框的宽度为仅可输入 3 位数字的宽度，我们可以在 HTML 中添加 一个 ID 并缩短很长的占位符文本，如下：</p> <pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> -<p>然后我们添加一些 CSS 来缩小 id 为 <code>"number"</code> 的元素的宽度:</p> +<p>然后我们添加一些 CSS 来缩小 id 为 <code>"number"</code> 的元素的宽度：</p> <pre class="brush: css">#number { width: 3em; diff --git a/files/zh-cn/web/html/element/input/password/index.html b/files/zh-cn/web/html/element/input/password/index.html index 25cdda81c0..f0e5b616a0 100644 --- a/files/zh-cn/web/html/element/input/password/index.html +++ b/files/zh-cn/web/html/element/input/password/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/password <div class="note"> -<p>任何涉及密码等敏感信息的表格（例如登录表格）都应通过HTTPS提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>。</p> +<p>任何涉及密码等敏感信息的表格（例如登录表格）都应通过 HTTPS 提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>。</p> </div> <table class="properties"> @@ -60,7 +60,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="一个简单的密码输入框">一个简单的密码输入框</h3> -<p>在这里，我们看到了最基本的密码输入，并使用了 {{HTMLElement("label")}} 元素.</p> +<p>在这里，我们看到了最基本的密码输入，并使用了 {{HTMLElement("label")}} 元素。</p> <pre class="brush: html"><label for="userPassword">Password: </label> <input id="userPassword" type="password"></pre> @@ -73,13 +73,13 @@ translation_of: Web/HTML/Element/input/password <dl> <dt><code>"on"</code></dt> - <dd>允许浏览器或密码管理器自动填写密码字段。 这不像使用“current-password”或“new-password”那样提供信息。</dd> + <dd>允许浏览器或密码管理器自动填写密码字段。 这不像使用 “current-password” 或 “new-password” 那样提供信息。</dd> <dt><code>"off"</code></dt> <dd>不让浏览器或密码管理器自动填写密码字段。 请注意，某些软件会忽略此值，因为它通常会损害用户维护安全密码操作的能力。</dd> <dt><code>"current-password"</code></dt> - <dd>允许浏览器或密码管理器输入网站的当前密码。 这提供了比“on”更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。</dd> + <dd>允许浏览器或密码管理器输入网站的当前密码。 这提供了比 “on” 更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。</dd> <dt><code>"new-password"</code></dt> - <dd>允许浏览器或密码管理器自动输入网站的新密码; 这用于“更改密码”和“新用户”表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。</dd> + <dd>允许浏览器或密码管理器自动输入网站的新密码; 这用于 “更改密码” 和 “新用户” 表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。</dd> </dl> <div id="Autocomplete_sample1"> @@ -101,7 +101,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="指定输入模式">指定输入模式</h3> -<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the {{htmlattrxref("inputmode", "input")}} attribute to request a specific one. 最明显的用例是密码必须是数字（例如PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。</p> +<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the {{htmlattrxref("inputmode", "input")}} attribute to request a specific one. 最明显的用例是密码必须是数字（例如 PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。</p> <pre class="brush: html"><label for="pin">PIN: </label> <input id="pin" type="password" inputmode="numeric"></pre> @@ -110,7 +110,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="设置长度要求">设置长度要求</h3> -<p>As usual, you can use the {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的PIN必须至少为4且不超过8位来扩展前一个示例。The {{htmlattrxref("size", "input")}} attribute is used to ensure that the password entry control is eight characters wide.</p> +<p>As usual, you can use the {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的 PIN 必须至少为 4 且不超过 8 位来扩展前一个示例。The {{htmlattrxref("size", "input")}} attribute is used to ensure that the password entry control is eight characters wide.</p> <pre class="brush: html"><label for="pin">PIN:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" @@ -166,9 +166,9 @@ translation_of: Web/HTML/Element/input/password <h3 id="申请社会安全号码">申请社会安全号码</h3> -<p>此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为“123-45-6789”。 还存在针对每个组中允许的值的各种规则。</p> +<p>此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为 “123-45-6789”。 还存在针对每个组中允许的值的各种规则。</p> -<h4 id="HTML版本的实例">HTML版本的实例</h4> +<h4 id="HTML版本的实例">HTML 版本的实例</h4> <pre class="brush: html"><label for="ssn">SSN:</label> <input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" @@ -178,7 +178,7 @@ translation_of: Web/HTML/Element/input/password <label for="ssn">Value:</label> <span id="current"></span></pre> -<p>This uses a {{htmlattrxref("pattern", "input")}} which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。</p> +<p>This uses a {{htmlattrxref("pattern", "input")}} which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的 SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。</p> <div class="note"> <p>Isn't that regular expression just <em>beautiful</em>?</p> @@ -186,9 +186,9 @@ translation_of: Web/HTML/Element/input/password <p>The {{htmlattrxref("inputmode", "input")}} is set to <code>"number"</code> to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The {{htmlattrxref("required", "input")}} attribute is used to indicate that this control must have a value. Finally, {{htmlattrxref("autocomplete", "input")}} is set to <code>"off"</code> to avoid password managers trying to set its value, since this isn't a password at all.</p> -<h4 id="JavaScript版本的实例">JavaScript版本的实例</h4> +<h4 id="JavaScript版本的实例">JavaScript 版本的实例</h4> -<p>这只是一些简单的代码，用于在屏幕上显示输入的SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。</p> +<p>这只是一些简单的代码，用于在屏幕上显示输入的 SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。</p> <pre class="brush: js">var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); diff --git a/files/zh-cn/web/html/element/input/radio/index.html b/files/zh-cn/web/html/element/input/radio/index.html index cb52590a2f..0ffa30a831 100644 --- a/files/zh-cn/web/html/element/input/radio/index.html +++ b/files/zh-cn/web/html/element/input/radio/index.html @@ -53,9 +53,9 @@ translation_of: Web/HTML/Element/input/radio <h3 id="定义一个单选按钮组节">定义一个单选按钮组<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio$edit#Defining_a_radio_group">节</a></h3> -<p>一个单选按钮组由具有相同 {{htmlattrxref("name", "input")}}属性的单选按钮组成。 一旦单选按钮组被建立, 选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。</p> +<p>一个单选按钮组由具有相同 {{htmlattrxref("name", "input")}}属性的单选按钮组成。 一旦单选按钮组被建立，选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。</p> -<p>你可以在一个页面上创建任何你喜欢的单选按钮组, 只要每一组都有一个独特的 <code>name</code>属性。</p> +<p>你可以在一个页面上创建任何你喜欢的单选按钮组，只要每一组都有一个独特的 <code>name</code>属性。</p> <p>举个例子，如果你需要在表单中询问用户的首选联系方式，你可以创建三个 <code>name</code> 属性都为 <code>contact</code> 的单选按钮，不过一个按钮的 {{htmlattrxref("value", "input")}}属性为 <code>email</code> ，另一个的<code>value</code> 属性为 <code>phone</code>，还有一个的<code>value</code> 属性为 <code>mail</code>。用户不会看见 <code>value</code> 属性或 <code>name</code> 属性（除非你故意用代码显示它们）。</p> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/radio <p>当上面的表单在提交时选择了一个单选框，表单的数据就包括了<code>contact=<em>value</em></code>一行。例如，若用户点击 "Phone "单选框，然后提交表单，提交的数据中将包括<code>contact=phone</code>一行。</p> -<p>如果你在HTML中忘记了value属性，那么提交的表单数据就会将该值分配到<code>on</code>上。在这种情况下，如果用户选中了 "Phone "选项并提交了表单，提交的表单数据将是<code>contact=on</code>，这并没有什么卵用。所以别忘了设置你的<code>value</code>属性！</p> +<p>如果你在 HTML 中忘记了 value 属性，那么提交的表单数据就会将该值分配到<code>on</code>上。在这种情况下，如果用户选中了 "Phone "选项并提交了表单，提交的表单数据将是<code>contact=on</code>，这并没有什么卵用。所以别忘了设置你的<code>value</code>属性！</p> <p><strong>Note</strong>: 如果在提交表单时没有选择任何单选按钮，则提交的表格数据中根本不包括单选组，因为没有值要报告。</p> diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html index 36749a861a..ae2cce53ba 100644 --- a/files/zh-cn/web/html/element/input/range/index.html +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTML/Element/Input/范围 <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> -<p class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</p> +<p class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</p> <p>如果用户的浏览器不支持类型范围，它将回退并将其视为 <code>{{HTMLElement('input/text', 'text')}}</code> 输入。</p> @@ -35,7 +35,7 @@ original_slug: Web/HTML/Element/Input/范围 <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td> </tr> <tr> - <td><strong>IDL属性</strong></td> + <td><strong>IDL 属性</strong></td> <td><code>list</code>, <code>value</code>, 和 <code>valueAsNumber</code></td> </tr> <tr> @@ -51,9 +51,9 @@ original_slug: Web/HTML/Element/Input/范围 <ul> <li>如果将 {{htmlattrxref("value", "input")}} 设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。</li> - <li>该值不得小于 {{htmlattrxref("min", "input")}}. 默认值为0。</li> - <li>该值将不大于 {{htmlattrxref("max", "input")}}. 默认值为100。</li> - <li>该值将是 {{htmlattrxref("step", "input")}}. 预设值为1。</li> + <li>该值不得小于 {{htmlattrxref("min", "input")}}. 默认值为 0。</li> + <li>该值将不大于 {{htmlattrxref("max", "input")}}. 默认值为 100。</li> + <li>该值将是 {{htmlattrxref("step", "input")}}. 预设值为 1。</li> </ul> <h3 id="值">值</h3> @@ -79,7 +79,7 @@ original_slug: Web/HTML/Element/Input/范围 <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td><datalist>元素的ID，其中包含可选的预定义选项</td> + <td><datalist>元素的 ID，其中包含可选的预定义选项</td> </tr> <tr> <td><code>{{anch("max")}}</code></td> @@ -104,19 +104,19 @@ original_slug: Web/HTML/Element/Input/范围 <p>允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。 如果 <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> 属性的值不是数字，则元素没有最大值。</p> -<p>此值必须大于或等于min属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/max">HTML <code>max</code></a><code>属性。</code></p> +<p>此值必须大于或等于 min 属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/max">HTML <code>max</code></a><code>属性。</code></p> <h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> <p>允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。如果为<code>min</code> 指定的值不是有效数字，则输入没有最小值。</p> -<p>该值必须小于或等于max属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/min">HTML <code>min</code>属性</a>。</p> +<p>该值必须小于或等于 max 属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/min">HTML <code>min</code>属性</a>。</p> <h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> -<p><code>range</code> 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 <code>min</code> 设置为-10并将 <code>value</code> 设置为1.5，则1的 <code>step</code> 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅<a href="/en-US/docs/Web/HTML/Attributes/step">HTML <code>step</code> 属性</a>。</p> +<p><code>range</code> 输入的默认步进值为 1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为 1。 例如，如果将 <code>min</code> 设置为-10 并将 <code>value</code> 设置为 1.5，则 1 的 <code>step</code> 将只允许正方向上的值为 1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5 等。 ..朝负面方向发展。 请参阅<a href="/en-US/docs/Web/HTML/Attributes/step">HTML <code>step</code> 属性</a>。</p> <h3 id="非标准属性">非标准属性</h3> @@ -130,18 +130,18 @@ original_slug: Web/HTML/Element/Input/范围 <tbody> <tr> <td><code>{{anch("orient")}}</code></td> - <td>设置范围滑块的方向。 <strong>仅限Firefox .</strong></td> + <td>设置范围滑块的方向。 <strong>仅限 Firefox .</strong></td> </tr> </tbody> </table> <dl> <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， <code>orient</code> 属性定义范围滑块的方向。 值包括 <code>horizontal</code>, 表示范围是水平呈现， 和 <code>vertical</code>, 其中范围是垂直呈现）。</dd> + <dd id="orient-include">类似于-moz-orient 非标准 CSS 属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， <code>orient</code> 属性定义范围滑块的方向。 值包括 <code>horizontal</code>, 表示范围是水平呈现， 和 <code>vertical</code>, 其中范围是垂直呈现）。</dd> </dl> <div class="blockIndicator note"> -<p>注意：以下输入属性不适用于输入范围：<code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>,高度, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, 和 <code>width</code>. 这些属性中的任何一个（如果包含）将被忽略。</p> +<p>注意：以下输入属性不适用于输入范围：<code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>,高度，<code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, 和 <code>width</code>. 这些属性中的任何一个（如果包含）将被忽略。</p> </div> <h2 id="例子">例子</h2> @@ -157,13 +157,13 @@ original_slug: Web/HTML/Element/Input/范围 <li>密码管理员生成的密码的密码长度。</li> </ul> -<p>通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。</p> +<p>通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为 “将音量设置为最大音量的一半” 而不是 “将音量设置为 0.5”。</p> <h3 id="指定最小和最大">指定最小和最大</h3> -<p>默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。</p> +<p>默认情况下，最小值为 0，最大值为 100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。</p> -<p>例如，要要求用户输入介于-10和10之间的值，可以使用：</p> +<p>例如，要要求用户输入介于-10 和 10 之间的值，可以使用：</p> <pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> @@ -171,7 +171,7 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="设置值的粒度">设置值的粒度</h3> -<p>默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 <code>step</code> 的值设置为0.01:</p> +<p>默认情况下，粒度为 1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于 5 到 10 之间的值（精确到两位小数），则应将 <code>step</code> 的值设置为 0.01:</p> <div id="Granularity_sample1"> <pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> @@ -186,16 +186,16 @@ original_slug: Web/HTML/Element/Input/范围 <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> -<p>该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。</p> +<p>该示例使用户可以选择 0 到π之间的任何值，而对所选值的小数部分没有任何限制。</p> </div> <h3 id="添加井号和标签">添加井号和标签</h3> -<p>HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。</p> +<p>HTML 规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。</p> <h4 id="范围控制模型">范围控制模型</h4> -<p>由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。</p> +<p>由于浏览器具有这种灵活性，并且迄今为止都不支持 HTML 为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在 macOS 上可以得到的功能。</p> <h5 id="无装饰的范围控制">无装饰的范围控制</h5> @@ -228,7 +228,7 @@ original_slug: Web/HTML/Element/Input/范围 <h5 id="带散列标记的范围控件">带散列标记的范围控件</h5> -<p>此范围控件使用的 <code>list</code> 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。</p> +<p>此范围控件使用的 <code>list</code> 属性指定{{HTMLElement("datalist")}} 的 ID，该 ID 定义了控件上的一系列带散列的标记。 其中有 11 个，因此在 0％和每个 10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。</p> <table class="fullwidth standard-table"> <tbody> @@ -315,15 +315,15 @@ original_slug: Web/HTML/Element/Input/范围 </table> <div class="note"> -<p><strong>注意</strong>: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 <code>none</code> ，隐藏了标签。</p> +<p><strong>注意</strong>: 目前没有浏览器完全支持这些特性。例如，Firefox 根本不支持散列标记和标签，而 Chrome 支持散列标记，但不支持标签。Chrome 的 66 版本 (66.0.3359.181) 支持标签，但是 {{htmlelement("datalist")}} 标签必须使用 CSS 样式，因为它的 {{cssxref("display")}}属性默认设置为 <code>none</code> ，隐藏了标签。</p> </div> <h3 id="改变方向">改变方向</h3> <div class="xhidden"> -<p>使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>)。也许它仍在讨论中。</p> +<p>使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用 CSS 上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>)。也许它仍在讨论中。</p> -<p>同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 <code>slider-vertical</code>, 在Firefox中使用非标准的<code>orient</code> 属性，或通过更改Internet Explorer和Edge的文本方向。</p> +<p>同时，我们可以通过使用 CSS 变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 <code>slider-vertical</code>, 在 Firefox 中使用非标准的<code>orient</code> 属性，或通过更改 Internet Explorer 和 Edge 的文本方向。</p> <p>考虑以下范围控制：</p> @@ -337,7 +337,7 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="标准">标准</h3> -<p>根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：</p> +<p>根据规范，使其垂直需要添加 CSS 来更改控件的尺寸，以使其比宽度高，如下所示：</p> <div id="Orientation_sample2"> <h4 id="CSS">CSS</h4> @@ -361,11 +361,11 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="变换：旋转（-90deg）">变换：旋转（-90deg）</h3> -<p>但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。</p> +<p>但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用 CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。</p> <h4 id="HTML_2">HTML</h4> -<p>需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：</p> +<p>需要更新 HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：</p> <pre class="brush: html notranslate"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> @@ -373,7 +373,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="CSS_2">CSS</h4> -<p>现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。</p> +<p>现在我们需要一些 CSS。 首先是包装器本身的 CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。</p> <pre class="brush: css notranslate">.slider-wrapper { display: inline-block; @@ -393,7 +393,7 @@ original_slug: Web/HTML/Element/Input/范围 transform: rotate(-90deg); }</pre> -<p>控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。</p> +<p>控件的大小设置为 150 像素长 x 20 像素高。 边距设置为 0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为 150 像素宽，因此它将旋转通过每边 150 像素的框。 在每个轴上将原点偏移 75 像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转 90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。</p> <p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> @@ -403,7 +403,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_3">HTML</h4> -<p>我们使用与前面的示例相同的HTML：</p> +<p>我们使用与前面的示例相同的 HTML：</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> </pre> @@ -420,11 +420,11 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="定向属性">定向属性</h3> -<p>仅在Firefox中，有一个非标准的 <code>orient</code> 属性。</p> +<p>仅在 Firefox 中，有一个非标准的 <code>orient</code> 属性。</p> <h4 id="HTML_4">HTML</h4> -<p>使用与前面示例类似的HTML，我们添加属性值为 <code>vertical</code>:</p> +<p>使用与前面示例类似的 HTML，我们添加属性值为 <code>vertical</code>:</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> @@ -437,7 +437,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_5">HTML</h4> -<p>我们使用与前面的示例相同的HTML：</p> +<p>我们使用与前面的示例相同的 HTML：</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> </pre> @@ -458,14 +458,14 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_6">HTML</h4> -<p>对于Firefox，我们将<code>orient</code>属性的值保持为<code>vertical：</code></p> +<p>对于 Firefox，我们将<code>orient</code>属性的值保持为<code>vertical：</code></p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> <h4 id="CSS_5">CSS</h4> -<p>对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或者从下至上，从左至右，然后添加 <code>-webkit-appearance: slider-vertical</code>用于所有基于-webkit的浏览器：</p> +<p>对于 Edge 和 Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或者从下至上，从左至右，然后添加 <code>-webkit-appearance: slider-vertical</code>用于所有基于-webkit 的浏览器：</p> <pre class="brush: css notranslate">input[type="range"] { writing-mode: bt-lr; @@ -509,6 +509,6 @@ original_slug: Web/HTML/Element/Input/范围 <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> <li>{{domxref('validityState.rangeOverflow')}} and {{domxref('validityState.rangeUnderflow')}}</li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">使用ConstantSourceNode控制多个参数</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">使用 ConstantSourceNode 控制多个参数</a></li> <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">设置范围元素的样式</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/reset/index.html b/files/zh-cn/web/html/element/input/reset/index.html index e24d084a31..5695cacd7b 100644 --- a/files/zh-cn/web/html/element/input/reset/index.html +++ b/files/zh-cn/web/html/element/input/reset/index.html @@ -16,10 +16,10 @@ translation_of: Web/HTML/Element/input/reset <div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> -<p class="hidden">该交互式示例的源代码存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p> +<p class="hidden">该交互式示例的源代码存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p> <div class="note"> -<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击“<a href="/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>”按钮时）。</p> +<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击 “<a href="/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>” 按钮时）。</p> </div> <table class="properties"> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/input/reset <h2 id="值">值</h2> -<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值.</p> +<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值。</p> <div id="summary-example3"> <pre class="brush: html"><input type="reset" value="Reset the form"></pre> @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/input/reset <p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> -<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为“重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p> +<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为 “重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p> <div id="summary-example1"> <pre class="brush: html"><input type="reset"></pre> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/input/reset <h2 id="使用重置按钮">使用重置按钮</h2> -<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用JavaScript自定义行为，您需要使用 <code><a href="/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p> +<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用 JavaScript 自定义行为，您需要使用 <code><a href="/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p> <h3 id="一个简单的重置按钮">一个简单的重置按钮</h3> @@ -84,7 +84,7 @@ translation_of: Web/HTML/Element/input/reset </form> </pre> -<p>如下所示:</p> +<p>如下所示：</p> <p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/reset <p>添加键盘快捷键到提交按钮 — 就像您使用 <code>{{HTMLElement("input")}}</code> 一样做一些事情 — 请使用 <code>{{htmlattrxref("accesskey")}}</code> 全局属性。</p> -<p>在这个例子中， <kbd>r</kbd> 被指定为访问键 （您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p> +<p>在这个例子中， <kbd>r</kbd> 被指定为访问键（您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p> <pre class="brush: html"><form> <div> diff --git a/files/zh-cn/web/html/element/input/search/index.html b/files/zh-cn/web/html/element/input/search/index.html index 64afa2ba8d..2148071515 100644 --- a/files/zh-cn/web/html/element/input/search/index.html +++ b/files/zh-cn/web/html/element/input/search/index.html @@ -3,7 +3,7 @@ title: <input type="search"> slug: Web/HTML/Element/Input/search tags: - HTML - - HTML表单 + - HTML 表单 - 参考 - 搜索 - 表单 @@ -13,11 +13,11 @@ translation_of: Web/HTML/Element/input/search --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同, 但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p> +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同，但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> -<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div> +<div class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div> <table class="properties"> <tbody> @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/input/search <h2 id="值">值</h2> -<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在JavaScript使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p> +<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在 JavaScript 使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p> <pre class="brush: js notranslate">searchTerms = mySearch.value; </pre> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/input/search <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td><code><datalist></code> 元素的ID，其中包含可选的预定义自动完成选项。</td> + <td><code><datalist></code> 元素的 ID，其中包含可选的预定义自动完成选项。</td> </tr> <tr> <td><code>{{anch("maxlength")}}</code></td> @@ -104,15 +104,15 @@ translation_of: Web/HTML/Element/input/search <h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> -<p>用户可以在搜索字段中输入的最大字符数（以UTF-16代码为单位）。 必须为0或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p> +<p>用户可以在搜索字段中输入的最大字符数（以 UTF-16 代码为单位）。 必须为 0 或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p> -<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> +<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16 代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> <h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> -<p>用户可以在搜索字段中输入的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p> +<p>用户可以在搜索字段中输入的最小字符数（以 UTF-16 代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p> -<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> +<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16 代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> <h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> @@ -182,7 +182,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> <div id="results-include"> -<p><code>results</code> 属性是一个数字值（仅受Safari支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> +<p><code>results</code> 属性是一个数字值（仅受 Safari 支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> <p>该值必须是非负十进制数字。 如果未提供或给出了无效值，则使用浏览器的默认最大条目数。</p> </div> @@ -212,11 +212,11 @@ translation_of: Web/HTML/Element/input/search <h3 id="搜索类型和文本类型之间的差异">搜索类型和文本类型之间的差异</h3> -<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自Chrome：</p> +<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自 Chrome：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> -<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自Firefox：</p> +<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自 Firefox：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">现在，让我们看看可以应用于搜索表单的一些有用的技巧。</p> @@ -238,7 +238,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="搜索表单标签和辅助功能">搜索表单标签和辅助功能</h3> -<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显 （<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p> +<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显（<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p> <p>但是，这可能会使屏幕阅读器用户感到困惑，因为他们不会对搜索输入内容有任何口头指示。 解决此问题而不会影响您的视觉设计的一种方法是使用 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 功能：</p> @@ -270,7 +270,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="输入框元素大小">输入框元素大小</h3> -<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为30个字符宽：</p> +<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为 30 个字符宽：</p> <pre class="brush: html notranslate"><form> <div> @@ -289,12 +289,12 @@ translation_of: Web/HTML/Element/input/search <p><code><input></code> 元素的 <code>search</code> 类型具有与常规文本 <code>text</code> 输入相同的验证功能。 通常，您不太可能希望对搜索框使用验证功能。 在许多情况下，应该只允许用户搜索任何内容，但是有几种情况需要考虑，例如搜索已知格式的数据。</p> <div class="note"> -<p><strong>注意：</strong>HTML表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +<p><strong>注意：</strong>HTML 表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> </div> <h3 id="样式注意事项">样式注意事项</h3> -<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p> +<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p> <pre class="brush: css notranslate">input:invalid ~ span:after { content: '✖'; @@ -345,7 +345,7 @@ input:valid ~ span:after { <p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p> -<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自Firefox：</p> +<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自 Firefox：</p> <p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> @@ -355,7 +355,7 @@ input:valid ~ span:after { <p>您可以使用 <code>{{htmlattrxref("minlength", "input")}}</code> 属性为输入的值指定最小长度（以字符为单位）； 同样，使用 <code>{{htmlattrxref("maxlength", "input")}}</code> 设置输入值的最大长度。</p> -<p>下面的示例要求输入的值的长度为4–8个字符。</p> +<p>下面的示例要求输入的值的长度为 4–8 个字符。</p> <pre class="brush: html notranslate"><form> <div> @@ -390,13 +390,13 @@ input:valid ~ span:after { <p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p> -<p>如果您尝试提交少于4个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过8个字符，浏览器将不允许您访问。</p> +<p>如果您尝试提交少于 4 个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过 8 个字符，浏览器将不允许您访问。</p> <h3 id="指定模式">指定模式</h3> <p>您可以使用 <code>{{htmlattrxref("pattern", "input")}}</code> 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> -<p>让我们看一个例子。 假设我们想提供一个产品ID搜索表格，这些ID都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p> +<p>让我们看一个例子。 假设我们想提供一个产品 ID 搜索表格，这些 ID 都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p> <pre class="brush: html notranslate"><form> <div> diff --git a/files/zh-cn/web/html/element/input/submit/index.html b/files/zh-cn/web/html/element/input/submit/index.html index c2a7540199..d84d8ded79 100644 --- a/files/zh-cn/web/html/element/input/submit/index.html +++ b/files/zh-cn/web/html/element/input/submit/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/input/submit --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}} 元素被渲染成按钮. 当 {{event("click")}} 事件发生时(用户点击按钮是一个典型的点击事件), {{Glossary("用户代理")}} 试图提交表单到服务器.</span></p> +<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}} 元素被渲染成按钮。当 {{event("click")}} 事件发生时 (用户点击按钮是一个典型的点击事件), {{Glossary("用户代理")}} 试图提交表单到服务器。</span></p> <div id="summary-example2"> <pre class="brush: html"><input type="submit" value="发送请求"></pre> @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/input/submit <p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> -<p>如果没有指定一个<code>value</code> 值, 按钮将会有一个通过用户代理选择的默认label。 这个label可能是 "Submit" 或者"Submit Query." 这里有一个默认label的提交按钮:</p> +<p>如果没有指定一个<code>value</code> 值，按钮将会有一个通过用户代理选择的默认 label。 这个 label 可能是 "Submit" 或者"Submit Query." 这里有一个默认 label 的提交按钮：</p> <div id="summary-example1"> <pre class="brush: html"><input type="submit"></pre> @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/input/submit <tbody> <tr> <td><code>{{anch("formaction")}}</code></td> - <td>提交表单数据的URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> + <td>提交表单数据的 URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> </tr> <tr> <td><code>{{anch("formenctype")}}</code></td> @@ -88,7 +88,7 @@ translation_of: Web/HTML/Element/input/submit </tr> <tr> <td><code>{{anch("formmethod")}}</code></td> - <td>提交表单时使用的HTTP方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> + <td>提交表单时使用的 HTTP 方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> </tr> <tr> <td><code>{{anch("formnovalidate")}}</code></td> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Element/input/submit <h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> -<p>一个字符串，指示要将数据提交到的URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p> +<p>一个字符串，指示要将数据提交到的 URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p> <p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> @@ -113,9 +113,9 @@ translation_of: Web/HTML/Element/input/submit <dl> <dt><code>application/x-www-form-urlencoded</code></dt> - <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行URL编码后，以字符串形式发送表单数据。</dd> + <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行 URL 编码后，以字符串形式发送表单数据。</dd> <dt><code>multipart/form-data</code></dt> - <dd>使用 {{domxref("FormData")}} API来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd> + <dd>使用 {{domxref("FormData")}} API 来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd> <dt><code>text/plain</code></dt> <dd>纯文本; 通常仅对调试有用，因此您可以轻松查看要提交的数据。</dd> </dl> @@ -126,13 +126,13 @@ translation_of: Web/HTML/Element/input/submit <h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> -<p>一个字符串，指示提交表单数据时要使用的HTTP方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> +<p>一个字符串，指示提交表单数据时要使用的 HTTP 方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> <dl> <dt><code>get</code></dt> - <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用HTTP {{HTTPMethod("get")}}请求将该URL发送到服务器。 此方法适用于仅包含ASCII字符且没有副作用的简单形式。 这是默认值。</dd> + <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造 URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用 HTTP {{HTTPMethod("get")}}请求将该 URL 发送到服务器。 此方法适用于仅包含 ASCII 字符且没有副作用的简单形式。 这是默认值。</dd> <dt><code>post</code></dt> - <dd>表单的数据包含在请求的正文中，该请求的正文使用HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的URL 请求。 此方法支持复杂的数据和文件附件。</dd> + <dd>表单的数据包含在请求的正文中，该请求的正文使用 HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的 URL 请求。 此方法支持复杂的数据和文件附件。</dd> <dt><code>dialog</code></dt> <dd>此方法用于指示按钮仅关闭与输入关联的对话框，而根本不传输表单数据。</dd> </dl> @@ -166,9 +166,9 @@ translation_of: Web/HTML/Element/input/submit <h2 id="使用提交按钮">使用提交按钮</h2> -<p><code><input type="submit"></code> 按钮用于提交form表单. 如果你想要创建一个自定义的按钮，然后通过JavaScript自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, 或者使用更好的 {{htmlelement("button")}} 元素.</p> +<p><code><input type="submit"></code> 按钮用于提交 form 表单。如果你想要创建一个自定义的按钮，然后通过 JavaScript 自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, 或者使用更好的 {{htmlelement("button")}} 元素。</p> -<p>如果你选择使用<code><button></code> 在你的form表单里创建按钮, 请记住: 它只是在{{HTMLElement("form")}}内部的 <code><button></code> ， 应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p> +<p>如果你选择使用<code><button></code> 在你的 form 表单里创建按钮，请记住: 它只是在{{HTMLElement("form")}}内部的 <code><button></code> ， 应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p> <h3 id="一个简单的提交按钮">一个简单的提交按钮</h3> @@ -185,17 +185,17 @@ translation_of: Web/HTML/Element/input/submit </form> </pre> -<p>渲染效果如下:</p> +<p>渲染效果如下：</p> <p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p> -<p>试着输入一些文字到文本字段, 然后提交表单.</p> +<p>试着输入一些文字到文本字段，然后提交表单。</p> -<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <code><form>的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节.</p> +<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符。数据被如何提交、提交到哪都由 <code><form>的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节。</p> <h3 id="添加提交的快捷键">添加提交的快捷键</h3> -<p>键盘快捷键就是使用键盘上的按键, 让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p> +<p>键盘快捷键就是使用键盘上的按键，让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p> <p>在此示例中，将 <kbd>s</kbd> 指定为访问键 (指定为访问键 <kbd>s</kbd> p键加上浏览器/操作系统组合的特定修饰键。为了避免与用户代理自身的键盘快捷键冲突，请使用不同的修饰键 而不是主机上其他快捷方式的访问键。有关更多详细信息，请参见 {{htmlattrxref("accesskey")}}。</p> @@ -212,7 +212,7 @@ translation_of: Web/HTML/Element/input/submit </div> </form></pre> -<p>例如，在Mac版Firefox中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发“发送”按钮，而Windows上的Chrome使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p> +<p>例如，在 Mac 版 Firefox 中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发 “发送” 按钮，而 Windows 上的 Chrome 使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p> <p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p> @@ -226,7 +226,7 @@ translation_of: Web/HTML/Element/input/submit <pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> </div> -<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在JavaScript中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> +<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在 JavaScript 中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> <div class="note"> <p>有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 。</p> @@ -238,7 +238,7 @@ translation_of: Web/HTML/Element/input/submit <h2 id="例子">例子</h2> -<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为“简单按钮”是有原因的。</p> +<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为 “简单按钮” 是有原因的。</p> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/input/tel/index.html b/files/zh-cn/web/html/element/input/tel/index.html index 8c5eb25600..576fb67d77 100644 --- a/files/zh-cn/web/html/element/input/tel/index.html +++ b/files/zh-cn/web/html/element/input/tel/index.html @@ -14,12 +14,12 @@ translation_of: Web/HTML/Element/input/tel --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} <code><strong>"tel"</strong></code> 类型的元素用于让用户输入和编辑电话号码。 Unli不同于<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。</span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} <code><strong>"tel"</strong></code> 类型的元素用于让用户输入和编辑电话号码。 Unli 不同于<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。</span></p> -<p>尽管 <code>tel</code> 类型的输入在功能上和 <code>text</code> 输入一致, 但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。</p> +<p>尽管 <code>tel</code> 类型的输入在功能上和 <code>text</code> 输入一致，但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。</p> <div class="note"> -<p>不支持 <code>"tel"</code> 类型的浏览器会默认使用 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 类型输入.</p> +<p>不支持 <code>"tel"</code> 类型的浏览器会默认使用 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 类型输入。</p> </div> <div id="Basic_example"> @@ -59,13 +59,13 @@ translation_of: Web/HTML/Element/input/tel <h2 id="使用_tel_输入">使用 tel 输入</h2> -<p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的“一刀切”解决方案是不实际的。</p> +<p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的 “一刀切” 解决方案是不实际的。</p> <p>幸运的是，您可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的 {{anch("Validation")}}</p> <h3 id="自定义键盘">自定义键盘</h3> -<p><code><input type="tel"></code> 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘, For 例如，这是键盘在几种设备上的外观。</p> +<p><code><input type="tel"></code> 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘，For 例如，这是键盘在几种设备上的外观。</p> <table class="standard-table"> <caption>移动设备上自定义键盘的示例。</caption> @@ -83,9 +83,9 @@ translation_of: Web/HTML/Element/input/tel </tbody> </table> -<h3 id="一个简单的tel输入">一个简单的tel输入</h3> +<h3 id="一个简单的tel输入">一个简单的 tel 输入</h3> -<p>在最基本的形式中，tel输入可以这样实现：</p> +<p>在最基本的形式中，tel 输入可以这样实现：</p> <pre class="brush: html"><label for="telNo">Phone number:</label> <input id="telNo" name="telNo" type="tel"></pre> @@ -96,7 +96,7 @@ translation_of: Web/HTML/Element/input/tel <h3 id="占位字符">占位字符</h3> -<p>有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个{{HTMLElement("input")}}页面提供描述性标签，这可能是特别重要的 。所以需要占位符。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是“”时，它显示在编辑框中。一旦数据输入框中，占位符消失;如果该框被清空，占位符重新出现。</p> +<p>有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个{{HTMLElement("input")}}页面提供描述性标签，这可能是特别重要的 。所以需要占位符。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是 “” 时，它显示在编辑框中。一旦数据输入框中，占位符消失;如果该框被清空，占位符重新出现。</p> <p>在这里，我们有<code>"tel"</code> 输入的占位符<code>"123-4567-8901"</code>。请注意占位符如何消失并在编辑字段内容时重新出现。</p> @@ -111,7 +111,7 @@ translation_of: Web/HTML/Element/input/tel <h4 id="物理输入元素大小">物理输入元素大小</h4> -<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的物理大小, 使用它,你可以指定输入框一次可显示的字符数,在下面的例子中 <code>tel</code> 编辑框是20个字符的宽度:</p> +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的物理大小，使用它，你可以指定输入框一次可显示的字符数，在下面的例子中 <code>tel</code> 编辑框是 20 个字符的宽度：</p> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20"></pre> @@ -120,9 +120,9 @@ translation_of: Web/HTML/Element/input/tel <h4 id="元素值的长度">元素值的长度</h4> -<p><code>size</code> 和电话号码的长度限制是分开的, 你可以使用 {{htmlattrxref("minlength", "input")}} 属性为输入电话的最小长度;同样使用 {{htmlattrxref("maxlength", "input")}} 设置输入电话号码的最大长度.</p> +<p><code>size</code> 和电话号码的长度限制是分开的， 你可以使用 {{htmlattrxref("minlength", "input")}} 属性为输入电话的最小长度;同样使用 {{htmlattrxref("maxlength", "input")}} 设置输入电话号码的最大长度。</p> -<p>下面的示例创建了一个20个字符的电话号码输入框，要求内容不少于9个字符且不超过14个字符。</p> +<p>下面的示例创建了一个 20 个字符的电话号码输入框，要求内容不少于 9 个字符且不超过 14 个字符。</p> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20" minlength="9" maxlength="14"></pre> @@ -130,12 +130,12 @@ translation_of: Web/HTML/Element/input/tel <p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> <div class="note"> -<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于9个字符，或者大于14个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> +<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> </div> <h3 id="提供默认选项">提供默认选项</h3> -<p>与往常一样, 你可以通过设置其 {{htmlattrxref("value", "input")}} 属性为<code>"tel"</code>输入框提供默认值:</p> +<p>与往常一样，你可以通过设置其 {{htmlattrxref("value", "input")}} 属性为<code>"tel"</code>输入框提供默认值：</p> <div id="Default_value"> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" @@ -171,7 +171,7 @@ translation_of: Web/HTML/Element/input/tel <p>正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。</p> <div class="warning"> -<p><strong>重要</strong>: HTML表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整html是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。</p> +<p><strong>重要</strong>: HTML 表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整 html 是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的 html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。</p> </div> <h3 id="要求电话号码必填">要求电话号码必填</h3> diff --git a/files/zh-cn/web/html/element/input/text/index.html b/files/zh-cn/web/html/element/input/text/index.html index bc76f658f0..651ad3910b 100644 --- a/files/zh-cn/web/html/element/input/text/index.html +++ b/files/zh-cn/web/html/element/input/text/index.html @@ -12,17 +12,17 @@ translation_of: Web/HTML/Element/input/text --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的<code><strong>text</strong></code> 类型创建基础的单行文本框.</span></p> +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的<code><strong>text</strong></code> 类型创建基础的单行文本框。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> -<p class="hidden">交互示例的资源储存在一个github的仓库。如果你想为示例项目做贡献，请clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送 pull request.</p> +<p class="hidden">交互示例的资源储存在一个 github 的仓库。如果你想为示例项目做贡献，请 clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送 pull request.</p> <table class="properties"> <tbody> <tr> <td><strong>{{anch("值")}}</strong></td> - <td>input的一个属性，代表包含在文本框中的文字</td> + <td>input 的一个属性，代表包含在文本框中的文字</td> </tr> <tr> <td><strong>事件</strong></td> @@ -45,16 +45,16 @@ translation_of: Web/HTML/Element/input/text <h2 id="值">值</h2> -<p><code>{{htmlattrxref("value", "input")}}</code> 属性是一个包含了文本框当前文字的<code>{{domxref("DOMString")}}</code>。 你可以在Javascript中获取 <code>{{domxref("HTMLInputElement.value")}}</code> 特性的用途。</p> +<p><code>{{htmlattrxref("value", "input")}}</code> 属性是一个包含了文本框当前文字的<code>{{domxref("DOMString")}}</code>。 你可以在 Javascript 中获取 <code>{{domxref("HTMLInputElement.value")}}</code> 特性的用途。</p> <pre class="brush: js">let theText = myTextInput.value; </pre> -<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串("").</p> +<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串 ("").</p> <h2 id="其他属性">其他属性</h2> -<p>除了所有 <code>{{HTMLElement("input")}}</code> 元素上共有的可操作的属性，以及忽略type属性, 文本输入框还支持以下属性:</p> +<p>除了所有 <code>{{HTMLElement("input")}}</code> 元素上共有的可操作的属性，以及忽略 type 属性，文本输入框还支持以下属性：</p> <table class="standard-table"> <thead> @@ -90,27 +90,27 @@ translation_of: Web/HTML/Element/input/text </tr> <tr> <td><code>{{anch("spellcheck")}}</code></td> - <td>控制是否可以检查文本框的拼写,或者默认的拼写检查配置是否应该使用。 </td> + <td>控制是否可以检查文本框的拼写，或者默认的拼写检查配置是否应该使用。 </td> </tr> </tbody> </table> <h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> -<p>用户可以输入<code>文本</code>输入框中的最大字符(参考UTF-16编码单元)数。 必须为整数，值等于0或者更大。 如果没有规定 <code>maxlength</code> ， 或者规定的值无效, 文本输入框就没有最大值。这个值也必须更大或者等于<code>minlength</code>的值。</p> +<p>用户可以输入<code>文本</code>输入框中的最大字符 (参考 UTF-16 编码单元) 数。 必须为整数，值等于 0 或者更大。 如果没有规定 <code>maxlength</code> ， 或者规定的值无效，文本输入框就没有最大值。这个值也必须更大或者等于<code>minlength</code>的值。</p> -<p>如果文本框中的字符数大于 <code><font color="#333333" face="Consolas">maxlength</font></code><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> UTF-16编码单元，输入框的</span><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">验证</a>就会失败。 约束验证仅作用于用户输入值的时候。</p> +<p>如果文本框中的字符数大于 <code><font color="#333333" face="Consolas">maxlength</font></code><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> UTF-16 编码单元，输入框的</span><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">验证</a>就会失败。 约束验证仅作用于用户输入值的时候。</p> <h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> -<p>用户可以输入到 <code>text</code> 中的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效的值，则 <code>text</code> 将没有最小长度。</p> +<p>用户可以输入到 <code>text</code> 中的最小字符数（以 UTF-16 代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效的值，则 <code>text</code> 将没有最小长度。</p> -<p>如果输入到字段中的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则输入将无法通过约束验证(<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>) 约束验证仅在用户更改值时应用。</p> +<p>如果输入到字段中的文本的长度小于 <code>minlength</code> UTF-16 代码单元的长度，则输入将无法通过约束验证 (<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>) 约束验证仅在用户更改值时应用。</p> <h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> <div id="pattern-include"> -<p>如果指定了 <code>pattern</code> 属性，则它是输入的 <code>{{htmlattrxref("value")}}</code> 必须匹配正则表达式，以使该值通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。它必须是 <code>{{jsxref("RegExp")}}</code> 类型使用有效 JavaScript 正则表达式，并且已在我们的正则表达式指南（<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>）中进行了说明；在编译正则表达式时指定了 <code>'u'</code> 标志，因此该模式被视为Unicode代码点的序列，而不是ASCII。 模式文本周围不能指定正斜杠。</p> +<p>如果指定了 <code>pattern</code> 属性，则它是输入的 <code>{{htmlattrxref("value")}}</code> 必须匹配正则表达式，以使该值通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。它必须是 <code>{{jsxref("RegExp")}}</code> 类型使用有效 JavaScript 正则表达式，并且已在我们的正则表达式指南（<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>）中进行了说明；在编译正则表达式时指定了 <code>'u'</code> 标志，因此该模式被视为 Unicode 代码点的序列，而不是 ASCII。 模式文本周围不能指定正斜杠。</p> <p>如果指定的模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。</p> @@ -125,7 +125,7 @@ translation_of: Web/HTML/Element/input/text <p><code>placeholder</code> 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。 它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。 文本中不得包含回车符或换行符。</p> -<p>如果控件的内容具有一个方向性的 ({{Glossary("LTR")}} 或 {{Glossary("RTL")}}) ，但需要以相反的方向性来显示占位符则可以使用Unicode双向算法格式化字符来 在占位符中覆盖方向性；请参见 {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}。</p> +<p>如果控件的内容具有一个方向性的 ({{Glossary("LTR")}} 或 {{Glossary("RTL")}}) ，但需要以相反的方向性来显示占位符则可以使用 Unicode 双向算法格式化字符来 在占位符中覆盖方向性；请参见 {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}。</p> <div class="note"> <p><strong>注意：</strong>如果可以，请避免使用占位符属性。 它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。 请参见 {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}}。</p> @@ -133,7 +133,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> -<p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过JavaScript代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> +<p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> <div class="note"> <p><strong>注意：</strong>因为只读字段不能有值，所以 <code>required</code> 也对指定了 <code>readonly</code> 属性的输入没有任何影响。</p> @@ -141,13 +141,13 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> -<p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> +<p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是 20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> <p>这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限，使用 <code>{{anch("maxlength")}}</code> 属性。</p> <h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> -<p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节. 则 <code>spellcheck</code> 的允许值为：</p> +<p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节。则 <code>spellcheck</code> 的允许值为：</p> <dl> <dt><code>false</code></dt> @@ -188,7 +188,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> <div id="autocorrect-include"> -<p>Safari扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> +<p>Safari 扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> <dl> <dt><code>on</code></dt> @@ -201,10 +201,10 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> <div id="mozactionhint-include"> -<p>一个Mozilla扩展程序，由Firefox for Android支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> +<p>一个 Mozilla 扩展程序，由 Firefox for Android 支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> <div class="note"> -<p><strong>注意:</strong> 注意：<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">已将其标准化</a>为全局属性 {{htmlattrxref("enterkeyhint")}}，但尚未广泛实现。 要查看Firefox中正在实施的更改的状态，请参阅 {{bug(1490661)}}.</p> +<p><strong>注意：</strong> 注意：<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">已将其标准化</a>为全局属性 {{htmlattrxref("enterkeyhint")}}，但尚未广泛实现。 要查看 Firefox 中正在实施的更改的状态，请参阅 {{bug(1490661)}}.</p> </div> <p>允许的值为： <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, 和 <code>send</code>. 浏览器使用此提示来决定在回车键上放置什么标签。</p> @@ -255,7 +255,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="输入框元素大小">输入框元素大小</h3> -<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的尺寸。 使用它，您可以指定文本输入一次可以显示的字符数。 这会影响元素的宽度，使您可以按字符而不是像素指定宽度。 例如，在此示例中，输入为30个字符宽：</p> +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的尺寸。 使用它，您可以指定文本输入一次可以显示的字符数。 这会影响元素的宽度，使您可以按字符而不是像素指定宽度。 例如，在此示例中，输入为 30 个字符宽：</p> <pre class="brush: html"><form> <div> @@ -276,12 +276,12 @@ translation_of: Web/HTML/Element/input/text <p><code><input></code> 元素的 <code>text</code> 属性没有应用自动验证（因为基本文本输入需要能够接受任意字符串），但是有一些客户端验证选项可用，我们将在下面讨论。</p> <div class="note"> -<p><strong>注意：</strong>HTML表单验证不能替代服务器脚本，以确保输入的数据格式正确。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +<p><strong>注意：</strong>HTML 表单验证不能替代服务器脚本，以确保输入的数据格式正确。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> </div> <h3 id="样式注意事项">样式注意事项</h3> -<p>有一些有用的伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。 它们是 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}}。 在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（tick），并在包含无效值的输入旁边放置一个叉号（X）。</p> +<p>有一些有用的伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。 它们是 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}}。 在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（tick），并在包含无效值的输入旁边放置一个叉号（X）。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -334,7 +334,7 @@ input:valid+span:after { <p>您可以使用 {{htmlattrxref("minlength", "input")}} 属性指定输入值的最小长度（以字符为单位）； 同样，请使用 {{htmlattrxref("maxlength", "input")}} 设置输入值的最大长度（以字符为单位）。</p> -<p>下面的示例要求输入的值的长度为4–8个字符。</p> +<p>下面的示例要求输入的值的长度为 4–8 个字符。</p> <pre class="brush: html"><form> <div> @@ -357,7 +357,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> -<p>如果您尝试提交少于4个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。 如果您尝试输入8个以上的字符，浏览器将不允许您输入。</p> +<p>如果您尝试提交少于 4 个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。 如果您尝试输入 8 个以上的字符，浏览器将不允许您输入。</p> <div class="note"> <p><strong>注意：</strong> 如果您指定了 <code>minlength</code> 但未指定 <code>required</code>, 则输入被视为有效，因为不需要用户指定值。</p> @@ -367,7 +367,7 @@ input:valid+span:after { <p>您可以使用 {{htmlattrxref("pattern","input")}} 属性指定输入值必须匹配才能被认为是有效的正则表达式 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> -<p>下面的示例将值限制为4-8个字符，并要求该值仅包含小写字母。</p> +<p>下面的示例将值限制为 4-8 个字符，并要求该值仅包含小写字母。</p> <pre class="brush: html"><form> <div> diff --git a/files/zh-cn/web/html/element/input/time/index.html b/files/zh-cn/web/html/element/input/time/index.html index 2b47737ba7..c6e2cd736e 100644 --- a/files/zh-cn/web/html/element/input/time/index.html +++ b/files/zh-cn/web/html/element/input/time/index.html @@ -3,8 +3,8 @@ title: <input type="time"> slug: Web/HTML/Element/Input/time tags: - HTML - - HTML表单 - - INPUT元素 + - HTML 表单 + - INPUT 元素 - Input - Time - 元素 @@ -13,19 +13,19 @@ translation_of: Web/HTML/Element/input/time --- <div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">类型为time的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p> +<p><span class="seoSummary">类型为 time 的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p> -<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为Safari是唯一尚未实现的主要浏览器；在Safari和任何其他不支持<code><time></code>的浏览器中，它会优雅地降级为<code><input type=“text”></code>。</p> +<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为 Safari 是唯一尚未实现的主要浏览器；在 Safari 和任何其他不支持<code><time></code>的浏览器中，它会优雅地降级为<code><input type=“text”></code>。</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> -<p class="hidden">这个交互式示例的源代码存储在GitHub存储库中。如果您想对交互式示例项目作出贡献，请克隆https://github.com/mdn/interactive-examples并向我们发送请求。</p> +<p class="hidden">这个交互式示例的源代码存储在 GitHub 存储库中。如果您想对交互式示例项目作出贡献，请克隆 https://github.com/mdn/interactive-examples 并向我们发送请求。</p> <h2 id="Appearance">Appearance</h2> <h3 id="Chrome_and_Opera">Chrome and Opera</h3> -<p>在chrome/opera中，选择时间很简单，根据操作系统区域设置，插槽以12或24小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个“x”按钮来清除控件的值。</p> +<p>在 chrome/opera 中，选择时间很简单，根据操作系统区域设置，插槽以 12 或 24 小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个 “x” 按钮来清除控件的值。</p> <p><img alt="12-hour Chrome time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p> @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element/input/time <h3 id="Firefox">Firefox</h3> -<p>火狐的时间选择和Chrome非常相似，只是它没有上下箭头。它还使用12或24小时格式输入时间，基于系统区域设置。提供“X”按钮以清除控件的值。</p> +<p>火狐的时间选择和 Chrome 非常相似，只是它没有上下箭头。它还使用 12 或 24 小时格式输入时间，基于系统区域设置。提供 “X” 按钮以清除控件的值。</p> <p><img alt="12-hour Firefox time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p> @@ -41,7 +41,7 @@ translation_of: Web/HTML/Element/input/time <h3 id="Edge">Edge</h3> -<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和chrome一样，使用12或24小时格式输入时间，基于系统区域设置：</p> +<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和 chrome 一样，使用 12 或 24 小时格式输入时间，基于系统区域设置：</p> <p><img alt="12-hour Edge time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p> @@ -94,7 +94,7 @@ timeControl.value = '15:30';</pre> <p>在此示例中，您可以通过输入时间并查看之后如何更改来查看时间输入的值。</p> -<p>首先，看一下HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p> +<p>首先，看一下 HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p> <pre class="brush: html notranslate"><form> <label for="startTime">Start time: </label> @@ -171,7 +171,7 @@ startTime.addEventListener("input", function() { <h2 id="Using_time_inputs">Using time inputs</h2> -<p>虽然data和time输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便Safari用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p> +<p>虽然 data 和 time 输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便 Safari 用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p> <p>We'll look at basic and more complex uses of <code><input type="time"></code>, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).</p> diff --git a/files/zh-cn/web/html/element/input/url/index.html b/files/zh-cn/web/html/element/input/url/index.html index 7431e5f3e9..9e3e34c838 100644 --- a/files/zh-cn/web/html/element/input/url/index.html +++ b/files/zh-cn/web/html/element/input/url/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/url --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 元素有一个 <code><strong>url</strong></code> 来让用户输入URL</span>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</p> +<p><span class="seoSummary">{{HTMLElement("input")}} 元素有一个 <code><strong>url</strong></code> 来让用户输入 URL</span>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</p> diff --git a/files/zh-cn/web/html/element/input/week/index.html b/files/zh-cn/web/html/element/input/week/index.html index 78ffc7586b..2dd7bf030c 100644 --- a/files/zh-cn/web/html/element/input/week/index.html +++ b/files/zh-cn/web/html/element/input/week/index.html @@ -11,19 +11,19 @@ translation_of: Web/HTML/Element/input/week --- <div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 类型为 <strong><code>week</code></strong> 的元素会创建输入字段，以便轻松输入年份以及该年（即第1周到<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52 or 53</a>周）的<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 week number</a> </span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} 类型为 <strong><code>week</code></strong> 的元素会创建输入字段，以便轻松输入年份以及该年（即第 1 周到<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52 or 53</a>周）的<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 week number</a> </span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> -<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</div> +<div class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</div> -<p>控件的用户界面因浏览器而异； 跨浏览器的支持目前受到限制，目前只有Chrome / Opera和Microsoft Edge支持。 在不支持的浏览器中，该控件会正常降级，使其功能与 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>相同。</p> +<p>控件的用户界面因浏览器而异； 跨浏览器的支持目前受到限制，目前只有 Chrome / Opera 和 Microsoft Edge 支持。 在不支持的浏览器中，该控件会正常降级，使其功能与 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>相同。</p> -<p> 在Chrome / Opera中，在<code>week</code>控件提供了用于填写周和年值的插槽，弹出式日历界面（可以更直观地选择它们）以及“ X”按钮以清除控件的值。</p> +<p> 在 Chrome / Opera 中，在<code>week</code>控件提供了用于填写周和年值的插槽，弹出式日历界面（可以更直观地选择它们）以及 “ X” 按钮以清除控件的值。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> -<p>Edge的<code>week</code>控制更加精细，使用滚动的滚轮打开周和年的选择器。</p> +<p>Edge 的<code>week</code>控制更加精细，使用滚动的滚轮打开周和年的选择器。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> @@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/input/week <p>要注意的一件事是，显示的格式可能与<code>value</code>不同，后者始终采用 <code>yyyy-Www</code>格式。 例如，当将上述值提交给服务器时，浏览器可能会将其显示为 <code>Week 01, 2017</code>, 但是提交的值始终看起来像<code>week=2017-W01</code>.</p> -<p>您还可以使用输入元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取并设置JavaScript中的值，例如：</p> +<p>您还可以使用输入元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取并设置 JavaScript 中的值，例如：</p> <pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); weekControl.value = '2017-W45';</pre> @@ -119,13 +119,13 @@ weekControl.value = '2017-W45';</pre> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> -<p>对于<code>week</code> 输入， <code>step</code> 的值以周为单位，比例因子为604,800,000（因为基础数值以毫秒为单位）。 <code>step</code>的默认值为1，表示1周。 默认的步进基数是-259,200,000，这是1970年第一周的开始 (<code>"1970-W01"</code>).</p> +<p>对于<code>week</code> 输入， <code>step</code> 的值以周为单位，比例因子为 604,800,000（因为基础数值以毫秒为单位）。 <code>step</code>的默认值为 1，表示 1 周。 默认的步进基数是-259,200,000，这是 1970 年第一周的开始 (<code>"1970-W01"</code>).</p> <p><em>目前，尚不清楚当与<code>week</code>输入一起使用时，<code>"any"</code> 的值对<code>step</code> 意味着什么。 确定该信息后，将对其进行更新。</em></p> <h2 id="使用星期输入">使用星期输入</h2> -<p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> +<p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单 UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> <p>我们将研究 <code><input type="week"></code>的基本和更复杂的用法，然后在以后提供有关缓解浏览器支持问题的建议（请参阅 {{anch("Handling browser support")}}).</p> @@ -144,13 +144,13 @@ weekControl.value = '2017-W45';</pre> <p><code><input type="week"></code> 不支持 {{htmlattrxref("size", "input")}}. 您必须依靠<a href="/en-US/docs/Web/CSS">CSS</a>来确定大小 。</p> -<h3 id="使用step属性">使用step属性</h3> +<h3 id="使用step属性">使用 step 属性</h3> <p>您应该能够使用{{htmlattrxref("step", "input")}} 属性来更改每次递增或递减的跳转周数，但是这似乎对支持浏览器没有任何影响。</p> <h2 id="验证方式">验证方式</h2> -<p>默认情况下，<code><input type="week"></code> 不会对输入的值应用任何验证。 UI实现通常不允许您指定不是有效的周/年的任何内容，这很有用，但是仍然可以在字段为空的情况下提交，并且您可能希望限制可选择的周数范围。</p> +<p>默认情况下，<code><input type="week"></code> 不会对输入的值应用任何验证。 UI 实现通常不允许您指定不是有效的周/年的任何内容，这很有用，但是仍然可以在字段为空的情况下提交，并且您可能希望限制可选择的周数范围。</p> <h3 id="设置最大和最小星期">设置最大和最小星期</h3> @@ -165,7 +165,7 @@ weekControl.value = '2017-W45';</pre> <p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p> -<p>这是上面示例中使用的CSS。 在这里，我们利用{{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS属性根据当前值是否有效来设置输入的样式。 我们必须将图标放在输入旁边的 {{htmlelement("span")}} 上，而不是输入本身上，因为在Chrome中，生成的内容位于表单控件内，无法设置样式或显示 有效。</p> +<p>这是上面示例中使用的 CSS。 在这里，我们利用{{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS 属性根据当前值是否有效来设置输入的样式。 我们必须将图标放在输入旁边的 {{htmlelement("span")}} 上，而不是输入本身上，因为在 Chrome 中，生成的内容位于表单控件内，无法设置样式或显示 有效。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -192,7 +192,7 @@ input:valid+span:after { padding-left: 5px; }</pre> -<p>结果是，在2017年W01到W52之间只有几周才被视为有效，并且可以在支持的浏览器中选择。</p> +<p>结果是，在 2017 年 W01 到 W52 之间只有几周才被视为有效，并且可以在支持的浏览器中选择。</p> <h3 id="使周值成为必需">使周值成为必需</h3> @@ -221,36 +221,36 @@ input:valid+span:after { <p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> <div class="warning"> -<p><strong>重要提示：</strong>HTML表单验证不能代替脚本来确保输入的数据采用正确的格式。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果您的服务器端代码无法验证其接收到的数据，则在提交格式不正确的数据（或太大，类型错误的数据等）时，灾难可能会发生。</p> +<p><strong>重要提示：</strong>HTML 表单验证不能代替脚本来确保输入的数据采用正确的格式。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果您的服务器端代码无法验证其接收到的数据，则在提交格式不正确的数据（或太大，类型错误的数据等）时，灾难可能会发生。</p> </div> <h2 id="处理浏览器支持">处理浏览器支持</h2> -<p>如上所述，现在使用星期输入的主要问题是浏览器支持：Safari和Firefox在桌面上不支持它，而旧版本的IE不支持它。</p> +<p>如上所述，现在使用星期输入的主要问题是浏览器支持：Safari 和 Firefox 在桌面上不支持它，而旧版本的 IE 不支持它。</p> <p><br> - 诸如Android和iOS之类的移动平台确实很好地利用了这种输入类型，提供了专门的UI控件，使在触摸屏环境中选择值变得非常容易。 例如，Android版Chrome上的周选择器如下所示：<img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + 诸如 Android 和 iOS 之类的移动平台确实很好地利用了这种输入类型，提供了专门的 UI 控件，使在触摸屏环境中选择值变得非常容易。 例如，Android 版 Chrome 上的周选择器如下所示：<img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> <p>不支持的浏览器会优雅地降级为文本输入，但这在用户界面的一致性（所提供的控件将有所不同）和数据处理方面都产生了问题。</p> <p>第二个问题是更严重的。 如前所述，在输入一个<code>week</code> 的情况下，实际值始终会归一化为 <code>yyyy-Www</code>格式。当浏览器退回通用文本输入时，没有什么可以指导用户正确格式化输入的格式（这肯定是不直观的）。 人们可以通过多种方式来写星期值。 例如：</p> <ul> - <li><code>2017年第1周</code></li> - <li><code>2017年1月2日至8日</code></li> + <li><code>2017 年第 1 周</code></li> + <li><code>2017 年 1 月 2 日至 8 日</code></li> <li><code>2017-W01</code></li> <li>等等。</li> </ul> -<p>目前，以跨浏览器方式处理星期/年的最佳方法是让用户在单独的控件中输入星期数和年份 ({{htmlelement("select")}} 元素很流行； 参见下面的示例），或使用JavaScript库（例如 <a href="https://jqueryui.com/datepicker/">jQuery日期选择器</a>。</p> +<p>目前，以跨浏览器方式处理星期/年的最佳方法是让用户在单独的控件中输入星期数和年份 ({{htmlelement("select")}} 元素很流行； 参见下面的示例），或使用 JavaScript 库（例如 <a href="https://jqueryui.com/datepicker/">jQuery 日期选择器</a>。</p> <h2 id="例子">例子</h2> -<p>在此示例中，我们创建了两组用于选择星期的UI元素：使用 <code><input type="week"></code>，创建的本机选择器，以及两个用于选择星期/年的 {{htmlelement("select")}} 元素的集合 不支持<code>week</code>输入类型的旧版浏览器。 </p> +<p>在此示例中，我们创建了两组用于选择星期的 UI 元素：使用 <code><input type="week"></code>，创建的本机选择器，以及两个用于选择星期/年的 {{htmlelement("select")}} 元素的集合 不支持<code>week</code>输入类型的旧版浏览器。 </p> <p>{{EmbedLiveSample('Examples', 600, 140)}}</p> -<p>HTML看起来像这样：</p> +<p>HTML 看起来像这样：</p> <pre class="brush: html"><form> <div class="nativeWeekPicker"> @@ -278,7 +278,7 @@ input:valid+span:after { </div> </form></pre> -<p>周值由下面的JavaScript代码动态生成。</p> +<p>周值由下面的 JavaScript 代码动态生成。</p> <div class="hidden"> <pre class="brush: css">div { @@ -351,7 +351,7 @@ function populateWeeks() { }</pre> <div class="note"> -<p><strong>注意：</strong> 请记住，有些年份有53周（请参阅 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">每年的周数</a>)！ 在开发生产应用程序时，您需要考虑到这一点。</p> +<p><strong>注意：</strong> 请记住，有些年份有 53 周（请参阅 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">每年的周数</a>)！ 在开发生产应用程序时，您需要考虑到这一点。</p> </div> <h2 id="技术指标">技术指标</h2> @@ -381,6 +381,6 @@ function populateWeeks() { <ul> <li>通用 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}</li> - <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">HTML中使用的日期和时间格式</a></li> + <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">HTML 中使用的日期和时间格式</a></li> <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, 和 <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> </ul> |