From 01b845e6d402777fe03cc4dd7ed5f21af400eed1 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Tue, 4 Jan 2022 17:38:26 +0800 Subject: Improve copywriting for add spaces between Chinese and English words for files/zh-cn/web/html/element. --- .../zh-cn/web/html/element/input/button/index.html | 6 +- .../web/html/element/input/checkbox/index.html | 14 ++--- .../zh-cn/web/html/element/input/color/index.html | 30 +++++----- files/zh-cn/web/html/element/input/date/index.html | 62 +++++++++---------- .../html/element/input/datetime-local/index.html | 36 +++++------ .../zh-cn/web/html/element/input/email/index.html | 12 ++-- files/zh-cn/web/html/element/input/file/index.html | 18 +++--- .../zh-cn/web/html/element/input/hidden/index.html | 18 +++--- files/zh-cn/web/html/element/input/index.html | 58 +++++++++--------- .../zh-cn/web/html/element/input/month/index.html | 22 +++---- .../zh-cn/web/html/element/input/number/index.html | 22 +++---- .../web/html/element/input/password/index.html | 24 ++++---- .../zh-cn/web/html/element/input/radio/index.html | 6 +- .../zh-cn/web/html/element/input/range/index.html | 70 +++++++++++----------- .../zh-cn/web/html/element/input/reset/index.html | 14 ++--- .../zh-cn/web/html/element/input/search/index.html | 40 ++++++------- .../zh-cn/web/html/element/input/submit/index.html | 38 ++++++------ files/zh-cn/web/html/element/input/tel/index.html | 28 ++++----- files/zh-cn/web/html/element/input/text/index.html | 50 ++++++++-------- files/zh-cn/web/html/element/input/time/index.html | 20 +++---- files/zh-cn/web/html/element/input/url/index.html | 2 +- files/zh-cn/web/html/element/input/week/index.html | 46 +++++++------- 22 files changed, 318 insertions(+), 318 deletions(-) (limited to 'files/zh-cn/web/html/element/input') 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 ---

{{HTMLRef}}

-

元素<input type="button"> 是  <input> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <button>元素取代

+

元素<input type="button"> 是  <input> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在 HTML5 被 <button>元素取代

浏览器生成一个控件没有默认值的可点击按钮。该按钮上可有任何标签。该控件在不同的浏览器上，可能有不同的样式。

@@ -198,7 +198,7 @@ translation_of: Web/HTML/Element/input/button Feature Android - Firefox 移动版(Gecko) + Firefox 移动版 (Gecko) IE 移动版 Opera 移动版 Safari 移动版 @@ -247,5 +247,5 @@ translation_of: Web/HTML/Element/input/button 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: slug: Web/HTML/Element/Input/checkbox translation_of: Web/HTML/Element/input/checkbox --- -

HTML input元素 <input type="checkbox"> 允许你为表单中（或不在表单中）的提交项选择一个单一值。

+

HTML input 元素 <input type="checkbox"> 允许你为表单中（或不在表单中）的提交项选择一个单一值。

-

注意： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。

+

注意： 若表单提交时，checkbox 未勾选，则提交的值并非为 value=unchecked；此时的值不会被提交到服务器。

属性

@@ -16,13 +16,13 @@ translation_of: Web/HTML/Element/input/checkbox
{{htmlattrdef("checked")}}
-

当type属性的值为checkbox时, 这个属性的存在表示input是否默认被选中。你可以将该属性设置为checked="checked"，或更简单地只设置为checked。

+

当type属性的值为checkbox 时, 这个属性的存在表示 input 是否默认被选中。你可以将该属性设置为checked="checked"，或更简单地只设置为checked。

{{htmlattrdef("value")}}
-
指定input的值。如果省略，获取该元素的值的结果为字符串"on"。
- 请注意，如果value值发生改变后页面重新加载，Gecko和IE会忽略HTML源代码中设置的value值。
+
指定 input 的值。如果省略，获取该元素的值的结果为字符串"on"。
+ 请注意，如果 value 值发生改变后页面重新加载，Gecko 和 IE会忽略 HTML 源代码中设置的 value 值。
{{htmlattrdef("indeterminate")}}
-
指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。
+
指定 checkbox 处于不定状态（在大多数平台，这样会产生一个划过 checkbox 的横线）。

示例

@@ -37,7 +37,7 @@ translation_of: Web/HTML/Element/input/checkbox </p> -

以上代码将产生2个checkbox，如下所示：

+

以上代码将产生 2 个 checkbox，如下所示：

