表单脚本
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
表单由form元素表示，在JS中，表单对应的HTMLFormElement，它有一些方法和属性：
- action：接受请求的URL；等价于HTML 中的action 特性。
- elements：表单中所有控件的集合（HTMLCollection）。
- enctype：请求的编码类型；等价于HTML 中的enctype 特性。
- length：表单中控件的数量。
- method：要发送的HTTP 请求类型，通常是”get”或”post”；等价于- HTML 的method 特性。
- name：表单的名称；等价于HTML 的name 特性。
- reset()：将所有表单域重置为默认值。
- submit()：提交表单。
- target：用于发送请求和接收响应的窗口名称；等价于HTML 的target 特性。
提交表单
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。
以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。
var form = document.getElementById("myForm");
//提交表单
form.submit();重置表单
在用户单击重置按钮时，表单会被重置。
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
也可以使用下面的方法：
var form = document.getElementById("myForm");
//重置表单
form.reset();表单字段
表单的elements 属性是表单中所有表单元素（字段）的集合。每个表单字段在elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name 特性来访问它们。
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name 命名的一个NodeList。
<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>访问elements[“color”]时，就会返回一个NodeList，其中包含这3 个元素：
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true表单字段属性
- disabled：布尔值，表示当前字段是否被禁用。
- form：指向当前字段所属表单的指针；只读。
- name：当前字段的名称。
- readOnly：布尔值，表示当前字段是否只读。
- tabIndex：表示当前字段的切换（tab）序号。
- type：当前字段的类型，如”checkbox”、”radio”，等等。
- value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
除了form 属性之外，可以通过JavaScript 动态修改其他任何属性：
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value 属性
field.value = "Another value";
//检查form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";为了避免多次重复提交，可以禁用提交按钮：
var form = document.getElementById('myform');
form.onsubmit = function(event){
event = event || window.event;
var target = event.target;
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
}注意，不能通过onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的submit 事件之前触发click 事件，而有的浏览器则相反。
表单字段方法
每个表单字段都有两个方法：focus()和 blur()；
focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
在页面加载完毕后，将焦点转移到表单中的第一个字段:
window.onload = function(){
document.forms[0].elements[0].focus();
}HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript 就能自动把焦点移动到相应字段:
<input type='text' autofocus>blur()方法：将焦点从调用这个方法的元素上面移走。
表单事件
onfocus、onblur、onchange。
对于input和textarea元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发change 事件。对于select元素，只要用户选择了不同的选项，就会触发change 事件：
<input type='text' >
var text = document.getElementsByTagName('input')[0];
text.onchange = function(){
alert(1);
}文本框
读取或设置文本框的值：
<input type='text' />
document.getElementsByTagName('input')[0].value = '文本';选择文本：
<input type='text' />
document.getElementsByTagName('input')[0].select();可以在输入框获得焦点时选择文本，让用户可以一次性删除所有文本：
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |