21.表单、元素

JavaScript

表单对象：

文件对象的子对象，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:[email protected]?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

previous page start