{{EmbedLiveSample("Example")}}

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: slug: Web/HTML/Element/Input/color translation_of: Web/HTML/Element/input/color --- -

<input type="color">元素是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）

+

<input type="color">元素是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域。（不支持 Alpha 通道）

-

此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。（更多信息）

+

此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其 UI 除要能接收文本格式的颜色外，未要求其他特性。（更多信息）

- + @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/input/color - + @@ -38,17 +38,17 @@ translation_of: Web/HTML/Element/input/color
{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}
-
设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。
+
设置颜色区域的 autocomplete 值。如果为 true，则将自动填充颜色选择器上次存储的值。
{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}
此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有autofocus属性，值为布尔值。
{{htmlattrdef("disabled")}}
-

此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。

+

此布尔值标明颜色选择其是否不可用于交互。另外，disabled 时的值不会随表单提交。

{{htmlattrdef("name")}}
-
随表单一起提交的颜色选择器的name。
+
随表单一起提交的颜色选择器的 name。
{{htmlattrdef("value")}}
-
颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。
+
颜色选择器的 value，指定颜色选择器默认选择的颜色。input 的 value 值必须是长度为 7 的字符串，以#开始，包含 16 进制格式的颜色值。例如：#FF0000 为红色的 16 进制值。

使用

@@ -69,11 +69,11 @@ translation_of: Web/HTML/Element/input/color

{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}

-

下面的图片展示了macOS平台Chrome浏览器的颜色选择器：

+

下面的图片展示了 macOS 平台 Chrome 浏览器的颜色选择器：

This is how an input type color looks on Mac and within Chrome

-

如果你没有手动指定的话，元素的默认值为"#000000"，即黑色。输入必须为7个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如"#rrggbb"。如果你想输入的颜色是其他格式（比如CSS中的rgb()或rgba()记法），在设定value值时必须将其转换为这种格式。

+

如果你没有手动指定的话，元素的默认值为"#000000"，即黑色。输入必须为 7 个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各 2 个，形如"#rrggbb"。如果你想输入的颜色是其他格式（比如 CSS 中的rgb()或rgba()记法），在设定value值时必须将其转换为这种格式。

监听颜色变化

@@ -103,21 +103,21 @@ colorPicker.

实现差异

-

如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在Safari 10.1中，你将会看到以下内容：

+

如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在 Safari 10.1 中，你将会看到以下内容：

Screenshot of the example taken in Safari.

-

而相同的内容在Firefox 55下则会显示成：

+

而相同的内容在 Firefox 55 下则会显示成：

Screenshot of the example taken in Firefox 55 for macOS

-

如果点击元素，则会弹出选色器，在此例中，为macOS平台的选色器。

+

如果点击元素，则会弹出选色器，在此例中，为 macOS 平台的选色器。

Screenshot of the element with the color picker open in Firefox Mac.

验证

-

如果当前的{{Glossary("user agent")}}下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。

+

如果当前的{{Glossary("user agent")}}下，用户输入无法转换为 7 个字符的十六进制 RGB 形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。

规范

@@ -217,4 +217,4 @@ colorPicker.
内容分类流动区域, 列表, 可提交, 可重置, 表单相关元素, 短语内容, 可标记元素, 可触摸元素。流动区域, 列表, 可提交, 可重置, 表单相关元素, 短语内容, 可标记元素，可触摸元素。
允许的内容任何接受短语内容的元素。
DOM接口DOM 接口 {{domxref("HTMLInputElement")}}
-

[1]  在Windows Touch上尚未实现。

+

[1]  在 Windows Touch 上尚未实现。

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

{{HTMLRef}}

-

日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。time 和 datetime-local输入类支持time 和 date/time 输入。

+

日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。time 和 datetime-local输入类支持 time 和 date/time 输入。

-

通常来说控件的UI界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<input type="text">输入框。

+

通常来说控件的 UI 界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<input type="text">输入框。

<input id="date" type="date">
@@ -15,15 +15,15 @@ translation_of: Web/HTML/Element/input/date

{{ EmbedLiveSample('Basic_example', 600, 40) }}

-

其中，Chrome/Opera浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：

+

其中，Chrome/Opera 浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：

-

Edge的日期控件看起来是这样子的:

+

Edge 的日期控件看起来是这样子的：

-

Firefox的日期控件看起来是这样子的:

+

Firefox 的日期控件看起来是这样子的：

Datepicker UI in firefox

@@ -62,16 +62,16 @@ translation_of: Web/HTML/Element/input/date

