标签：
在HTML中表单是有<form>元素表示，在JS中表单对应的是HTMLFormElement类型。
表单自有的属性和方法：
获取表单
1. 通过ID document.getElementById
2. 通过 document.forms 获取表单集合 在通过索引值或者name值获取具体表单元素
提交表单
使用input 或者 button 可以定义提交按钮，将其type设置为 submit。
<input type="submit" value="提交" /> <button type="button">提交</button> <input type="image" src="button.png" />
当表单中有提交按钮，在表单控件拥有焦点时，按下Enter键就可以提交表单（textarea例外）。并且在提交表单时会触发submit事件。
var form = document.getElementById(‘myForm‘); form.addEventListener(‘submit‘, function(e){ // 阻止提交 e.preventDefault(); }); // 提交表示 form.submit();
重置表单
点击表单重置按钮时，表单会重置。设置input或者button的type为reset。
<input type="reset" value="重置" /> <button type="reset">重置</button>
重置表单会触发reset事件。
var form = document.getElementById(‘myForm‘); form.addEventListener(‘reset‘, function(e){ // 取消重置 e.preventDefault(); }); // 重置表单 form.reset();
表单字段
每个表单都有elements属性，这个属性是表单中所有元素的集合。这个集合是个有序的列表，其中包含表单中所有的字段。可以通过每个字段在集合中的位置和name访问。
// 获取表单 var form = document.getElementById(‘myForm‘); // 获取表单的第一个字段 var frist = form.elements[0]; // 获取名为username的字段 var username = form.elements[‘username‘];
表单元素拥有一些共有的属性：
表单元素共有的方法： 
window.onload = function(){ // 第一个表单中的第一个元素获取焦点 document.forms[0].elements[0].focus(); };
注：如果第一个表单元素是一个input元素并且type值为hidden， 或使用css的display和visibility隐藏了改元素，focus会导致错误。
文本框
单行文本框：input元素
多行文本框： textarea元素
<!-- 文本框能够显示25个字符 输入不超过50个字符 --> <input type="text" size="25" maxlength="50" value="" />
<!-- 文本框显示 10行 30列(字符数列) --> <textarea rows="10" cols="30"></textarea>
选择文本
<input type="text" value="呵呵，这是一个表情。">
window.onload = function() { var input = document.forms[0].elements[0]; input.select(); input.addEventListener(‘select‘, function() { // 选择了什么文本 - HTML5 API console.log( input.value.substring(input.selectionStart, input.selectionEnd) ) }); };
function selectText(textbox, startIndex, stopIndex){ if (textbox.setSelectionRange){ textbox.setSelectionRange(startIndex, stopIndex); } else if (textbox.createTextRange){ var range = textbox.createTextRange(); range.collapse(true); range.moveStart("character", startIndex); range.moveEnd("character", stopIndex - startIndex); range.select(); } textbox.focus(); }
。。。
标签：
原文地址：http://www.cnblogs.com/eyeear/p/5613061.html
