利用HTML5新特性美化表单

对表单感兴趣的人并不多，但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松，甚至可能更富有趣味性。

There is even more up to date forms guidance on our new Web Fundamentals site.

浏览器支持

在撰写本文时，所有新的表单和输入元素以及属性和类型的支持情况都会因浏览器的不同而存在很大差异。甚至在支持特定功能的各个浏览器之间，它们的行为也会互不相同。但 HTML5 表单的支持情况变化很快，且仍在不断改进。在撰写本文时，这些图表是我能找到的最新图表，它们详细说明了各个浏览器对 HTML5 表单的支持情况。

新增内容概述

新元素

HTML5 引入了 5 种有关输入和表单的新元素。

新输入类型

HTML5 引入了 13 种新的输入类型。如果在不支持这些输入类型的浏览器中查看，系统就会使用后备的文字输入。

新输入属性

HTML5 还为输入和表单元素引入了几种新属性。

FormData 对象

在对 XMLHttpRequest 的多项改进中，有一项是引入了 FormData 对象。借助 FormData 对象，您可以创建并发送一组密钥/值对，也可以选择使用 XMLHttpRequest 创建并发送文件。使用此技术时，数据的发送格式与您通过表单的带 multipart/form-data 编码类型的 submit() 方法提交的数据相同。

FormData 提供了一种方法，供您使用 JavaScript 即时创建 HTML 表单，然后使用 XMLHttpRequest.send()提交表单。下面是一个简单的示例：

var formData = new FormData();
formData.append("part_num", "123ABC"); 
formData.append("part_price", 7.95);
formData.append("part_image", somefile)

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");  
xhr.send(formData);

您也可以在提交表单前使用 FormData 将其他数据添加到现有表单中。

var formElement = document.getElementById("someFormElement");
var formData = new FormData(formElement);
formData.append("part_description", "The best part ever!");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);

基于浏览器的验证

实话实说吧，验证表单数据是一项十分令人厌烦的任务，但无论如何您都要去做。现在，为了执行客户端表单验证，您可能会编写一些自定义 JavaScript 代码或使用库执行某些操作，例如检查有效输入或在表单提交前确保必填字段均已填写。

与 CSS 伪类选择器配合使用的 required 和 pattern 等新输入属性可让您更轻松地编写检查代码并向用户显示反馈。借助其他一些先进的验证技术，您还可以使用 JavaScript 设置自定义验证规则和讯息，或者确定元素是否无效以及无效原因。

required 属性

在提交表单时，带 required 属性的字段必须包含值。以下必填电子邮件地址输入字段的示例用于确保该字段包含一个值，且这个值是有效的电子邮件地址（具体定义请点击此处）。

<input type="email" id="email_addr" name="email_addr" required />

pattern 属性

您可以通过 pattern 属性指定用于验证输入字段的正则表达式。此示例表示一个部件号的必填文本输入字段。在此示例中，我们假设部件号由三个大写字母和紧随其后的四个数字组成。使用 required 和 pattern 可确保该字段包含一个值，且这个值符合部件号的正确格式。如果用户将鼠标悬停在该字段上，系统就会显示 title 属性中的讯息。

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

在此示例的基础上，如果输入的部件号无效，您也可以将输入字段的边框描成红色。要在值无效的情况下在输入字段周围显示红色边框，请添加以下 CSS。

:invalid {
  border: 2px solid #ff0000;
}

formnovalidate 属性

formnovalidate 属性适用于 input 或 button 元素。使用该属性可停用表单提交验证。在以下示例中，通过“提交”按钮提交表单需要有效输入，但通过“保存”按钮提交则不需要。

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">

constraint validation API

constraint validation API 为您提供了处理自定义验证的强大工具。您可以通过该 API 执行设置自定义错误、检查元素是否有效以及确定元素无效原因等操作。在以下示例中，如果两个字段中的值不一致，系统就会显示自定义错误。

<label>Email:label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
    function check(input) {
      if (input.value != document.getElementById(\'email_addr\').value) {
        input.setCustomValidity(\'The two email addresses must match.\');
      } else {
        // input is valid -- reset the error message
        input.setCustomValidity(\'\');
      }
    }
script>

综合使用

以下预订请求表单示例综合使用了各种输入类型、表单验证以及 CSS 选择器和样式。

表单的 HTML 和 JavaScript 如下：

<form oninput="total.value = (nights.valueAsNumber * 99)   
 ((guests.valueAsNumber - 1) * 10)">

  <label>Full name:label>
  <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

  <label>Email address:label>
  <input type="email" id="email_addr" name="email_addr" required>

  <label>Repeat email address:label>
  <input type="email" id="email_addr_repeat" name="email_addr_repeat" required 
   oninput="check(this)">

  <label>Arrival date:label>
  <input type="date" id="arrival_dt" name="arrival_dt" required>

  <label>Number of nights (rooms are $99.00 per night):label>
  <input type="number" id="nights" name="nights" value="1" min="1" max="30" required>

  <label>Number of guests (each additional guest adds $10.00 per night):label>
  <input type="number" id="guests" name="guests" value="1" min="1" max="4" required>

  <label>Estimated total:label>
  $<output id="total" name="total">99output>.00
  <br><br>

  <label>Promo code:label>
  <input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" 
   title="Promo codes consist of 6 alphanumeric characters.">

  <input type="submit" value="Request Reservation" /> 
form>

<script>
function check(input) {
  if (input.value != document.getElementById(\'email_addr\').value) {
    input.setCustomValidity(\'The two email addresses must match.\');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity(\'\');
  }
}
script>

表单代码所带的 CSS 如下：

:invalid { 
  border-color: #e88;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);
}

:required {
  border-color: #88a;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}

form {
  width:300px;
  margin: 20px auto;
}

input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border:1px solid #ccc;
  font-size:20px;
  width:300px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;

  -webkit-border-radius:5px;
  border-radius:5px;
}

input[type=submit] {
  background:none;
  padding:10px;
}

参考资料

• W3C 规范
• HTML5 表单的当前情况