有一点需要注意的是，在格式方面显示的日期与实际的不一样 — 显示的日期格式取决于用户浏览器的区域设定，而日期值的格式始终为 yyyy-mm-dd。

-

当然你也可以在JavaScript中通过input元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如:

+

当然你也可以在 JavaScript 中通过 input 元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如：

var dateControl = document.querySelector('input[type="date"]');
 dateControl.value = '2017-06-01';
-

这行代码查找类型为date的第一个input元素，并且将其值设置为2017-06-01（2017年6月1日）

+

这行代码查找类型为 date 的第一个 input 元素，并且将其值设置为 2017-06-01（2017 年 6 月 1 日）

使用日期输入控件

-

日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择UI界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。

+

日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择 UI 界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。

我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅{{anch("Handling browser support")}}）。

@@ -101,25 +101,25 @@ dateControl.value = '2017-06-01';

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

-

在结果中我们可以看到，只有2017年4月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出4月份以外的日期不能通过日期控件的选择小部件选择。

+

在结果中我们可以看到，只有 2017 年 4 月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出 4 月份以外的日期不能通过日期控件的选择小部件选择。

-

注意: 您应该可以使用step属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。

+

注意: 您应该可以使用 step 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。

控制输入框大小

-

<input type="date"> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 CSS 的帮助.

+

<input type="date"> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 CSS 的帮助。

验证

-

默认情况下, <input type="date"> 对输入的值不会做任何校验。 UI实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者  (在被优雅降级为 text 类型的输入框) 输入一个不合法的值 (例如： 4月32号)。

+

默认情况下，<input type="date"> 对输入的值不会做任何校验。 UI 实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者  (在被优雅降级为 text 类型的输入框) 输入一个不合法的值 (例如： 4 月 32 号)。

-

如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期  (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而, 你必须检查这些结果以确保他们在这些日期范围内, 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。

+

如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期  (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而， 你必须检查这些结果以确保他们在这些日期范围内， 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。

-

另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期, 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。

+

另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期， 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。

-

让我们看一个例子 — 我们设置了日期的最大和最小值, 并且设定为必填:

+

让我们看一个例子 — 我们设置了日期的最大和最小值， 并且设定为必填：

<form>
   <div>
@@ -132,15 +132,15 @@ dateControl.value = '2017-06-01';
</div> </form> -

如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子:

+

如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子：

{{ EmbedLiveSample('Validation', 600, 100) }}

-

这个截图是为那些浏览器不支持的人准备的:

+

这个截图是为那些浏览器不支持的人准备的：

-

这是上面例子使用的css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身, 因为在Chrome中被放置在表单中生成的内容不能有效的样式化或者显示。

+

这是上面例子使用的 css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身， 因为在 Chrome 中被放置在表单中生成的内容不能有效的样式化或者显示。

div {
     margin-bottom: 10px;
@@ -164,18 +164,18 @@ input:valid+span:after {
 }
-

重要: HTML表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整HTML绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).

+

重要: HTML 表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整 HTML 绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).

手持設備浏览器支持

-

正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}} （浏览器支持）. 举一个例子, 在安卓系统的Firefox中选择器是这样子的:

+

正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}}（浏览器支持）. 举一个例子， 在安卓系统的 Firefox 中选择器是这样子的：

-

在不支持的浏览器上会被降级为文本输入框, 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。

+

在不支持的浏览器上会被降级为文本输入框， 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。

-

第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 yyyy-mm-dd. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如:

+

第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 yyyy-mm-dd. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如：

-

 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子:

+

 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子：

<form>
   <div>
