用CSS3和HTML5验证来创造最新式表单

Chinese (Simplified) (中文（简体）) translation by Emily Yang (you can also view the original English article)

我们来看一下如何做一个可以验证用户数据的功能性表单。那个做好之后，我们会用CSS使它变得好看，其中也包括使用一些CSS3的技巧！

第一步：构想功能

首先我们来构想一下表单长什么样子并且具备什么功能。举个例子，我们来做一个简单的询问下列信息的的联系表单。

名字
电邮地址
网站
信息

我们想要保证用户正确的输入信息。我们会用HTML5的新客户端验证技术来完成这个要求。那么那些不支持HTML5性能的用户怎么办呢？你可以使用服务器端的验证技术，但是我们这篇文章就不包含这个内容了。

第二步：构想表格

让我们通过绘制一个大概模型来了解我们想要的表单样子。

如你所看到的，下列要素组成了我们的表单:

表单题目必须项提示
表单标签
表单输入占位文字
表单域提示
提交按键

现在我们已经有了详细的表单构成元素，我们可以开始创建HTML文本了。

第三步：HTML初步编码

从我们的表单概念中，我们开始最基本的HTML编码.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

到这一步，我们的HTML的文件在浏览器里面还是空白的。这个只是最简单初步的HTML5编码。

第四步：HTML表单

让我们来创建HTML表单（我们暂时对提交方法这一项不做处理，因为这个教程不包括服务器端的验证方法;

<form class="contact_form" action="" method="post" name="contact_form">
</form>

第五步：HTML表单要素

为了让我们的表单内容更整洁有序，我们把表单的要素(label, input, 等)包裹在一个列表中。让我们从创建表单标题和第一个输入要素开始。

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denotes Required Field</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

表单提示

如你在效果图中所见，我们将要给“邮箱地址”和“网页地址”赋予格式化的提示。所以我们会在 input域下面加上必要的提示，并且标注种类，之后再做外观修饰。

<li>
	<label for="email">Email:</label>
	<input type="text" name="email" />
	<span class="form_hint">Proper format "name@something.com"</span>
</li>

余下的`Input`元素

让我们开始创建剩下的表单元素，记得把每一个包裹在一个列表项里。

<li>
	<label for="website">Website:</label>
	<input type="text" name="website" />
	<span class="form_hint">Proper format "https://someaddress.com"</span>
</li>
<li>
	<label for="message">Message:</label>
	<textarea name="message" cols="40" rows="6" >
</li>
<li>
	<button class="submit" type="submit">Submit Form</button>
</li>

第六步：加入占位文本

HTML5其中一项对网络表单的改进（你可能已经很熟悉了）是可以设置占位文本。当输入域空白或是不在对准状态的时候，占位文本就会显示。

让我们给input添加占位属性。这样能帮助用户理解他们应该在里面填写什么。

<input type="text" name="name" placeholder="John Doe" />
<input type="text" name="email" placeholder="john_doe@example.com" />
<input type="text" name="website" placeholder="http://johndoe.com/" required/>

快捷提示：装饰你的`placeholder`占位文本

如果你想装饰你的占位文本，这里是一些浏览器的前缀：

:-moz-placeholder {
	color: blue;
}

::-webkit-input-placeholder {
	color: blue;
}

大部分现代的浏览器（抱歉IE9除外）都支持这项属性。如果你真的希望这个所有浏览器都支持的话，你可以研究下这些javascript的解决方案。

第七步：基础CSS

让我们添加一些基础的CSS。我会一步步对这些规则进行解说：

去掉`:focus`样式

Webkit会对点击状态下的输入域自动添加一些样式。因为我们想要添加我们自己的样式，所以我们想要覆盖默认的样式:

*:focus {outline: none;}

字体样式

我们来对表单元素添加字体样式:

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

列表样式

让我们来添加列表样式使表单看上去更规整:

.contact_form ul {
    width:750px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
}

我们再给表单的首尾两部分添加细边缘线。我们可以用:first-child and :last-child选择符来完成。这些，如同它们的名字暗示的那样，选择出<ul>列表里的第一和最后一个元素。

这个帮助我们的表单有了视觉上的区域分化。这些CSS在旧一点的浏览器里面使不支持的。因为这个不影响主要的功能，所以我们就全当给用新浏览器的用户一些好处。

.contact_form li:first-child, .contact_form li:last-child {
	border-bottom:1px solid #777;
}

表单页眉

让我们来装饰表单页眉部分。这个包括标题标签和提示用户星号(*)表示必填项的提示。

.contact_form h2 {
	margin:0;
	display: inline;
}
.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

表单输入要素

让我们来装饰表单中所有重要的元素，我们用它们来搜集用户信息。

.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

现在，我们来加上更多的CSS视觉效果。其中有一些CSS3的样式是给用新版本浏览器的用户一些好处。

.contact_form input, .contact_form textarea { 
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
	background: #fff; 
	border:1px solid #555; 
	box-shadow: 0 0 3px #aaa; 
}
/* Button Style */
button.submit {
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
	opacity:.85;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

第八步：加入一些CSS3的互动

我们来加点互动效果。我们要通过加入一些内边距，来把当前选择的输入域延长。

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
	padding-right:70px;
}

现在给支持这个的浏览器，我们用CSS3使延长的效果转变顺畅。

.contact_form input, .contact_form textarea { /* add this to the already existing style */
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
}

第九步：HTML5`required`属性

现在到了我们一直期待的： HTML5的表单操控工具。

给输入和文字域加入required属性会让浏览器明白，在提交表单前，这一项是必须填写的。因此，如果required这一项没有填写，表单不可以提交。

所以，我们把required属性添加到我们所有的表格元素中（因为我们想让它们都填完整）。

<input type="text" name="name" required />
<input type="text" name="email" required />
<input type="text" name="website" required />
<textarea name="message" cols="40" rows="6" required ></textarea>

第十步：装饰`required`项

你可能注意到了，视觉上required项没有什么不同。我们要用CSS来装饰必须填写项。举个例子，我们要在每个必填项背景中添加一个红色星号。我们想要首先在输入项右端加一些内边距（这样就会防止在输入文字太多的情况下盖住星号：

.contact_form input, .contact_form textarea {
	padding-right:30px;
}

现在我们来使用CSSpseudo选择器:required来选中所有的必填项。我在photoshop做了一个16x16像素的星号标志，它是我们必填项的一个指示物。

input:required, textarea:required {
	background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}

提交之后会发生什么？

现在，不同的浏览器在对使用HTML5元素的表单提交的时候，所做反应都有所不同，大部分会组织表单的提交然后显示一个“提示”给用户，告之第一项是必须项但是目前没有输入值。“提示项”的样式很不一样。希望这个在未来可以变得标准化。

你可以在quirksmode上查看现在得浏览器对required得支持情况

快捷贴士：

你实际上可以用如下方法装饰提示信息：

::-webkit-validation-bubble-message {
	padding: 1em;
}

第十一步：理解新的HTML5`type`的属性和客户端验证

HTML5的验证通过type属性来起作用。HTML在很长一段时间只是只是一些属性，譬如type="text"，但是HTML5有了一些新的输入种类，包括我们在表单中使用的email 和 url

通过合并type和新的required属性，浏览器可以验证用户表单的日期。如果用户的浏览器不支持新的type属性，譬如说type="email"，它便会简单默认为type="text"。这个的确是很棒的。你实际上有了在所有浏览器里反相兼容的支持！

那么如果浏览器支持新的type属性呢？在桌面浏览器中，不会有太多视觉不同（除非你的CSS有特别规则。type="text"和type="email"看上去是一样的。但是，移动设备伤得浏览器，用户界面上就会有少许不同。

例子：iPhone

苹果手机可以探测出表单的种类然后提供不同的键盘内容。譬如说，邮件地址要求输入下列符号："@" 和 "."。当输入种类为邮件时，iPhone键盘提供这些符号给用户。

第十二步：改变`type`属性

我们已经把表单的输入项设成默认的type="text"。但是现在我们要把它们换成邮件和网站地址。

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com" required/>

第十三步：HTML5验证

如之前提到的，HTML5的验证基于type，而且默认情况下，这一项是开启的。所以不需要特别的设置来激活表单验证。如果你想把这个功能关掉，你可以用novalidate属性来实现：

