表单的基础知识
在HTML中表单是由<form>元素来表示的,而在js中表单对应的就是HTMLFormElement;
HTMLFormElement的属性和方法:
① acceptCharset:服务器能够处理的字符集;
② action:接收请求的URL;
③ elements:表单中所有的控件的集合;
④enctype:请求的编码类型;
⑤length:表单中控件的数量;
⑥method:要发送的HTTP请求类型;(get或post)
⑦ name:表单的名称;
⑧ reset():将所有表单域重置为默认值;
⑨ submit():提交表单;
⑩target:用于发送请求和接收响应的窗口名称;
1)获取页面中所有的表单:
document.forms;
2)取得特定的表单:
var form=document.getElementById("form1"); var firstForm=document.form[0]; //取得页面中的第一个表单 var myForm=document.forms["form2"]; //取得页面中名称为form2的表单
3)提交表单
<!--提交按钮--> <input type="submit" value="submit form"> <!--自定义提交按钮--> <button type="submit">submit form</button> <!--图像按钮--> <input type="image" src="graphic.gif">
以这些方式提交表单时,浏览器会在将请求发送给服务器之前触发submit事件。
var form=document.getElementById("myForm"); //提交表单 form.submit();
这种方式表单无需包含提交按钮,任何时候都可以正常提交表单。不会触发submit事件。在调用此方法前要先验证表单数据。
4)重置表单
<!--通用重置按钮--> <input type="reset" value="reset form"> <!--自定义重置按钮--> <button type="reset">reset form</button> var form =document.getElementById("form"); //重置表单 form.reset();
在重置表单时,所有的表单字段都会恢复到页面刚加载完毕时的初始值。
这三个方式重置表单时会触发reset事件;
5)使用原生DOM方法访问表单元素
①每个表单都有Elements属性,该属性是表单中所有表单元素的集合。elements集合是一个有序列表,其中包含着表单中的所有字段;每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同。
var form =document.getElementById("form"); //取得表单中的第一个字段 var field1=form.elements[0]; //取得名为“textbox”的字段 var field2=form.elements["textbox"]; //取得表单中包含的字段数量 var fieldCount=form.elements.length; <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> var form1=document.getElementById("myform"); var colorfields=form1.elements[color]; colorfields.length; //3
如果表单中多个表单控件都在使用一个name,那么返回以该那么命名的一个NodeList;
6)共有的表单字段属性
所有的表单字段都拥有相同的一组属性;name、type、value;
form:执行当前字段所属表单的指针,只读;
disabled:表示当前字段是否被禁用;
readOnly:表示当前字段是否只读;
tabIndex:表示当前字段的切换序号;
7)共有的表单字段方法
focus():用于将浏览器的焦点设置到表单字段,即激活表单字段。
blur():从元素中移走焦点,调用该方法时,并不会把焦点转移到某个特定的元素上,仅仅是将焦点从元素上面移走而已;
8)共有的表单字段事件
blur:当前字段失去焦点时触发;
change:对于<input><textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发;
focus:当前字段获得焦点时触发;
文本框脚本
在HTML中,有两种方式表现文本框:使用<input>的单行文本框、<textarea>的多行文本框;
<input type="text" size="25" maxlength="50" value="initial value"> <textarea rows="25" cols="5">initial value</textarea>
1.选择文本
1)上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本。
var textbox=document.forms[0].elements["textbox1"]; textbox.select();
在选择文本框中的文本时,就会触发select事件;
2)取得选择的文本
HTML5添加了2个属性:selectionStart和selectionEnd。这两个属性中保存的是基于0的数值,表示是所选择的文本范围(即文本选区开头和结尾的偏移量)
function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); }
3)选择部分文本
setSelectionRange()方法接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的索引;
跨浏览器兼容,选择部分文本的方法:
function selectText(textbox,startIndex,stopIndex){ if(textbox.setSelectionRange){ textbox.setSelectionRange(startIndex,stopIndex); }else if(textbox.createRange){ //创建范围 var range=textbox.createRange(); //折叠范围到开头 range.collapse(true); //选择范围 range.moveStart("character",startIndex); range.moveEnd("character",stopIndex-startIndex); //选择文本 range.select(); } textbox.focus(); } textbox.value="hello world"; //选择所有的文本 selectText(textbox,0,textbox.value.length); //"hello world" //选择前3个字符 selectText(textbox,0,3); //"hel"
选择框脚本
选择框是通过<select>和<option>元素创建的。
除了所有表单字段共享字段共有的属性和方法外,HTMLSelectElement类型还提供下列属性和方法:
① add(newOption,relOption):向控件中插入新的<option>元素,位置在relOption之前;
② multiple:布尔值,表示是否允许多项选择;
③ options:控件中所有<option>元素的HTTPCollection;
④ remove(index):移除给定位置的选项;
⑤ selectedIndex:基于0的选中项索引;如果没选中项则为0;
⑥ type:“select-one”或“select-multiple”;
⑦ value:取值由当前选中项决定;
a. 没有选中项则value为空字符;
b. 选中一项,且value值有设置,则value属性等于选中项的value特性值;
c. 选中一项,但没有设置value,则value属性等于该项的文本;
d.如果选中多个选项,则选择框的value属性将依据前两条规则取得第一个选中项的值;
每一个<option>元素都有一个HTMLOptionElement对象表示。
具有属性如下:
① index:当前选项在option集合中的索引;
② label:当前选项的标签;
③ selected:布尔值,表示当前选项是否被选中;设置为true可以选中当前选项。
④ text:选项的文本;
⑤ value:选项的值;
1)选择选项
① 对于只允许选择一项的选择框,访问选项可以使用selectedIndex;
var selectedOption=selectbox.options[selectbox.selectedIndex];
设置selectedIndex会导致取消以前的所有选项并选择指定的那一项;
② 取得对某一项的引用,然后将其selected属性设置为true;该属性的主要作用就是确定用户选择了选择框中的哪一项。
如果是多选,它的设置不会影响对其他选项的选择,如果是单选,则会取消对其他选项的选择;
selectbox.option[0].selected=true;
2)添加选项
有如下三种方式:
① 使用DOM方法:
var newOption=document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value","option value"); selectbox.appendChild(newOption);
② 使用Option构造函数来创建新选项,new Option(text,value)
var newOption=new Option("Option text","Option value"); selectbox.appendChild(newOption); //在IE8及之前的版本有问题
③ 使用选择框的add()方法
var newOption=new Option("Option text","Option value"); selectbox.add(newOption,undefined); //最佳方案
为第二个参数传入undefined,就可以在所有的浏览器中将新选项插入到列表最后;
3)移除选项
//DOM方法 selectbox.removeChild(selectbox.options[0]); //移除第一项 //使用选择框中的remove()方法 selectbox.remove(0); //将选项设置为null selectbox.options[0]=null;
4)移动选项
例子:将第一个选择框中的第一个选项移动到第二个选择框中的过程;
var selectbox1=document.getElementById("selLocations1"); var selectbox2=document.getElementById("selLocations2"); selectbox2.appendChild(selectbox1.options[0]);
5)重排选项
例子:选择框中的选项向后移动一个位置;
var optionToMove=selectbox.options[1]; selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);