@@ -201,7 +201,7 @@ input:valid+span:after {
 
 
{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

 
-
如果你尝试提交，如果你的输入不符合正则表达式 nnn-nn-nn（n 是0到9的数字）， 你将会看到浏览器显示一个错误(并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如yyyy-dd-mm (而我们想要的 yyyy-mm-dd)。因此我们仍然有一个问题。

+
如果你尝试提交，如果你的输入不符合正则表达式 nnn-nn-nn（n 是 0 到 9 的数字）， 你将会看到浏览器显示一个错误 (并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如yyyy-dd-mm (而我们想要的 yyyy-mm-dd)。因此我们仍然有一个问题。

 
 
 
-
目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用JavaScript库， 例如  jQuery date picker.

+
目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用 JavaScript 库， 例如  jQuery date picker.

 
 
例子

 
-
在这个例子中，我们创建了两组用于选择日期的UI元素: 一个本地 <input type="date"> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。

+
在这个例子中，我们创建了两组用于选择日期的 UI 元素: 一个本地 <input type="date"> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。

 
 
{{ EmbedLiveSample('Examples', 600, 100) }}

 
 
HTML

 
-
HTML看起来像这样:

+
HTML 看起来像这样：

 
 
<form>
     <div class="nativeDatePicker">
@@ -279,7 +279,7 @@ input:valid + span:after {
     </div>
 </form>

 
-
月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的(请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)

+
月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的 (请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)

校验

-

默认情况下 <input type="datetime-local"> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4月32日）。

+

默认情况下 <input type="datetime-local"> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4 月 32 日）。

你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 anch("设定日期时间的最大值和最小值")），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。

@@ -170,7 +170,7 @@ dateControl.value = '2017-06-01T08:30';

-

这里有上面例子的CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。

+

这里有上面例子的 CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。

div {
     margin-bottom: 10px;
@@ -194,7 +194,7 @@ input:valid+span:after {
 }
-

重要提示：HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候 （或是数据太大，或是格式错误，等等）。

+

重要提示：HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候（或是数据太大，或是格式错误，等等）。

处理浏览器支持

@@ -213,8 +213,8 @@ input:valid+span:after {
  • mm/dd/yyyy
  • dd-mm-yyyy
  • mm-dd-yyyy
    • -
  • mm-dd-yyyy hh:mm （12小时制）
    • -
  • mm-dd-yyyy HH:mm （24小时制）
    • +
  • mm-dd-yyyy hh:mm （12 小时制）
    • +
  • mm-dd-yyyy HH:mm （24 小时制）
  • 等等
    • @@ -236,7 +236,7 @@ input:valid+span:after {

    {{ EmbedLiveSample('处理浏览器支持', 600, 100) }}

    -

    你试一下提交数据，如果你输入的内容不满足 nnnn-nn-nnTnn:nn 格式（n为0 ~ 9的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。

    +

    你试一下提交数据，如果你输入的内容不满足 nnnn-nn-nnTnn:nn 格式（n 为 0 ~ 9 的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。

    然而什么样的用户会去理解这样一个他们要输入的日期和时间格式呢？

    @@ -268,15 +268,15 @@ input:valid + span:after { } -

    目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript库，如 jQuery date picker 及 jQuery timepicker plugin。

    +

    目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript 库，如 jQuery date picker 及 jQuery timepicker plugin。

    例子

    -

    在这个例子中，我们创建两套UI元素来选择日期时间 —— 一套原生的 <input type="datetime-local"> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。

    +

    在这个例子中，我们创建两套 UI 元素来选择日期时间 —— 一套原生的 <input type="datetime-local"> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。

    {{ EmbedLiveSample('例子', 600, 140) }}

    -

    HTML代码如下：

    +

    HTML 代码如下：

    <form>
   <div class="nativeDateTimePicker">
@@ -359,7 +359,7 @@ input:valid+span:after {
 }
    -

    代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <input type="datetime-local">，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 type 为 datetime-local，然后立即检查它被设置的类型。不支持 datetime-local 的浏览器返回 text，因为这就是 datetime-local 要回退的类型。 如果 <input type="datetime-local"> 不被支持，我们隐藏原生的控件并显示备用的控件UI （{{htmlelement("select")}}）来替代。

    +

    代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <input type="datetime-local">，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 type 为 datetime-local，然后立即检查它被设置的类型。不支持 datetime-local 的浏览器返回 text，因为这就是 datetime-local 要回退的类型。 如果 <input type="datetime-local"> 不被支持，我们隐藏原生的控件并显示备用的控件 UI （{{htmlelement("select")}}）来替代。

    // define variables
 var nativePicker = document.querySelector('.nativeDateTimePicker');
@@ -497,7 +497,7 @@ daySelect.onchange = function() {
 }
    -

    注意：请记住某些年份有53个星期（见Weeks per year）！当你在开发产品应用时应当考虑这个问题。

    +

    注意：请记住某些年份有 53 个星期（见Weeks per year）！当你在开发产品应用时应当考虑这个问题。

    规范

    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 ---
    {{HTMLRef}}
    -

    带有 "email" (电子邮箱)类型标记的输入框元素({{HTMLElement("input")}})能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式). CSS伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。

    +

    带有 "email" (电子邮箱) 类型标记的输入框元素 ({{HTMLElement("input")}}) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。

    -

    注意: 不支持“电子邮件”类型的浏览器可以回退为标准的“文本”输入。

    +

    注意: 不支持 “电子邮件” 类型的浏览器可以回退为标准的 “文本” 输入。

    {{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-standard")}}
    @@ -72,14 +72,14 @@ translation_of: Web/HTML/Element/input/email -

    电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件”输入类型可以使您作为Web开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值“email”创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。

    +

    电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件” 输入类型可以使您作为 Web 开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值 “email” 创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。

    然而，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，对应于站点的用户，或者以任何其他方式可接受。 它只是确保将字段的值正确格式化为电子邮件地址。

    -

    注意：记住用户可以在幕后修改HTML也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。

    +

    注意：记住用户可以在幕后修改 HTML 也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。

    A simple email input

    @@ -192,12 +192,12 @@ translation_of: Web/HTML/Element/input/email

    There are two levels of content validation available for "email" 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.

    -

    重要提示：HTML表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整HTML非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的HTML并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。

    +

    重要提示：HTML 表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整 HTML 非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的 HTML 并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。

    Basic validation

    -

    支持“电子邮件”输入类型的浏览器会自动提供验证，以确保只有符合Internet电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：

    +

    支持 “电子邮件” 输入类型的浏览器会自动提供验证，以确保只有符合 Internet 电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：

    /^[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
 
    Note:
 
 
      
- 
    1. 如果选择了多个文件, 这个值表示第一个已选择文件的路径。JavaScript 可以通过 input 的 files 属性访问其他文件。
      2. 
+ 
    2. 如果选择了多个文件，这个值表示第一个已选择文件的路径。JavaScript 可以通过 input 的 files 属性访问其他文件。
      3. 
  
    3. 如果没有选择文件，该值为空字符串 ""。
      4. 
  
    4. 为了阻止恶意软件猜测文件路径，字符串以 C:\fakepath\ 为前缀。
      5. 
 
    
@@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input/file
 
    如果出现布尔属性 webkitdirectory，表示在文件选择器界面中用户只能选择目录。更多细节和示例见  {{domxref("HTMLInputElement.webkitdirectory")}}。
    
 
 
    
-
    Note: 尽管 webkitdirectory 最初仅为基于webkit的浏览器实现，它还在Microsoft Edge和Firefox 50及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。
    
+
    Note: 尽管 webkitdirectory 最初仅为基于 webkit 的浏览器实现，它还在 Microsoft Edge 和 Firefox 50 及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。
    
 
    
 
    
 
@@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/file
 
@@ -217,7 +217,7 @@ translation_of: Web/HTML/Element/input/file
  
    name
    
  
    文件名。
    
  
    lastModified
    
- 
    一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970年1月1日午夜）以来的毫秒数表示。
    
+ 
    一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970 年 1 月 1 日午夜）以来的毫秒数表示。
    
  
    lastModifiedDate {{deprecated_inline}}
    
  
    一个 {{jsxref("Date")}} 对象，表示文件最后一次修改的日期和时间。这被弃用，并且不应使用。使用 lastModified 作为替代。
    
  
    size
    
@@ -300,7 +300,7 @@ input.value = "foo";
 
    在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 HTMLInputElement.files 属性中可用的文件信息，并且展示了一些聪明的技巧。
    
 
 
    
-
    Note: 你可以在 GitHub 中查看本示例的完整源代码 — file-example.html （在线运行）。我们不会解释 CSS；JavaScript是主要的关注点。
    
+
    Note: 你可以在 GitHub 中查看本示例的完整源代码 — file-example.html （在线运行）。我们不会解释 CSS；JavaScript 是主要的关注点。
    
 
    
 
 
    首先，让我们看看 HTML：
    
@@ -376,7 +376,7 @@ form label:active, form button:active {
 
 
    这和我们之前看到的类似 — 没有什么要说明的。
    
 
-
    接下来，让我们看一下JavaScript。
    
+
    接下来，让我们看一下 JavaScript。
    
 
 
    在脚本的第一行，我们获得了对表单 input 本身和拥有 .preview 类的 {{htmlelement("div")}} 元素的引用。然后，我们隐藏了 {{htmlelement("input")}} 元素 — 我们这样做是因为文件输入往往很难看，难于设计样式，而且在跨浏览器中对它们的设计不一致。你可以通过单击 input 元素来激活它，因此，最好在视觉上隐藏 input 并将 label 设计成按钮的样式，这样用户如果想上传文件就会知道如何与之交互。
    
 
@@ -396,9 +396,9 @@ input.style.opacity = 0;

    每当 updateImageDisplay() 函数被调用时，我们：