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 >
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="width:100px"> <select >}