在HTML中，表单由标签构成。在javascript中，是由HTMLFormElement类型构成，这个类型继承自HTMLElement类型。

HTMLFormElement类型具有以下单独的属性和方法：

• acceptCharset: 服务器能够处理的字符集（HTML中的accept-charset）
• action：请求的URL地址（HTML中的action）
• method：请求的http类型，是为POST还是为GET（HTML中的method）
• elements：表单里的所有组件的集合，类型为HTMLCollection
• length：表单里所有组件的数量
• enctype：请求编码的类型（HTML中的enctype）
• name：表单的名称（HTML中表单的name）
• submit()：用编程方式提交表单
• reset()：将表单里所有可填写的组件内容置空
• target：用于发送请求和接收响应的窗口名字（HTML中的target）

document.form属性

可以通过document.form来获取整个页面的form表单，返回一个集合，可以通过数值的索引活着name值来查找特定的表单：

var oneform = document.form[0];

var twoform = document.form[twoform];

elements属性

每个表单都会有一个elements属性，里面包含了表单内所有组件的集合，它是一个有序的列表，里面包含了按顺序的组件索引，可以通过数值索引和name值来访问里面的组件。

var oneform = document.form[0];

var oneinput = oneform.elements[0];

submit()、reset()

可以通过编程方式提交表单，在表单的引用上调用submit()方法可以提交表单，但是不触发submit事件。相对于reset()方法，可以通过调用执行置空，但是它会触发reset事件。

focus()、blur()方法

focus()方法用户将浏览器的焦点设置到当前表单组件，而blur()方法则是将当前表单组件的焦点移开。

表单字段事件

• blur：当组件失去焦点的时候触发事件
• change：值产生变化的时候触发事件
• focus：当组件获得焦点的时候触发事件

select()方法、select选择事件、selectionStart、selectionEnd

在和文本框的引用上调用此方法可以选择文本框的全部内容。

var inp = document.getElementsByTagName("input")[0];

input.addEventListener("focus",function(event){

event.target.select();

},false);select事件，当发生选择文本或者select()方法的时候发生

var inp = document.getElementsByTagName("input")[0];

input.addEventListener("select",function(event){

alert(this.type);

},false); 

selectionStart属性和selectionEnd属性表示在文本框里面选择的文本开始位置和结束位置。

var area123 = document.getElementsByTagName("area")[0];

area123.value.substring(area123.selectionStart,area123.selectionEnd);substring()方法是基于字符串偏移量执行的操作。所以这里直接给这两个值可以获得文本。

剪贴板事件

HTML5把剪贴板事件纳入了规范，纳入规范的几个事件为：

• beforecopy：在发生复制操作前发触发
• copy：在发生复制操作时触发
• beforecut：在发生剪切操作前触发
• cut：在发生剪切时出发
• beforepaste：在发生粘贴操作前触发
• paste：在发生粘贴时触发

Safari、chrome、firefox浏览器在三个操作前发生事件表现在针对文本框的上下文菜单中，而ie则是在触发copy、cut、paste事件前触发其他三个事件。

clipboardData对象

访问剪贴板中的数据可以访问clipboardData对象，此对象在ie中是window的属性，而在Safari、chrome、firefox中是在当前事件对象event的属性。

此对象有三个方法分别为：

• getData()
• setData()
• clearData()

getData()方法在接受一个参数，在ie中接受一个参数（数据格式），有两种数据格式"text","url"，在Safari、chrome、firefox中接受的参数为MIME类型，text类型表示为"text/plain"。

setData()方法接受两个参数，一个是数据格式(ie和Safari、chrome、firefox不一样)，一个是要放在剪贴板的文字。如果成功返回true反之为false。

clearData()方法不需要参数，执行过后清空剪贴板里的内容。

HTML5约束验证API

required属性

在表单组件中添加一个required属性，就可以让支持html5的浏览器让此组件不能为空。

stepDown()

接受一个参数，既在调用的组件上的数值减去传递的数值

document.getElementById("kname").stepDown(5);stepUp()

接受一个参数，既在调用的组件上的数值加上传递的数值

document.getElementById("kname").stepUp(5);pattern属性

pattern属性的值是一个正则表达式，用于匹配文本框中的值。如果只想输入数值，那么可以这样：

checkValidity()方法

checkValidity()方法可以检测整个表单是否的组件值是否有效，有效则返回true反之为false。

还可以在组件本身调用checkValidity()方法，如果组件的内容有效则返回true反之false。

validity属性

validity属性可以想象成是checkvalidity()方法的增强版，它里面提供了很多详细信息，比如说为什么无效。它里面包含了一些属性，每个属性都返回一个布尔值。

• customError：如果设置了setCustomValidity()返回true反之为false
• pattenrnMismatch：如果值与指定的pattern属性不匹配，返回true。
• rangeOverflow：如果值比max值大，返回true
• rangeUnderflow：如果值比min小，返回true
• stepMisMatch：如果min和max之间的步长值不合理，返回true
• tooLong：如果值的长度超过了maxlength属性制定的长度，返回true
• typeMismatch：如果值不是"mail"或"url"要求的格式，返回true
• valid：如果这里的其他属性为false。它就返回true
• valueMissing：如果标注了为required属性的组件中没有值，那么返回true

novalidate属性

此属性可以告诉表单不验证，即使是空的也不会进行验证。