<form novalidate>
	<-- do not validate this form -->
	<input type="text" />
</form>

名字域

我们来看看第一个询问用户名字的项。如我们之前所描述，我们已经加上了type="text" 和 required属性。这个告诉浏览器这一项是必须的而且应该验证它是否是文字。所以，只要用户输入了至少一个字母，验证就通过。

现在我们要用CSS来装饰浏览器验证到的有效和无效项。如果你记得的话，我们在CSS里用了:required来装饰所有必填项。现在，我们可以用有效或者无效样式来装饰我们的必填项，这个通过在CSS里添加:valid 或者 :invalid来实现。

首先，我们来装饰无效项。举个例子，我们只想在它选中的时候显示无效的效果。我们给它加个红色边框，红色阴影和红色符号。红色符号是用photoshop做出来的。

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
	background: #fff url(images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

现在，让我们来定好有效项的样式准则。我们会加一个绿色边框，绿色阴影和绿色的钩符号。这个会运用到所有有效项上面，不管它们有没有被选中。

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
	background: #fff url(images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}

现在，当你点击表单项，红色的无效样式会显示。当一个字母打进去了之后，它就通过验证并显示出绿色的CSS样式。

邮件和URL项

我们CSS的样式和验证准则已经在邮件项中实现，因为我们之前已经设置了type 和 required的属性。

第十四步：引入HTML5`pattern`属性

以type="email"属性举例说明，大部分浏览器用*@*来验证（任何字母＋"@" ＋任何字母。这个无疑限制度不是很够，但是却防止用户输入完全错误的信息。

在type="url"属性里，大部分的浏览器的最低要求是具有跟着冒号的任何字母。所以如果我们输入"h:"，此项还是会验证通过。这个不是非常有用，但是却防止了用户输入不相关的信息，譬如它们的电子邮箱或是家庭地址。现在，你可以在服务器端更明确的验证你的输入信息；但是我们将要讲的是如何用HTML5来实现。

`pattern`属性

模式属性接受一个javascript表达式。在验证表单项中的值时，这个表达式取代了浏览器的默认设定被使用。所以我们的HTML是像这样的：

<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+" />

我们直接受以"http://" 或者 "https://"开头的值。表达式的模式一开始会让人迷惑，但是一旦掌握了，你的表单会开启新的篇章，

第十五步：表单域提示（CSS）

现在我们来装饰表单域的提示部分，它们在用户输入信息的时候告之什么样的信息样式是合适的。

.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}

我们把它设置为display:none是因为我们只在用户点击到这一项的时候才显示提示。我们也把工具提示设置成红色无效色，因为直到正确的信息输入时，它们都被看作时无效的。

使用`::before`选择器

现在我们想要在提示框中加一个三角形来帮助视觉导航。我们可以使用图像，但是基于我们得情况，我们用CSS就可以了。

因为这个纯粹只是起装饰作用而对整个页面的功能性不起任何作用，我们将用::before pseudo 选择器，添加一个像左指向的小的三角形。我们可以通过使用几何形状的unicode来实现。

通常，我们会使用HTML Unicode模式。但是因为我们要用到::beforeCSS选择器，我们必须使用三角形对应的escaped unicode当使用content:""准则时。然后我们就用ositioning来放到我们想要的位置。

.form_hint::before {
	content: "\25C0"; /* left point triangle in escaped unicode */
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

使用`+`相邻选择器

最后，我们要用CSS相邻选择器来显示和隐藏表单域提示。相邻选择器(x + y)选择的是紧随其后的元素。因为我们的表单提示是紧随我们的输入域的，我们可以使用它来显示和隐藏工具提示。

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

如你在CSS里看到的那样，我们同样根据其值是否有效来使表单提示更改颜色

第十六步：享受你漂亮的HTML5表单

看一看最终的成品吧！

结论

如你所见，新的HTML5表单特点非常整洁！所有东西都反向兼容所以在你的网站里加入这些新的特性不会破坏任何东西。

在帮助用户完成网上表单方面，HTML5验证越来越趋向于替代用户端的验证。但是HTML5不能够代替服务器端的验证。当下，在处理用户提交信息方面，最好使是两者并用。谢谢阅读！