第14章：
在HTML中表达是< form >标签组成的，在JavaScript中，表单对应的则是HTMLFormElement类型，该类型继承的是HTMLElement类型。
提交表单使用submit按钮，使用input / button都可以设置提交按钮，使用特殊的preventDefault()方法可以阻止表单的提交
（这里需要注意，很多时候表单的提交只能使用一次，因为当网速有问题时，用户可能会点击多次，所以在第一次提交后，应该就将提交按钮禁用掉！）
重置表单使用reset按钮，也可以直接调用reset()方法重置
表单字段：
表单中可以直接使用DOM方法访问，因为每个表单都存在自己的elements属性，所以也可以使用该属性对表单内的元素进行访问。该属性是类数组的属性，所以访问时可以直接使用序号，也可以直接使用元素名。
表单字段属性：
1.disabled：布尔值，表示当前字段是否被禁用，尤其是禁用submit的多次提交
2.readOnly：布尔值，表示当前字段是否只读
3.focus()方法：焦点设置
4.autofocus：在HTML标签处设置即可对焦
5.blure()方法：移走焦点
表单事件：
1.blur：失去焦点时触发
2.focus：获得焦点触发
3.change：对于input和textarea，失去焦点且value改变时触发，对于select选项改变时触发
文本框：
1.size设置文本框的显示字数
2.maxlength设置文本框最大接受字符
3.value设置文本框的初始值
4.rows设置文本框的行数
5.cols设置文本框的列数
6.select()方法，选择方法，用于选择文本框中全部的文本
（ 这里input = text的文本框可以指定maxlength，但是textarea不可以 ）
选择文本：
1.select：选择事件
2.selectionStart和selectionEnd事件，选择文本的范围
3.setSelectionRange()方法，两个参数：要选择的第一个字符和最后一个字符之后字符的索引，类substring()方法的两个参数
过滤输入：
EventUtil.addHandler(textbox, “keypress”, function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var chatCode = EventUtil.getChatCode(event);
if(!/\d/.test(String.fromChatCode(charcode)) && charCode>9 && !event.ctrlKey){
EventUtil.preventDefault(event);
}
});
这里第一个过滤的是非数字，第二个过滤非数字，第三个过滤ctrl键
操作剪切板：
1.beforecopy：复制前触发
2.copy：复制时触发
3.beforecut：剪切前触发
4.cut：剪切时触发
5.beforepaste：粘贴前触发
6.paste：粘贴时触发
使用ClipboardData对象：访问剪贴板中的数据，该对象有三个方法：getData()、setData()、clearData()；
HTML5代替JavaScript部分验证功能：
1.必填字段：在标签中指定reguired属性，则改输入框必须填写，否则浏览器弹出阻止框，当js中实现同样的功能时，优先报出js的弹出框
2.输入类型：H5新增输入类型url和email，旧版本将这两种看成text，这里注意真要判断或者截取输入，最好还是在js中写出来
3.数值范围：min最小可能值，max最大可能值；steoUp()方法和stepDown()方法，在当前数值的基础上加一/减一
4.输入模式：H5新增patten属性，匹配输入框中的正则表达式
5.检测有效性：checkValidity()方法可以检测表单中的某个字段是否有效
6.禁用验证：标签中设置novalidate属性，禁止表单验证，这个属性一般用不着
选择框脚本：
通过select和option标签创建的选择框，新增属性和方法对选择框进行操作
1.add(newOption, relOption)：插入新的option
2.options：获取全部的option
3.remove(index)：移除给定索引的项
4.size：可选择的行数
富文本编辑(what you see is what you get)：
使用iframe标签，将其他的页面添加到此页面中，src指定要添加的页面。
使用designMode属性，将页面设置为可编辑的
使用contenteditable属性，将页面中的文本变成可编辑的内容
（个人认为富文本没有什么太大的作用，很多功能都可以被HTML+CSS模仿）
富文本表单上传：将富文本内编辑的内容借助表单传递到服务器，富文本本身不具备传值的功能。
该方法简单的说就是将富文本中的innerHTML提取出来，给到表单中的某个隐藏字段中的value上，由此传递到服务器
var SelectUtil = {
accessOption: function(selectbox) {
selectbox.onclick = function(){
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
return (selectedIndex, selectedOption.text, selectedOption.value);
//该方法不正确，后续再写
}
},
addOption: function(selectbox, optionText, optionValue){
//添加option选项：要添加到哪个select， 要添加选项的text， 要添加选项的value
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode(optionText));
newOption.setAttribute("value", optionValue);
selectbox.appendChild(newOption);
},
delectOption: function(selectbox, key){
//移除option选项：要移除的select， 移除的option索引
selectbox.removeChild(selectbox.options[key]);
},
removeOption: function(selectbox1, selectbox2, key){
//移动option选项：将哪个select， 移给哪个select， 移动第几个key
selectbox2.appendChild(selectbox1.options[key]);
},
insertBeforeOption: function(selectbox, key1, key2){
//排序option选项：选择select， 要变换的option， 变到哪个option的前面去
var optionToMove = selectbox.options[key1];
selectbox.insertBefore(optionToMove, selectbox.options[key2])
},
arraySelect: function(form){
var parts = [],
field = null,
i,
len,
j,
opLen,
option,
optValue;
for(i=0, len=form.elements.length; i<len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j=0, opLen = field.options.length; j<opLen; j++){
option = field.options[j];
if(option.selected){
optValue = "";
if(option.hasAttribute){
optValue = (option.hasAttribute("value")? option.value: option.text);
}else{
optValue = (option.attribute["value"].specified? option.value: option.text);
}
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
}
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
default:
if(field.name.length){
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
}