Firefox 4 将提供更好的 HTML5 表单支持。在最新的 Beta 版本中，我们正在试验一系列新功能：更多输入类型（电子邮件、网址、电话、搜索）、新属性（占位符、自动聚焦、列表）、解耦表单和不同的验证机制。这主要得益于 Mounir Lamouri 的辛勤工作。

一些示例在其他浏览器中也能工作，但要查看所有示例，您需要使用 Firefox 4 Beta 版本。

新的输入字段类型

与新的 HTML5 元素一样，我们也有新的字段类型来更好地表达我们想要的输入类型。许多这些元素的外观和感觉与文本字段相同，但它们具有不同的语义含义。这意味着浏览器可以为用户优化体验。例如，移动浏览器可以为字段提供特定的键盘。或者浏览器可以根据通讯录中的人员预填充电话号码字段。扩展程序甚至可以根据这些类型提供一些功能。

在此 Beta 版本中，Firefox 提供了四种新的输入类型

在这四种新的输入类型中，url 和 email 还会验证其内容。我们稍后会讨论这一点。

我们还支持一种新的字段类型

您可以使用此元素来表示页面中对表单交互做出反应的区域。例如，在您更改商品数量或送货选项后购物车中的总价。它不会计算任何内容，您需要使用 JavaScript 来完成，但它会为辅助技术提供提示。for 属性是参与计算的字段 ID 列表。

文本字段已通过 <datalist> 支持进行了改进。当用户输入时，您可以轻松地为字段提供建议列表。您可以使用 list 属性绑定字段和数据列表。它将使用 datalist 内的每个 option 元素来填充列表。对于不支持 datalist 的浏览器，它们将显示 datalist 元素的内容。因此，请确保提供一些有效的标记以获得良好的回退。

输入城市

Enter a city: 

新的输入属性

自动聚焦

将此属性添加到字段时，它将尽快获得焦点。对用户的直接优势在于，所有网站都将具有相同的自动聚焦算法，而不是依赖于不同的 JavaScript 代码。如果用户对此不感兴趣，浏览器或扩展程序可以禁用此行为。

占位符

此属性的值将在表单为空且未聚焦时显示在表单内。您可以放置预期值的示例。

Telephone: 
Comments: 

解耦表单

您有更多选项来定义字段和表单之间的交互。

form 属性

<input> 元素不再需要是 <form> 元素的子元素了。您可以将它们放置在任何您想要的位置，并使用新的 form 属性将它们绑定到表单。它接受应绑定到的表单的 ID。

这是一个示例。假设您正在为某些博客软件开发搜索引擎。您希望为一般用例提供一个非常简单的表单，如果用户需要更多控制，则提供一些高级选项。

您可以在页面顶部放置

并在底部放置

  

    
Advanced options
    Private posts
    
  

这将表现得好像搜索字段是表单的一部分一样。并且您可以自由地将其放置在 HTML 中的任何位置。

字段上的表单选项

可以在字段级别覆盖可以在表单级别定义的所有选项。所有提交字段（<button> 和 input type=”submit”）都接受四个新属性：formenctype、formaction、formmethod 和 formtarget。

一个用例可能是包含预览和发布按钮的表单。每个按钮都需要表单的所有字段，但它们执行不同的操作。

Title: 
Content: 

当用户单击“预览”按钮时，其属性将覆盖表单的属性。在这种情况下，整个表单将使用 GET 方法发送到 preview.php 脚本，而不是发送 POST 请求到 new_post.php。

验证机制

表单改进的一个重要领域是验证。为了提供最佳体验，我们需要尽快向用户提供反馈。因此，人们编写了许多 JavaScript 代码来执行此操作。如果浏览器处理这些操作，岂不是更好吗？

required

通过添加此属性，您将标记此字段为必填。对于文本字段，这意味着它不应留空。对于复选框按钮，这意味着它应被选中。对于单选按钮，这意味着应选择组中的一个按钮。

尝试以下每个示例，您会看到它们在您与它们交互时会更改颜色。

url

URL 字段会自动验证。

email

电子邮件也会自动验证。通过传递 multiple 属性（在 type=”file” 上也有效），您还可以验证以逗号分隔的邮件列表。

pattern

您需要验证的不仅仅是 URL 和电子邮件类型的数据。因此，pattern 属性将允许您提供 JavaScript 正则表达式。这将与字段的值进行匹配以确定它是否有效。您还应该提供一个 title 属性来向用户解释模式。

在下面的示例中，尝试将鼠标悬停在文本字段上。您应该会看到一个弹出窗口，告诉您如何填写表单。

约束验证 API

如果您需要对验证进行更多控制，可以使用 setCustomValidity 方法。如果为此方法提供空字符串，则该元素将被视为有效。否则，它将被标记为无效，并且该字符串将用作工具提示以帮助您的用户理解问题。

Password: 
Confirm password: 

密码
确认密码

如果表单的一个字段无效，则提交表单将被阻止，并且第一个无效字段将获得焦点，并显示一条消息来解释问题。如果要覆盖此行为并无论如何都发送表单，可以在表单上添加 novalidate 属性或在相应的提交按钮上添加 formnovalidate 属性。

如果您想了解有关验证机制的更多详细信息，请查看 Mounir 的博文。

新的 CSS 选择器

为了配合所有这些优点，还有一些新的 CSS 选择器。

:required、:optional

默认情况下，所有字段都标记为 :optional。如果它们具有 required 属性，则它们将改为匹配 :required 伪类。

:valid、:invalid

这些伪类表示字段相对于验证的状态。您可以使用 :invalid 来覆盖 Firefox 4 提供的默认样式。

这是一个文本框的示例，其中已覆盖默认样式。

:-moz-placeholder

此伪类以显示占位符的输入字段为目标。这还不是 CSS 的一部分，因此您需要为基于 WebKit 的浏览器使用伪元素。

结论

HTML5 中的表单功能非常新，并且浏览器之间仍然存在很大差异。Opera 实现了一些规范（当时称为 Webforms2），因此它对 HTML5 表单提供了相当不错的支持，以及自该实现以来规范演变以来的一些怪癖。基于 WebKit 的浏览器目前正在实现规范的某些部分，因此您也会在那里发现一些早期支持。

我们不会在 Firefox 4 中添加更多表单功能，并且要获得对 HTML5 表单的完全支持，显然还需要做一些工作。新的字段类型（数字、颜色、日期）、新的属性（step、min、max）、新的事件（onforminput、onformchange）等等。我们将在以后的版本中添加对更多 HTML5 表单的支持。

这只是一个粗略的介绍。要获取所有详细信息，您应该访问 Mozilla 开发者网络上的文档。