HTML5编程之旅 第4站 Forms
涉及到Web开发的，肯定要涉及到HTML表单，本节将带你走入HTML5表单的世界。
一、HTML5 Forms概述
熟悉HTML表单的开发人士，可以很容易的适应HTML5 Forms的新增功能。
XFomrs是一个以XML为核心、功能强大却略显复杂的标准，其充分利用了XML Schema，制定了针对验证和格式化的精确准则，但在未安装插件的情况下，主浏览器均不支持XForms。
HTML5表单注重对现有HTML表单的改进，目的在于包含更多控件类型，同时着力解决Web开发人员今天面对的实际难题，但要时刻关注表单的跨浏览器实现。
HTML5表单主要关注功能动作和语义，而非外观和显示效果。
HTML5表单控件主要分为两大类：新的输入型控件、新的函数和特性。
HTML5中引入的新的输入型控件类型主要包括：tel(电话号码)、email(电子邮件地址文本框)、url(网页的url)、search(用于搜索引擎，比如在站点顶部显示的搜索框)、range(特定值范围的数值选择器，如滑动条)。使用方式与以前的HTML表单类似，设置其type类型为上述类型即可，如：<input type="email">、<input type="range" min="10" max="30">等。
二、使用HTML5 Fomrs API
1、新表单特性和函数
placeholder：向用户显示描述性说明或提示信息，如：<input name="name" placeholder="请输入姓名" required>。
autocomplete：用来保护敏感用户数据，避免本地浏览器进行存储 ，主要有 on（字段值无需保护）、off（字段值需要保护）、unspecified三种行为。如：<input type="text" name="creditcard" autocomplete="off">
autofocus：指定某个表单元素获得输入焦点
list和datalist：组合使用这两个特性可以为输入型控件构造一张选值列表，使用方法如下：（1）创建id值唯一的datalist元素，可以在文档任意位置插入；（2）添加若干option元素，如：
<datalist id="contactList"> <option value="[email protected]" label="Racer"> <option value="[email protected]" label="Perter"> </datalist>
（3）将input的list特性值设置为datalist的id值
<input type="email" id="contacts" list="contactList">
min和max：主要用于range元素
step：指定输入值递增或递减的粒度。
valueAsNumber函数：完成控件值类型在文本与数值间的相互转换
required：指定表单元素为必填
2、表单验证
valueMissing
目的：确保表单控件中的值已填写
用法：设置控件的required为true
typeMismatch
目的：保证控件值与预期类型相匹配
用法：指定 表单控件的type特性值
patterMismatch
目的：根据控件设置的格式规则验证输入是否为有效格式
用法：指定控件的pattern特性，并赋予适当的匹配规则
tooLong
目的：避免值包含过多字符
用法：设定控件的maxLength特性
rangeUnderFlow
目的：限制数值型控件的最小值
用法：设置控件的min特性，并赋值
rangeOverflow
目的：限制数值型控件的最大值
用法：设置控件的max特性，并赋值
stepMismatch
目的：确保输入值符合min、max及step设置
用法：设置控件的step特性，并赋值
customError
目的：处理代码及计算产生的错误
用法：调用setCustomValidity((message)将控件置于customError状态
注意：还可以通过表单控件来访问ValidityState对象，如var check = documenet.myForm.myInput.validity；然后调用check.valid。
3、验证反馈
在HTML5中，如果开发人员想把错误消息反馈给用户，可以使用invalid事件。
function invalidHandler(evt){
var validity = evt.srcElement.valididy;
if(validity.valueMissing){
//提示用户必填项中没有填值
}
//检测其他约束条件
//如果不希望浏览器提供默认的验证反馈，可以取消事件
evt.preventDefault();
}
//注册 invalid事件的监听器__halt_compiler
myField.addEventListener("invalid",invalidHandler,false)
还可以通过设置noValidate特性来关闭验证。
三、HTML5 Forms示例应用
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Forms例子</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href = "html5.css">
<style type="text/css">
label {
text-align: right;
width: 90px;
float: left;
}
input {
margin-top: 0px;
padding-top: 0px;
}
fieldset {
margin-top: 5px;
}
#confidenceDisplay {
vertical-align: top;
}
</style>
<script>
function setConfidence(newVal) {
document.getElementById("confidenceDisplay").innerHTML = newVal + '%';
}
function invalidHandler(evt) {
// find the label for this form control
var label = evt.srcElement.parentElement.getElementsByTagName("label")[0];
// set the label's text color to red
label.style.color = 'red';
// stop the event from propagating higher
evt.stopPropagation();
// stop the browser's default handling of the validation error
evt.preventDefault();
}
function loadDemo() {
// register an event handler on the form to
// handle all invalid control notifications
document.register.addEventListener("invalid", invalidHandler, true);
}
window.addEventListener("load", loadDemo, false);
</script>
</head>
<body>
<div id="container">
<header>
<h1>HTML5 Forms例子</h1>
<h3 align="center"></h3>
<h2> </h2>
<h4></h4>
</header>
<nav>
<h2>链接</h2>
<a href="#" title="Home">主页</a>
<a href="signup.html" title="Are you crazy enough?">注册</a>
<a href="#" title="Learn more about the T216">关于</a>
</nav>
<section>
<article>
<h2>注册</h2>
<form name="register">
<p><label for="runnername">姓名:</label>
<input id="runnername"name="runnername" type="text"
placeholder="请填写姓名" required></p>
<p><label for="phone">电话:</label>
<input id="phone" name="phone" type="tel"
placeholder="(xxx) xxx-xxx"></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="请正确填写"></p>
<p><label for="dob">日期:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"></p>
<fieldset>
<legend>大小: </legend>
<p><input id="small" type="radio" name="tshirt" value="small">
<label for="small">小</label></p>
<p><input id="medium" type="radio" name="tshirt" value="medium">
<label for="medium">中</label></p>
<p><input id="large" type="radio" name="tshirt" value="large">
<label for="large">大</label></p>
<p><label for="style">样式:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"></p>
<datalist id="stylelist">
<option value="白" label="第一年">
<option value="灰" label="第二至四年">
<option value="深蓝" label="V五年以上">
</datalist>
</fieldset>
<fieldset>
<legend>预期:</legend>
<p>
<label for="confidence">可信度:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0">
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">备注:</label>
<textarea id="notes" name="notes" maxLength="140"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="注册"></p>
</form>
</article>
</section>
<aside>
<h2>发起者</h2>
<p align="center">***俱乐部</p>
<p align="center"><img src="happy-trails-rc.gif" alt="Happy Trails Running Club" width="149" height="207"></p>
</aside>
<footer>
<p>Powered by HTML5</p>
</footer>
</div>
</body>
</html>