HTML表单是通过<form/>元素来定义的,它有以下特性
◦ method –表示浏览器发挞GET请求或是发送POST请求
◦ action – 表示表单所要提交到的地址URL
◦ enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data.
◦ accept – 当上传文件时，列出服务器能正确处理的mime类型
◦ accept-charset – 当提交数据时，列出服务器所能接受的字符编码
表单可以包含任意数目的输入元素
u <input/> --主要的HTML输入元素。通过type特性来判断是哪种输入控件
• text
• radio
• checkbox
• file
• password 密码框
• button 按钮
• submit 提交按钮
• Reset 重置
• Hidden 隐藏域
• image
• <select/> -- 组合框与下拉列表框,里面的值由<option/>元素定义.
• <textarea/> --多行文本框，尺寸由rows和cols来定义
• 二、对form元素进行脚本编程
• 1、如何获取form表单
• var oForm = document.getElementById(“form1”)
• var oForm = document.forms[0]
• var oForm = document.forms[“form1”]
• 2、访问表单字段(利用name属性)
• var oField = oForm.elements[0];
• var oField = oForm.elements[“txtUser”]//通过id访问
• var oField = oForm.txtUser
• var oField = oForm[“txtUser”]
• 注：也可直接用document.getElementById(“txtUserID”);
表单字段的共性
所有表单字段（除hidden字段）,都包含同样的属性方法和事件
u disabled特性:用于获取或设置表单控件是否被禁用
u blur()方法，可以使表单字段失去焦点（将焦点移到他处）
u focus()方法，可以使表单获得焦点
例:
Var oFiled1 = oForm.elements[0];
Var oFiled2 = oForm.elements[1];
oField1.disabled = true; //禁用
oField2.focus();//获取焦点
alert(oField1.form == oForm); //output “true”
应用1:聚焦于第一个字段
注意：让form的第一个元素获取焦点的代码：
document.forms[0].elements[0].focus()
但此时，如果第一个字段是隐藏字段，则会出错
故代码应如下所示：
if (document.forms.length>0)
{
for(var i=0;i<document.forms[0].elements.length;i++)
{
var oField = document.forms[0].elements[i];
if (oField.type!="hidden")
{
oField.focus();
return;}
}
}
应用2:提交表单
<input type = “submit” value=“提交”/>
<input type=“image” src=“submit.gif”/>
当用户点击一个按钮，无需其他编码，就可以提交表单，如果按回车，默认也认为是提交表单
可以在action中加入警告来检测表单是否提交
<form method=“post” action=“javascript:alert(‘submitted’)”/>
利用submit()方法来提交表单,如：
var oForm = document.Forms[0];
oForm.submit();
也可用按钮结合上述代码实现提交表单
<input type="button" value="提交" onclick="go()" />
} function go()
} {
} if (confirm("你确实要提交吗？"))
} {
} document.forms[0].submit();
} }
} }
以上代码无论是否点击确定都会提交
正确代码：
<form action="http://yahoo.com.cn" name="form1" onsubmit="return go()">
function go()
{
if (confirm("你确实要提交吗？"))
{return true;
}else
return false;}
} 应用3：重置表单
<input type=“reset” value=“重置”/> onreset事件，表单元素恢复到页面加载的状态
类似于提交按钮，reset也会触发form的onreset事件，可以在此处取消表单的重置.
同时，表单也有reset()方法，可以直接从脚本中重置表单，而无需使用重置按钮
<form action="http://yahoo.com.cn" name="form1" onreset = "return resetform()">
} function resetform()
} {
} if (confirm("你确实要重置表单吗？"))
} {
} return true;
} }else
} return false;
} }
表单的onsubmit事件：表单提交前会触发表单此事件,可以在此处进行表单的验证，并取消表单提交
<form action="http://yahoo.com.cn" name="form1" onsubmit=“return go()">
} function go()
} {
} if (confirm("你确实要提交吗？"))
} {
} document.forms[0].submit();
} }else
} return false;
} }
应用4:仅提交一次
<input type=“button” value=“submit”
onclick=“this.disabled=true;this.form.submit()”/>
或
<form action=“xxx.aspx" name="form1" onsubmit="return go()"
<input type="submit" name="mysubmit" value="提交" />
} function go()
} {
} if (confirm("你确实要提交吗？"))
} {
} document.forms[0].mysubmit.disabled = true;
} return true;
} }else
} return false;
} }
三、文本框(text与textarea)
size:允许显示的字符数
maxlength:最多容纳的字符数
如：
<input type=“text” size=20;maxlength=“50”/ value=“mytest”>
<textarea rows=“25” cols=“5”>mytest</textarea>//指定textarea的行数和列数
textarea指定最大字符数无效
获取和更改文本框的值
<input type=“text” id=“mytxt” size=20;maxlength=“50”/ value=“mytest”>
使用document.getElementById(“mytxt”).value来获取或更改文本框的值,如：
var objtxt = document.getElementById(“mytxt”);
If (objtxt)
{
objtxt.value=“aaa”;
}
使文本获得焦点 objtxt.focus(); 选择文本 objtxt.select();
} 文本框事件
focus事件：文本框得到焦点时发生
blur事件:文本框失去焦点时发生
change事件 ：更改内容后失去焦点时发生（如通过value对其修改则不会触发）
select事件:当一个或多个字符选中时发生，无论是否通过select()方法。
应用1--自动选择文本
<input type=“text” onfocus=“this.select()”/>
文本框获取焦点后自动选中文本
但如果所有文本都想这样？可通过如下js实现
<BODY onload="setTextFocuse()">
function setTextFocuse(){
var oInput = document.getElementsByTagName("input");
var oTextArea = document.getElementsByTagName("textarea");
for(var i=0;i<oInput.length;i++) {
if (oInput[i].type=="text" || oInput[i].type=="password"){
oInput[i].onfocus = function(){this.select();}}}
for(var i=0;i<oTextArea.length;i++) {
if (oTextArea[i].type=="text" || oTextArea[i].type=="password"){
oTextArea[i].onfocus = function(){this.select();}
}
}
}
应用2 – 自动切换到下一个
应用说明：当某个文本框只允许接受指定数量的字符串时，如果能直接切换到下一个字段，岂不很好，当输入社会安全码、身份证号或是产品ID数字时，常会用到这个功能
function AttachKeyUp(){
var oInputs = document.getElementsByTagName("input");
for(var i=0;i<oInputs.length;i++) {
if (oInputs[i].type!=="hidden" && oInputs[i].getAttribute("maxlength")!=2147483647) {
oInputs[i].onkeyup=function(){tabForward(this);};
// tabForward(this)焦点自动跳到下一个可用文本框
}
}
}
function tabForward(oTextBox) {
var oForm = oTextBox.form;//获取表单元素
if (oForm.elements[oForm.elements.length-1]!=oTextBox
//当前表单最后元素是不是当前元素
&& oTextBox.value.length == oTextBox.getAttribute("maxlength")){
//当前文本框的字数是不是文本框的最大输入字数
for(var i=0;i<oForm.elements.length;i++){
if (oForm.elements[i]==oTextBox){
for(var j=i+1;j<oForm.elements.length;j++){
oForm.elements[j].focus();//下一个文本框获得焦点
return; }} } } }
=========敲回车进入下一文本框
function AttachKeyDown() {
var oInputs = document.getElementsByTagName("input");
for(var i=0;i<oInputs.length;i++) {
if (oInputs[i].type!=="hidden") {
oInputs[i].onkeydown=function(){
var event = window.event;
if (event.keyCode==13) //按下键的aciLL值
{enterForward(this); } }; } }}
应用3 -- 限制textarea的字符数
虽然<input/>元素可以很容易地限制允许的字符数量，但<textarea/>元素却不能，它没有maxlength属性，解决方法是用javascript来模仿maxlength属性.如：
<textarea id="txt1" cols="10" rows="20" maxlength="10" onkeypress="return isNotMax(this)" ></textarea>
function isNotMax(oTextArea)
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
}
onkeypress 事件会在键盘按键被按下并释放一个键时发生。 Textbox写入数值的时候一直触发这个事件
应用4 – 允许/阻止文本框中的字符
1、阻止无效的字符
<input type=“text” invalidchars=“0123456789” onkeypress="return blockChars(this)"/>
function blockChars(oTextBox) { // invalidchars不可用的字符
var oEvent = window.event;//得到对象
var sInvalidChars = oTextBox.getAttribute("invalidChars");
var sChar = String.fromCharCode(oEvent.keyCode);//将键盘获取到的Unicode 转换成字母或数字
var bIsValidChar = sInvalidChars.indexOf(sChar)==-1;
return bIsValidChar;//return true说明能输入进去，如果return false 说明输入不进去
}
2、允许有效的字符
<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" />
function allowChars(oTextBox){
var oEvent = window.event; // acceptChars允许输入字符
var sallowChars = oTextBox.getAttribute("acceptChars");
var sChar = String.fromCharCode(oEvent.keyCode);
var bIsValidChar = sallowChars.indexOf(sChar)>=0;
return bIsValidChar;
}
3、禁止粘贴(禁止右键菜单)
<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" onpaste="return false" oncontextmenu="return false"/>
// oncontextmenu="return false" 禁止右键菜单
// onpaste="return false"禁止粘贴
改造上述方法：
<input type="text" id="txtUser" acceptChars="0123456789" onkeydown="return allowChars(this,true)"/>
function allowChars(oTextBox,bBlockPaste){
var oEvent = window.event;
var sallowChars = oTextBox.getAttribute("acceptChars");
var sChar = String.fromCharCode(oEvent.keyCode);
var bIsValidChar = sallowChars.indexOf(sChar)==-1;
if (bBlockPaste) {//如果允许他粘贴
oTextBox.oncontextmenu =function(){ return false};//允许右键菜单
if (oEvent.ctrlKey && sChar=="V") {//检测是不是ctrl+v
return false; } }
return bIsValidChar ; }
应用5:使用上下按键操作数字文本
<input type="text" name="txtNumeric" value="0" Max="10" Min="0" onkeydown="numericScroll(this)" />
function numericScroll(oTextBox){
oEvent = window.event;//得到事件对象
var iValue = oTextBox.value.length ==0?0:parseInt(oTextBox.value);
var iMax = oTextBox.getAttribute("Max");
var iMin = oTextBox.getAttribute("Min");
if (oEvent.keyCode==38) {//向上箭头
if (iMax==null || iValue<parseInt(iMax)) {
oTextBox.value = iValue+1; }
}else if (oEvent.keyCode == 40) //向下箭头
{if (iMax==null || iValue>parseInt(iMin)) {
oTextBox.value = iValue-1; } }}
列表框与组合框
<select name=“selAge” id=“selAge”>//相当于combox
<option value=“1”>18-21</option>
<option value=“2”>22-25</option>
<option value=“3”>26-29</option>
<option value=“4”>over 35</option>
</select>
组合框
<select name=“selAge” id=“selAge” size=“3”> //相当于listbox
<option value=“1”>18-21</option>
<option value=“2”>22-25</option>
<option value=“3”>26-29</option>
<option value=“4”>over 35</option>
</select>
1、访问选项
var oListbox = document.getElementById(“selAge”);
alert(oListbox.options[1].firstChild.nodeValue);
或
alert(oListbox.options[1].getAttribute(“value”);
alert(oListbox.options[1].text)
alert(oListbox.options[1].value);
alert(oListbox.options[1].index); //获取索引
alert(oListbox.options.length); //获取选项个数
2、获取设置选中项
alert(oListbox.selectedIndex); //获取选中项索引
alert(oListbox.options[oListbox.selectedIndex].text); //获取选项中项文本
oListbox.selectedIndex=-1; //设置未选中
3、设置列表项多选项
} <select name="selAge" id="selAge" size="4" multiple="multiple">
// multiple="multiple"实现多选
} <option value="1" selected>18-21</option>
} <option value="2">22-25</option>
} <option value="3" selected>26-29</option>
} <option value="4">over 35</option>
} </select>
//得到多选
function getSelectedIndexs (oListBox){
var arrIndexs = new Array();
for(var i=0;i<oListBox.options.length;i++){
if (oListBox.options[i].selected) {
arrIndexs.push(i);//把索引放入数组} }
return arrIndexs;
}
4、给下拉列表框添加选项
function add(oListBox,sName,sValue)
{
var oPtion = document.createElement("option");//创建一个节点
oPtion.appendChild(document.createTextNode(sName));
//创建一个文本节点添加到option
if (arguments.length == 3)//如果有第三个选项
{
oPtion.setAttribute("value",sValue);
}
oListBox.appendChild(oPtion);
}
<input type="button" value="getValue" onclick="add(document.getElementById('selAge'),'newText','5')"/>
5、删除选项
function Del(index){
var oListBox = document.getElementById("selAge");
oListBox.options[index]=null;
// oListBox.remove(index);}
<input type="button" value="delete" onclick="Del(1)"/>
清空所有选项
function Clear(oListBox){
for(var i=oListBox.options.length-1;i>=0;i--) {
oListBox.remove(i); }} //一定要从后往前删除
6、移动选项
function move(oListFrom,oListTo,index){ //要移动的组合框，要移动到的组合框，要移动项
var oOption = oListFrom.options[index];
if (oOption){
oListTo.appendChild(oOption);}}
| function add(oListBox,sName,sValue) | |
| { | |
| var oPtion = document.createElement("option"); | |
| oPtion.appendChild(document.createTextNode(sName)); | |
| if (arguments.length == 3) | |
| { | |
| oPtion.setAttribute("value",sValue); | |
| } | |
| oListBox.appendChild(oPtion); | |
| } | |
| function Del(index) | |
| { | |
| var oListBox = document.getElementById("selAge"); | |
| //oListBox.options[index]=null; | |
| oListBox.remove(index); | |
| } | |
| function move(oListFrom,oListTo,index) | |
| { | |
| var oOption = oListFrom.options[index]; | |
| if (oOption) | |
| { | |
| oListTo.appendChild(oOption); | |
| } | |
| } | |
| function goRight() | |
| { | |
| var oListFrom = document.getElementById("fromList"); | |
| var oListTo = document.getElementById("toList"); | |
| move(oListFrom,oListTo,oListFrom.selectedIndex); | |
| } | |
| function goLeft() | |
| { | |
| var oListFrom = document.getElementById("toList"); | |
| var oListTo = document.getElementById("FromList"); | |
| move(oListFrom,oListTo,oListFrom.selectedIndex); | |
| } | |
<td style="100px">
<select id="fromList" size="10" style="100px">
<option value="1" selected>18-21</option>
<option value="2">22-25</option>
<option value="3" selected>26-29</option>
<option value="4">over 35</option>
</select></td>
<td style="50px;text-align:center">
<input type="button" value=" << " onclick="goLeft()"/><p/>
<input type="button" value=" >> " onclick="goRight()"/>
</td><td>
<select id="toList" size="10" style="100px">
</select>
7、重新排序选项
function shiftUp(oListBox,iIndex)
{
if (iIndex>0)
{
var oOption = oListBox.options[iIndex];
var oPrevOption = oListBox.options[iIndex-1];
oListBox.insertBefore(oOption,oPrevOption);//把后者插入到前者
}
}
function shiftDown(oListBox,iIndex)
{
if (iIndex<oListBox.options.length-1)
{
var oOption = oListBox.options[iIndex];
var oNextOption = oListBox.options[iIndex+1];
oListBox.insertBefore(oNextOption,oOption);
}
}