实验3 html5表单,用HTML5+css3制作HTML5验证的网页表单

今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。

文章简介：今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。

第十四步：介绍HTML5的pattern属性

用type="email"属性来举例说明，在大部分浏览器中验证的字段为@(任意字符 + “@” 符号 + 任意字符)。这显示是有限的，靠它阻止用户输入空格或信息是不能完美解决的。另一个type="url"属性，在大多数浏览器中的验证字段的最低限度为“任意字符加一个冒号”。假如，你输入的是“H：”，然后进行验证，这将会通过验证，但很明显这不是一个网址，所以我们希望可以更加详细具体的验证用户所输入的信息，那我们应该在HTML5中怎么解决使用服务器验证来实现上述说到的问题呢？

pattern属性

这个pattern属性可以接受一个JavaScript的正则表达式，我们可以通过一个正则表达式来验证字段，最后看看我们的HTML代码：

现在我们的“网站”字段将只会接受http://或者https://开头的字符了。这个正则表达式模式有时候的确让人难以捉摸，但如果你有时间去学习它，那么你们将会开阔另一片天地。

第十五步：表单字段的提示语的样式

现在我们来定义下表单提示语，他们会在用户使用表单时根据表单验证规则的正确与否按照特定的提示语显示出来，最终指引用户正确提交表单。

.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来编写显示，因为这个三角形在页面中不是一个很重要的功能，只是一个视觉形式。我们可以使用unicode几何图像，再结合::before选择符来实现最终效果。

在通常情况下，我们在网页中会使用unicode格式编码来显示特殊图形(如上图所示)。因为我们要使用css::before选择符，所以在content:""规则里面，我们必须要使用三角形所对应的unicode转义编码。然后我们通过定位，将它显示在我们希望显示的地方。

.form_hint::before {

content: "\25C0"; /* left point triangle in escaped unicode */

color:#d45252;

position: absolute;

top:1px;

left:-6px;

}

使用相邻选择符

最后，我们使用相邻选择符来显示或者隐藏表单的提示语。相邻选择符(x + y)选择的是紧贴在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的验证仍然更换不了服务器端验证。就目前为止，这是最好的处理方法，非常感谢你的阅读。http://www.alixixi.com，我们致力于提供丰富的web开发教程及资源。