- 在HTML 中，表单是由<form>元素来表示的，而在JavaScript 中，表单对应的则是HTMLFormElement 类型
- HTMLFormElement类型除了继承了HTMLElement的属性外，还具有一些独有的属性和方法，下面列举几点
- 通过document.forms可以获得页面中的所有表单，可通过数值索引或者name值来获得特定表单
1 var form=document.forms[0];
2 console.log(form.name)//textForm, name是自定义的名字
3 console.log(form.elements[0].nodeName);//input, nodeName是标签名
4 //html中
5 <form name="textForm" value="aaa">
6 <input type="text" name="text_1" >
7 <input type="text" name="text_2">
8 </form>2. form中提交表单的三种方法
<!-- 提交表单 -->
<form>
<input type="image" name="">
<input type="submit" name="">
<button type="submit"></button>
</form>如果需要阻止表单数据的提交，调用defaultPrevent()方法即可。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。
js中也可以通过或form.submit()方法提交表单。
3. 为了防止用户多次提交重复表单，可以第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。
4. 重置表单
- 通过将type设置为reset，用户单击重置按钮重置表单时，会触发reset 事件，在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值
1 <!-- 充值表单 -->
2 <form>
3 <input type="text" name="">
4 <input type="reset" name="">
5 </form>5. 表单的element属性。通过form.element[ ]可以访问form表单内的标签，如<input> <button> <textarea>等
6. 表单的属性
1 <!-- 表单属性 -->
2 <form id="field">
3 <input type="text" name="">
4 <input type="button" name="">
5 <input type="radio" name="">
6 </form>1 //表单属性
2 var form=document.getElementById('field');
3 var field=form.elements[0]//field调用第一个input
4 field.value="another value";
5 console.log(field.form)//form;
6 field.focus()//焦点设置到当前字段
7 field.disabled=true;//禁用当前字段value, form, focus和disabled等属性。
- 为了避免多次提交表单，可以这样设计
1 EventUtil.addHandler(form,"submit",function(){
2 event=EventUtil.getEvent(event);
3 var target=EventUtil.getTarget(event);
4
5 var btn=target.element["submit-button"];
6 btn.disabled=true;
7 })7. 表单字段和方法
- 表单共有focus和blur两种方法
- focus（）方法，比如可以在页面加载完毕，表单内就出现插入符号，等待用户输入。HTML5为表单增加了一个autofocus字段，可以直接设置
1 <input type="text" autofocus>- blur（）方法与focus（）方法相反，将焦点移走。
- change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发change 事件；换句话说，不失去焦点也会触发change 事件。
- 文本框脚本
- <input>和<textarea>两个比较相似，区别在：
- 对于input来说，通过设置size 特性，可以指定文本框中能够显示的字符数。通过value 特性，可以设置文本框的初始值，而maxlength 特性则用于指定文本框可以接受的最大字符数
- 对于textarea来说，可以使用rows和cols 特性设置字符的行数和列数，但是不能设置最大字符数。
- 选择文本
- select()方法，可以将焦点设置到文本框内的同时选择所有的文本。所以可以通过设置这个方法快速的删除、复制文本框内的文本
- select()事件，一旦选择文本便可触发。通过selectionStart和selectionEnd来获取选择到的文本
1 //输出选择到的字符串
2 var textbox=document.getElementById('textbox');
3 console.log(textbox.value);
4 textbox.onselect=function(){
5 console.log(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd))
6 }3. 选择部分文本，调用selectionRange()，传入两个参数，头和尾。
- 过滤输入
- 借助keypress事件，可以获得输入的字符（event.keycode/event.charCode），同时过滤输入的结果（借助preventDefault()）。
- 操作剪贴板（比如你在淘宝买了一个帐号，复制帐号密码到剪贴板的时候，可以用这个功能）
- 使用clipboardData 对象，在IE中是window的属性，在在Firefox 4+、Safari 和Chrome 中，这个对象是相应event 对象的属性
- clipboardData 对象有三种方法，：getData()、setData()和clearData()
- HTML5约束
- 有一些必填的字段，借助required关键字
1 <input type="text" name="username" required>2. 其他的输入类型
1 <input type="email" name ="email">
2 <input type="url" name="homepage">3. 数值范围
1 <input type="number" min="0" max="100" step="5" name="count">4. 输入模式，借助正则限制
1 <input type="text" pattern="\d+" name="count">5. 禁用验证
1 <form method="post" action="signup.php" novalidate>- 选择框脚本
- 选择框是通过<select>和<option>元素创建的，通过text和value可以获取option的文本和值
1 <!-- 选择框 -->
2 <form id='selectForm'>
3 <select id="select_A">
4 <option value="firstChoice">Choice 1</option>
5 <option>Choice 2</option>
6 <option>Choice 3</option>
7 </select>
8 <select id="select_B">
9 <option>Choice 5</option>
10 <option>Choice 6</option>
11 </select>
12 </form>1 //选择框JS
2 var formBox=document.getElementById('selectForm');
3 var firstSelect=formBox.elements[0];
4 console.log(firstSelect.options[0].text);//choice 1
5 console.log(firstSelect.options[0].value);//firstChoice记住层级结构，forms内的元素可以通过elements[ ]来访问，select内的选择项，通过options[ ]来访问。
1 //firstSelect具有一个selectedIndex属性，返回选择项的下标
2 var selectedOption=firstSelect.options[firstSelect.selectedIndex];
3 console.log(selectedOption.text)//choice 12. 通过add方法给下拉菜单添加选项
//动态的添加选项
var newOption=new Option("optionText","optionValue")
firstSelect.add(newOption,undefined);- Option包装成了对象，传入text和value两个参数
- add（）方法，它的存在，专门为select表单来添加选项。
3. 移除选项
1 firstSelect.remove(3);//移除新的选项- 表单序列化
- 浏览器是怎样将数据发送给服务器的？
- 对表单字段的名称和值进行URL 编码，使用和号（&）分隔
- 禁用的表单字段，type为reset和button的， 不发送。
2. 富文本编辑
- 又称所见即所得
1 <div id="richedit" style="height: 100px;width:100px;border: 1px solid black" ></div>1 //添加富文本区域
2 var div=document.getElementById('richedit');
3 div.contentEditable="true";- 添加一些控件
1 <!-- 富文本 -->
2 <div id="richedit" style="height: 100px;width:100px;border: 1px solid black" ></div>
3 <div id="buttons">
4 <button id="btn1" >打开编辑</button>
5 <button id="btn2" >关闭编辑</button><br />
6 <button id='justifycenter'>居中</button>
7 <button id='justifyleft'>左对齐</button><br />
8 <button id="italic">斜体</button>
9 </div>1 EventUtil.addHandler(btn,'click',function(){
2 event=EventUtil.getEvent(event);
3 var target=EventUtil.getTarget(event);
4 switch(target.id){
5 case "btn1":
6 richedit.contentEditable=true;
7 break;
8 case "btn2":
9 richedit.contentEditable=false;
10 break;
11 case "justifycenter":
12 document.execCommand('justifyCenter');
13 break;
14 case "justifyleft":
15 document.execCommand('justifyLeft');
16 break;
17 case "italic":
18 document.execCommand("italic",false,null);
19 }
20 })- 表单提交：因为富文本不是form控件实现的，所以需要将富文本中的innerHTML提交赋给表单，然后再提交给服务器
1 EventUtil.addHandler(form, "submit", function(event){
2 event = EventUtil.getEvent(event);
3 var target = EventUtil.getTarget(event);
4 target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
5 });
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
