- 表单对象：
文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。
格式：
document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）
- 表单对象的属性：
action 表单动作 elements 以索引表示的所有表单元素 encoding MIME的类型 length 表单元素的个数 method 方法 name 表单名称 target 目标
- 表单对象的方法：
handleEvent(事件) 使事件处理程序生效 reset() 重置 submit() 提交
- 文本对象：
- 格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法（参数）
- 属性：
defaultValue 该对象的value属性 form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() focus() handleEvent(事件) select() 该对象设置为选取状态
- 事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
- 例1：
<FORM>
姓名：
<INPUT TYPE="text" NAME="name">
<INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+this.form.name.value)>
</FORM>
- 例2：
<Script>
function getFocus(obj) {
obj.style.color='red';
obj.style.background='#DBDBDB';
}
function getBlur(obj) {
obj.style.color='black';
obj.style.background='white';
}</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
电 话：<INPUT TYPE="text" NAME="tel"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
</FORM>
</BODY>
- 例3：
<Script>
var i = 0;function movenext(obj,i) {
if(obj.value.length==4){
document.forms[0].elements[i+1].focus();
}
}function result() {
fm = document.forms[0];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码是"+ num);
}</Script>
<BODY onLoad=document.forms[0].elements[i].focus()>
请输入你的信用卡号码：
<form>
<input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
<input type=button value=显示 onClick=result()>
</form>
</BODY>
- 密码对象：
- 格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.密码对象名称.属性
document.表单名称.密码对象名称.方法（参数）
- 属性：
defaultValue 该对象的value属性 form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() focus() handleEvent(事件) select() 该对象设置为选取状态
- 事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
- 例1：
<Script>
function checkPw() {
fm = document.form1;
if (fm.pw2.value != fm.pw1.value) {
alert("密码不符，请重新输入");
document.form1.pw2.select();
}
else
alert("谢谢你，"+fm.name.value);
}</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"><BR>
输入密码：<INPUT TYPE="password" NAME="pw1"><BR>
重新输入：<INPUT TYPE="password" NAME="pw2"><BR>
<INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>
<INPUT TYPE="reset" VALUE="重 填">
</FORM>
</BODY>
- 例2：
<Script>
function isInt(elm) {
if (isNaN(elm)) {
alert("你输入的是" + elm + "\n不是数字！");
document.forms[0].pw.value = "";
return false;
}
if (elm.length != 4) {
alert("请输入四位数数字！");
document.forms[0].pw.value = "";
return false;
}
}
</Script><form action="test.asp" onSubmit="return isInt(this.pw.value)">
请输入四位数数字密码：<BR>
<input type="password" name="pw">
<input type="submit" value="检查">
</form>
- 按钮对象、提交按钮对象、重置按钮对象：
- 格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法（参数）
- 属性：
form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() click() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
- 隐藏对象：
- 格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.隐藏对象名称.属性
document.表单名称.隐藏对象名称.方法（参数）
- 属性：
form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 单选按钮对象：
- 格式：
document.forms[索引].elements[索引](索引).属性
document.forms[索引].elements[索引](索引).方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
- 属性：
checked 设置该对象为选定状态 defaultChecked 对应该对象的默认选定状态 form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() click() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
- 例：
<Script>
function show() {
var x = "先生";
if (document.form1.sex[1].checked)
x = "小姐";
alert(document.form1.name.value + x);
}</Script>
<FORM NAME=form1>
姓名：<INPUT TYPE="text" NAME="name"><BR>
你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥
<INPUT TYPE="radio" NAME="sex">美女<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=show()>
</FORM>
- 复选框对象：
- 格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
- 属性：
checked 设置该对象为选定状态 defaultChecked 对应该对象的默认选定状态 form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() click() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
- 例：
<Script>
function count() {
var checkCount=0;
var num = document.form1.elements.length;
for (var i=0; i<num; i++) {
if (document.form1.elements[i].checked)
checkCount++;
}
alert ("你喜欢 "+ checkCount + "种颜色。")
}</Script>
<FORM NAME=form1>
请选择你喜欢的颜色：<BR>
<INPUT TYPE="checkbox" NAME="red">红色
<INPUT TYPE="checkbox" NAME="green">绿色
<INPUT TYPE="checkbox" NAME="blue">蓝色<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=count()>
</FORM>
- 选择对象：
- 属性：
form 该对象所在的表单 name 该对象的name属性 length 选项的数目 options <option>标记 selectedIndex 所选项目的索引值 type 该对象的type属性
- 方法：
blur() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
- 选项对象：选择对象的子对象
- 格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])
- 属性：
selected 判断该选项是否被选取 defaultSelected 指定该选项为默认选定状态 index 所有选项所构成的数组索引值 length 选项的数目 text 该选项显示的文字 value 所选项传到服务器的值
- 例1：
<Script>
var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";
function goto(form) {
var i = form.menu.selectedIndex;
if (i>0) {
location = url[i-1];
}
}</Script>
<FORM>
<SELECT NAME="menu" onChange="goto(this.form)">
<OPTION>你喜欢哪一个搜索引擎?
<OPTION STYLE="color:red">◆蕃薯藤
<OPTION STYLE="color:red">◇奇摩
<OPTION STYLE="color:red">◆中文雅虎
</SELECT>
</FORM>
- 例2：
<Script>
function getText() {
sel = document.forms[0].weekday
ans = sel.options[sel.selectedIndex].text
return ans;
}</Script>
<FORM>请选择...
<SELECT name=weekday>
<OPTION VALUE="Monday">星期一
<OPTION VALUE="Tuesday">星期二
<OPTION VALUE="Wednesday">星期三
<OPTION VALUE="Thursday">星期四
<OPTION VALUE="Friday">星期五
<OPTION VALUE="Saturday">星期六
<OPTION VALUE="Sunday">星期日
</SELECT><P>
<INPUT TYPE="button" VALUE="取出选项的文字"
onClick="alert(getText())">
<INPUT TYPE="button" VALUE="取出选项的值"
onClick="alert(this.form.weekday.value)"><BR>
</FORM>
- 例3：
<FORM NAME="form1">
你最喜欢哪一种水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查询</A>
</FORM>
<Script> /* -------- 1.htm -------- */
function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}</Script>
<FORM>
<SELECT onChange="choice()">
<OPTION>请选择
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>
- 例4：
<Script>
function createOptions(){
var option = new Option(document.form1.select1.value)
document.form1.select2.options[2] = option;
}
</script><form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select><input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
- 例5：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
sel2.options[2] = option;
}
</script><form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select><input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
- 例6：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
</script><form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select><input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
- 例7：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}
</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="选择" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
<input type="button" value="删除" onClick="delOptions()">
</form>
- 文本区域对象：
- 属性：
defaultValue 对应该对象的默认值 form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() select() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
- 例1：
<Script>
function isTooLong(elm){
if (elm.length > 50) {
alert("留言内容太长，请修改后再发送....");
return false;
}
}
</script><FORM onSubmit="return isTooLong(this.msg.value)">
<TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
欢迎留言，不过请长话短说....
</textarea><BR>
<INPUT TYPE="submit" VALUE="留言完毕">
</FORM>
- 例2：
<STYLE>
INPUT {background-color:'99FFFF';color:"red"}
TEXTAREA {background-color:'99FFFF';color:"red"}
</STYLE>
<BODY BGCOLOR="99FFFF">
<FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:hwyang@iii.org.tw?subject=不错">
<TABLE>
<CAPTION>读者回函</CAPTION>
<TR><TD>姓 名：
<TD><INPUT TYPE="text" NAME="userName">
<TR><TD>电子邮件：
<TD><INPUT TYPE="text" NAME="email">
<TR><TD VALIGN="top">内 容：
<TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
我非常喜欢你的书，加油!!!
</TEXTAREA>
<TR><TD COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="填好了">
</TABLE>
</FORM>
</BODY>
- 文件上传对象：
- 属性：
form 该对象所在的表单 name 该对象的name属性 type 该对象的type属性 value 该对象的value属性
- 方法：
blur() select() focus() handleEvent(事件)
- 事件处理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove