From 13db12ce5c9cfe0c433f35587035dce15eedf294 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 26 Jul 2021 15:31:56 -0400 Subject: remove link 'title' attributes that's just the 'href' (zh-cn) --- .../learn/forms/advanced_form_styling/index.html | 20 ++++++++--------- .../forms/basic_native_form_controls/index.html | 2 +- files/zh-cn/learn/forms/form_validation/index.html | 14 ++++++------ .../how_to_build_custom_form_controls/index.html | 20 ++++++++--------- .../forms/how_to_structure_a_web_form/index.html | 2 +- .../forms/html_forms_in_legacy_browsers/index.html | 26 +++++++++++----------- .../sending_and_retrieving_form_data/index.html | 10 ++++----- .../zh-cn/learn/forms/styling_web_forms/index.html | 2 +- files/zh-cn/learn/forms/your_first_form/index.html | 4 ++-- 9 files changed, 50 insertions(+), 50 deletions(-) (limited to 'files/zh-cn/learn/forms') diff --git a/files/zh-cn/learn/forms/advanced_form_styling/index.html b/files/zh-cn/learn/forms/advanced_form_styling/index.html index 57337e054e..67d3b8f068 100644 --- a/files/zh-cn/learn/forms/advanced_form_styling/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -84,9 +84,9 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms
  • 其他
    • -
  • Microsoft CSS 扩展 +
  • Microsoft CSS 扩展
    • @@ -417,17 +417,17 @@ option {

    要实现对表单小部件的完全控制，你别无选择，只能选择依靠JavaScript。在文章How to build custom form widgets中，我们将看到具体的做法，其中还有一些非常有用的库：

    下面的库不止应用于表单，他们在处理HTML表单时是非常有趣的：

    记住，使用CSS和JavaScript是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的Web站点或应用。

    @@ -441,8 +441,8 @@ option {

    相关链接

    {{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}

    diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.html b/files/zh-cn/learn/forms/basic_native_form_controls/index.html index 0f738f9d23..2430153944 100644 --- a/files/zh-cn/learn/forms/basic_native_form_controls/index.html +++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.html @@ -677,7 +677,7 @@ beans.oninput = function() {

    要深入了解不同的表单小部件，您需要了解一些有用的外部资源:

    diff --git a/files/zh-cn/learn/forms/form_validation/index.html b/files/zh-cn/learn/forms/form_validation/index.html index ba067365aa..827e0a905e 100644 --- a/files/zh-cn/learn/forms/form_validation/index.html +++ b/files/zh-cn/learn/forms/form_validation/index.html @@ -536,7 +536,7 @@ email.addEventListener("input", function (event) { -

    对于旧版浏览器，可以使用 polyfill（例如 Hyperform），来弥补其对约束校验 API 支持的不足。既然你已经使用 JavaScript，在您的网站或 Web 应用程序的设计和实现中使用 polyfill 并不是累赘。

    +

    对于旧版浏览器，可以使用 polyfill（例如 Hyperform），来弥补其对约束校验 API 支持的不足。既然你已经使用 JavaScript，在您的网站或 Web 应用程序的设计和实现中使用 polyfill 并不是累赘。

    使用约束校验 API 的例子

    @@ -669,9 +669,9 @@ form.addEventListener("submit", function (event) {
    如何帮助用户纠正无效数据?
    为了减少用户的挫折感，提供尽可能多的有用的信息是非常重要的，以便引导他们纠正他们的输入。 您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。 如果您想深入了解表单校验用户界面要求，那么您应该阅读一些有用的文章：
    @@ -840,13 +840,13 @@ addEvent(form, "submit", function () { diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html index 7ee2617b1d..902b901927 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html @@ -86,9 +86,9 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets

    在我们的例子中，缺失的规范是显而易见的，所以我们将着手处理他们，但是对于一些没有人想到去定义正确行为的小部件而言，这的确是一个问题。所以在设计阶段花费时间是值得的，因为如果你定义的行为不够好，或者忘记定义了一个行为，那么在用户开始实际使用时，将会很难去重新定义它们。如果你在定义时有疑问，请征询他人的意见，如果你有预算，请不要犹豫的去进行用户可行性测试，这个过程被称为UX design (User Experience Design用户体验设计）,如果你想要深入的学习相关的内容，请查阅下面这些有用资源：

    @@ -311,7 +311,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
    -

    注意：创建可复用的组件可能是一件需要些技巧的事情。W3C 网络组件草案 是对这类特定问题的答案之一。X-Tag 项目 是对这一规格的实验性实现；我们建议你看看它。

    +

    注意：创建可复用的组件可能是一件需要些技巧的事情。W3C 网络组件草案 是对这类特定问题的答案之一。X-Tag 项目 是对这一规格的实验性实现；我们建议你看看它。

    它为什么不生效？

    @@ -323,7 +323,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
  • 脚本没有加载。这是最常见的情形，特别是在移动端上，在那些网络非常不可靠的地方。
  • 脚本是有问题的。你应该总是考虑这种可能性。
  • 脚本和第三方脚本冲突。这可能会由用户使用的跟踪脚本和一些书签工具引发。
    • -
  • 脚本与一个浏览器的拓展冲突，或者受其影响。 (比如 Firefox 的 NoScript 拓展 或者 Chrome 的 NotScripts 拓展)。
    • +
  • 脚本与一个浏览器的拓展冲突，或者受其影响。 (比如 Firefox 的 NoScript 拓展 或者 Chrome 的 NotScripts 拓展)。
  • 用户在使用老旧的浏览器，而且你需要的一些功能没有被支持。当你使用一些最新的 API 时，这种情况会经常发生。
    • @@ -404,7 +404,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets

    在我们将要构建的代码之中，我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持，但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer）。

    -

    如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

    +

    如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

    我们打算使用的特性如下所示（按照风险程度从高到低排列）：

    @@ -725,7 +725,7 @@ window.addEventListener('load', function () { highlightOption(select, optionList[index]); }; -

    这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

    +

    这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

    @@ -750,9 +750,9 @@ window.addEventListener('load', function () {

    这儿有一些库，在你编写自己的之前应该了解一下：

    diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html index 341d533fc9..970fe99cb7 100644 --- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html @@ -43,7 +43,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form

    {{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。 你可以在<fieldset>开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。

    -

    许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

    +

    许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

    这里有一个小例子:

    diff --git a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html index 914939e028..eb3a7aa1bc 100644 --- a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html @@ -18,12 +18,12 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers @@ -31,15 +31,15 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers

    独立文档

    让事情变得更简单

    -

    由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

    +

    由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

    优雅地降级(Graceful degradation)是web开发者最好的朋友

    @@ -136,7 +136,7 @@ input.button {

    让我们过一遍CSS

    -

    HTML表单和旧式浏览器最大的问题是CSS的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性, 它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化HTML表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。

    +

    HTML表单和旧式浏览器最大的问题是CSS的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性, 它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化HTML表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。

    功能检测和模拟(polyfills)

    @@ -151,13 +151,13 @@ input.button {
  • 如果代码出错，内容和基本功能必须保持可访问和可用状态
    • -

    The principles of unobtrusive JavaScript (最早是由Peter-Paul Koch为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。

    +

    The principles of unobtrusive JavaScript (最早是由Peter-Paul Koch为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。

    Modernizr 库

    -

    有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。

    +

    有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。

    -

    最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

    +

    最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

    下面是一个例子:

    @@ -177,7 +177,7 @@ input.button { } }); -

    Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。

    +

    Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。

    Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.

    diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html index 21d9228dbb..5c1925c943 100644 --- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html @@ -36,7 +36,7 @@ original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data

    客户端/服务器体系结构

    -

    web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

    +

    web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

    A basic schema of the Web client/server architecture

    @@ -158,7 +158,7 @@ say=Hi&to=Mom

    查看HTTP请求

    -

    HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：

    +

    HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：

    1. 按下 F12
      2. @@ -311,7 +311,7 @@ if __name__ == "__main__":

      SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 

      -

      其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

      +

      其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

      HTTP数据头注入和电子邮件注入

      @@ -347,8 +347,8 @@ if __name__ == "__main__":

      {{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

      diff --git a/files/zh-cn/learn/forms/styling_web_forms/index.html b/files/zh-cn/learn/forms/styling_web_forms/index.html index b72fd35d77..6127db2945 100644 --- a/files/zh-cn/learn/forms/styling_web_forms/index.html +++ b/files/zh-cn/learn/forms/styling_web_forms/index.html @@ -366,7 +366,7 @@ button:focus {

      总结

      -

      如你所见，若我们想构建只包含文本域和按钮的表单，用 CSS 美化它们非常容易。如果你想要知道更多能够让你的处理表单组件时更轻松的 CSS 小技巧，看一看 normalize.css 项目的表单部分。

      +

      如你所见，若我们想构建只包含文本域和按钮的表单，用 CSS 美化它们非常容易。如果你想要知道更多能够让你的处理表单组件时更轻松的 CSS 小技巧，看一看 normalize.css 项目的表单部分。

      下一篇文章中，我们将会看到如何处理落入"不好的" 和"丑陋的" 分类的表单组件。

      diff --git a/files/zh-cn/learn/forms/your_first_form/index.html b/files/zh-cn/learn/forms/your_first_form/index.html index ed7c3f1087..89fea0de96 100644 --- a/files/zh-cn/learn/forms/your_first_form/index.html +++ b/files/zh-cn/learn/forms/your_first_form/index.html @@ -36,8 +36,8 @@ original_slug: Learn/HTML/Forms/Your_first_HTML_form

      在开始编写代码之前，最好先退一步，花点时间考虑一下您的表单。设计一个快速的模型将帮助您定义您想要询问用户的正确的数据集。从用户体验(UX)的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注:只要求必要的数据。在构建站点或应用程序时，设计表单是非常重要的一步。这超出了本文的范围，涵盖了表单的用户体验，但是如果您想深入了解这个主题，您应该阅读下面的文章:

      在本文中，我们将构建一个简单的联系人表单。让我们做一个粗略的草图。

      -- cgit v1.2.3-54-g00ecf