网页浏览器中的HTML5: HTML5表单

HTML表单的最新规范为程序员提供了对数据输入和验证的更多控制，同时将大部分工作转移到浏览器

这些变化和改进表单标签是一些对HTML5标准的最广泛的修订，提供各种各样的，一旦需要附加库和调整相当数量的选项。所有进入构建自我检查小部件的辛勤工作和确保数据格式正确的库现在正在倒入浏览器本身。该库将不再需要 - 在理论上 - 是因为工作将通过按照标准的所有浏览器都做到无缝连接。在实践中，我们可能会继续使用小库，顺利过轻微的不一致性。

新的HTML规范包括输入类型，它提供了许多新选项，用于请求正确数量的数据——例如，一个表单元素以不同的粒度请求时间，例如月份、星期或分钟。其他新的输入类型坚持用户只输入有效的url或电子邮件地址。将对所有这些输入字段进行测试，以确保其中的文本是有效的，并通过一系列事件跟踪用户在满足数据完整性策略方面的进展。甚至还有一种值无害化算法，它可以检查信息并可能使用AJAX清理信息。

[信息世界:"HTML5在浏览器：帆布，视频，音频和图形“|”浏览器中的HTML5:本地数据存储|”浏览器中的HTML5: HTML5数据通信”。)

浏览器中逐渐出现了对这些选项的遵从性。例如，在写这篇文章的时候，Chrome允许你设定某些日期的最小值和最大值，但你不能安装值消毒功能。当然，最小值和最大值是要创建的最简单的控件。提供更深的鱼钩要难得多。

像这样的洞在整个新的选项洒。火狐，Safari，Opera和Internet Explorer中都慢慢地推出新的造型特征，而且他们几乎最重要的做。可惜的是，不是所有的人都支持新的功能完全相同的方式，所以它仍然是一个有点复杂创建内容使用它们。但随着这些差距接近，新的表单元素将使它更容易为Web开发人员收集信息并强制执行保留用户线数条规则。

要了解您的浏览器是否支持新的输入数据类型和控件，请尝试my实验HTML5表格在wayner.org又是;

HTML5表单:输入元素类型在过去，表单中只有几种类型的输入小部件:单选按钮、复选框和所有可接受文本的框。甚至JavaScript库中的色轮选择器也会简单地将选定颜色的RGB值放置在文本输入框中。如果您想执行任何值检查，则由您来使用JavaScript实现它。随着时间的推移，使用各种库进行数据验证变得相对容易，但这仍然取决于程序员来处理。

新的选择承担了其中的一些杂务。兼容的浏览器现在可以区分各种数据类型，包括日期、电子邮件地址、数字和url。每一种类型都有几个更具体的选项。date字段可以要求一个完整的日期，一年和一周，一年和一个月，或者仅仅是一天的时间。如果你想要非常具体，你可以把日期和时间混合在一起，也可以选择包括或不包括时区。

有些类型的似乎是邀请麻烦。我很高兴我不是负责实施，将验证所有不同种类的世界各地的电话号码的代码。在美国，这是一个麻烦，因为有些人会以奇怪的方式圈点的数字，比如在括号包装的区号。在浏览器的标准冻结这些规则是有问题的，如果电话公司梦想使用数字的新途径。当然，如果那一天到来时，我们总是可以覆盖验证，因为有属性，允许指定的novalidate = true或formnovalidate =真。或者我们可以忘掉额外的功能，翻转输入型变为纯文字，使用JavaScript，我们一直在做它的方式。

HTML5表单:输入元素类型属性在创建这些新表单元素时，选择类型只是乐趣的开始。每种类型可能有也可能没有可以用附加属性指定的附加特性。其中许多属性都很简单。例如，min和max只能用于时间和数字，而不能用于不太可能的项目，如电子邮件地址，尽管它们在技术上是可排序的。

通过我的快速计票，有37个属性和14种不同的类型。的当前版本HTML5输入元素规格包含一个表，该表显示允许哪些属性(例如，限制数字的最大值)和忽略哪些属性(限制电子邮件地址的最大值)。我还是有点困惑为什么只能指定a占位符对于某些类型。这个简短的建议(例如，“您的电子邮件地址”)并不适用于时间或颜色。大多数其他允许或禁止的组合都很容易理解，但我认为大多数人会找到一两个他们希望存在的组合。

新的机制旨在扩大的现状，这意味着在不改变一些旧的模式。对我来说，它可能是有意义允许每个类型的输入与属性被隐藏，但新标准继续接受普通文本进行“隐性”一类的老办法。这是向后兼容的价格。

HTML5表单:客户端表单验证指定类型和属性只是开始，因为验证过程相当透明。虽然表单将为您处理大部分工作，但它也允许使用一些钩子来中断流程或替换流程。

当某些东西看起来不正确时，验证将设置一个可以查询的数据结构。该方法的有效性。例如，如果模式被指定，但是数据不适合它，那么patternMismatch将返回true。

如果要指定自己的验证，您可以添加说明为什么该数据是无法令人接受的自定义消息。您可火了这个程序有oninput或onchange事件。

问题的输入数据也可以触发你可以捕捉自己的事件。数据检查可以通过敲击checkValidity方法掀起。

它非常灵活，其构建方式对每个习惯于附加函数的传统机制(侦听特定事件)的人来说都很熟悉。可能有三到四种不同的方法来检查每个表单字段。

该标准还包括一个很好的提醒:客户端不能被信任来执行这些规则。尽管在本地测试数据可以节省时间和精力，但它并不是一个完美的解决方案，因为旧的浏览器可能不会实现有效性检查。聪明的用户也可能会覆盖一些方法并进行块检查。因此，必须在服务器上重新评估任何严重的数据验证规则。浏览器不可信。

HTML5的形式：可定制选项简单地验证数据是否可接受不再是唯一的选择。HTML5包含了几个属性，可以让你向访问者提供帮助和建议。

最简单的选项，可以打开拼写检查对于任何标记为可编辑的输入元素。这通常适用于像textarea这样的表单元素，但也可能包括文档中标记为内容可修改的任何部分。(可编辑内容将在下面讨论。)属性spellcheck='true'确定何时应用该属性。

我猜拼写检查属性也会切换语法检查器，但它并没有立即显示出来。该规范的部分标题为“拼写和语法检查但是文本只提到了一个叫做拼写检查的属性。如果我在设计规范，我会让它们独立，因为我发现其中一个特性比另一个更精确。

的datalist元素允许添加可以自动完成表单元素的字符串列表。该结构类似于select元素中使用的选项标记。在这一点上，似乎只有Opera支持这个功能，而且一些人认为它通过增加建议的答案使HTML变得更糟糕。我还对每个潜在选项都带有一个显示的标签和一个实际填充表单元素的值的想法感到有些恼火。这似乎是一种向用户隐藏功能的危险方法，可能会欺骗用户，让他们认为表单(标签)中有一个东西，而表单中填充的是另一个东西(值)。

我也通过具有存储在XML文件独立于当前的HTML表单的数据选项外部列表的可能性混为一谈。这不仅简化了HTML也使在不同的页面中的数据可重复使用。这似乎是个好主意，但该规范并没有提到它。我发现只有这个选项二次引用。

HTML5形式:身份验证其中最诱人的选择带来了认证或认证形式的信息，但它仍然是相当不成熟而不能很好地执行。所谓的注册机元素使用公钥加密添加了某种形式的加密，但它仅在Chrome、Firefox和Opera上部分实现可以追溯到网景时代。潜在的力量是巨大的，但我认为这将需要数更多的迭代，以找到一个很好的一套工作的人们所期望的方式特点。

我们的想法是让浏览器提供了一种方法来自动生成公钥和私钥。谁曾试图用许多程序员凯基说这是混淆了一般人，因为它需要的这些细节作为密钥的长度过多的了解。也有关于如何用户可能证书从计算机转移到计算机或恶意软件如何能针对他们更深层次的问题。

今后，该选项可能包括一个更好的方式来自动使用密钥对签署所有数据的形式，而不仅仅是连接到凯基项挑战属性。这当然需要超过数据的所有可能的形式创建签名更标准的机制。标准的哈希函数和消息摘要可能是开始的好地方。这将不得不等待，直到功能更完全形成。

HTML5拖放对于愿意使用自己的库的Web设计人员来说，拖放HTML元素并将其放到其他地方的能力是一个老选项，但它总是陷入一些混乱。1999年，微软在所谓的DHTML中加入了拖放支持之后，开发人员不得不与跨浏览器问题作斗争。多年来出现了许多优秀的跨浏览器脚本，许多站点使用它们，尽管它们似乎让公众感到困惑，因为他们倾向于认为Web页面上的条目在某种程度上是固定的。我经常期望像Netflix这样的公司能够实现拖放来维护列表，但他们似乎从来没有选择过这条路。

在任何情况下，HTML5规范拖放消除了浏览器的许多差异。从理论上讲，只要所有浏览器都以完全相同的方式遵循标准，就没有必要使用跨浏览器脚本。您所需要做的就是添加属性draggable='true'，然后就可以选择和移动元素了。

嗯，这是不是很全。如果你想要做的与拖动的元素的东西，你必须能够处理至少七个不同事件火，因为它到处移动的页面。努力应对所有可能的选择，带动了一些人写的复杂漫长的投诉。（一个 ”灾难“和”远未完成“这两个早期的抱怨。）

还有一些兼容性问题。例如，Safari需要一个单独的CSS条目来打开拖动，即使在添加了draggable='true'属性之后也是如此。所有这些问题都指向这样一个事实，即有人打算编写一个更简单的拖放库，这个库可以抽象出这种复杂性的大部分，并且使它像添加draggable='true'属性一样简单。

HTML5的形式：自计算表单字段一个JavaScript的传统工作已经完成了谁是将数据添加到形式向用户计算。传统的方法是建立一些文本输入元素，让JavaScript的改变等元素每当onchange事件火灾。

新的想法是创建一个新的输出元素，它将与输入元素协同工作。属性指定输出字段的公式。每当表单发生变化时，浏览器通过计算公式负责更新输出字段。我尝试在几个浏览器上使用这个功能，但没有成功。只是使用好的旧的输入字段似乎更容易。

输出还可以使用progress和meter标记以图形方式表示。两者本质上都表示0和1之间的一部分，就像一个充满颜色的温度计一样的矩形——但是有区别。progress元素有一个“不确定”设置，表示软件不知道这个值到底是什么。这通常显示为波浪线。