表单(Form)

首页 > JavaScript浏览器对象 > 表单(Form)

■ 一览

文本框, 多行文本框, 密码框, 文件上传框, 按钮, 提交按钮, 重置按钮, 复选框, 单选框, 下拉菜单, 下拉菜单选项, action, blur(), checked, click(), defaultChecked, defaultSelected, defaultValue, elements, encoding, focus(), form, forms, length(forms), length(elements), length(options), length(select), method, name(form), name(element), options, reset(), select(), selected, selectedIndex, submit(), target, text, type, value(element), value(option)

■ 操作表单

用 JavaScript 可以操作表单。下面的例子里,计算两个输入框的值的合计。

<script type="text/javascript">
<!--
function func() {
  var xx = parseFloat(document.F1.T1.value);
  var yy = parseFloat(document.F1.T2.value);
  document.F1.T3.value = xx + yy;
}
// -->
</script>
<form name="F1" action="#">
<input type="text" name="T1">
+
<input type="text" name="T2">
<input type="button" value="=" onclick="func()">
<input type="text" name="T3">
</form>

按下等于按钮的时候(onclick),会调用名为 func() 的函数。在 func() 中,把文档(document)中的名叫 F1 的表单(form)中的名叫 T1 的元素的值(value)转换为数值(parseFloat())后,赋值给变量 xx 。同样把 T2 的值赋值给变量 yy ,然后在元素 T3 中显示合计。

表单里的值都是字符串,所以要当作数值使用的时候,先要用 parseFloat() 等方法转换成数值。下面的例子里,没转换成数值的 100 加上 100,结果是字符串 "100100"。

<script type="text/javascript">
<!--
function func() {
  alert(document.F1.T1.value + 100);
}
// -->
</script>
<form name="F1" action="#">
<input type="text" name="T1" value="100">
<input type="button" value="OK" onclick="func()">
</form>

■ 表单对象

window.document.forms
window.document.forms.length

forms 是表单对象的数组。length 是数组的长度。页面中一个 <form>~</form> 代表一个表单。

window.document.form

代表各个表单的对象。可以用 0 开始的下标来指定表单,也可以使用 <form> 标签里的 name 属性指定的表单名(例子里为 "FORM1")。

f = document.forms[0];
f = document.forms["FORM1"];
f = document.FORM1;
window.document.form.action
window.document.form.encoding
window.document.form.method
window.document.form.name
window.document.form.target

分别代表 <form> 标签里指定的 action、encoding、method、name、target 属性的値。

window.document.form.submit()
window.document.form.reset()

与按下表单中的提交按钮、重置按钮的效果相同。

■ 表单元素

window.document.form.elements
window.document.form.elements.length

elements 是表单中元素的数组。length 是数组的长度。

window.document.form.element

调用表单中的元素。可以使用 0 开始的下标,或是 name 属性指定的元素名(举例中为 "ELEM1")。

e = document.FORM1.elements[0];
e = document.FORM1.ELEM1;

各种元素除了公共的属性和方法,还有各自独有的属性和方法。

■ 表单元素(公共)

window.document.form.element.name

name 属性指定的元素名。

window.document.form.element.type

"text"、"submit" 等元素的类型。

window.document.form.element.form

此元素所包含的表单对象。

window.document.form.element.value

此元素的值。text, password, textarea 的场合为输入的字符串,button, submit, reset 的场合为按钮上显示的字符串。textarea 里的换行符一般显示为代码 0x0d 0x0a 。

window.document.form.element.focus()
window.document.form.element.blur()

focus() 使此元素获得焦点。blur() 使此元素失去焦点。

■ 表单元素(文本元素)

文本框(<input type="text">)、密码框(<input type="password">)、文件上传框(<input type="file">)、多行文本框(<textarea>)除了公共的属性和方法,还支持下列属性和方法。

window.document.form.text.defaultValue

默认值。考虑到安全性,文件上传框不支持此属性。

window.document.form.text.select()

使输入框中的字符串变为选中状态。像下面这样写,可以在输入框获得焦点时,使其中的字符串变为被选中状态。

<input type="text" onfocus="this.select()">

■ 表单元素(按钮)

复选框(<input type="checkbox">)、 单选框(<input type="radio">)、 按钮(<input type="button">)、提交按钮(<input type="submit">)、 重置按钮(<input type="reset">)除了公共的属性和方法,还支持下列属性和方法。

window.document.form.checkbox.defaultChecked
window.document.form.checkbox.checked

仅单选框和复选框有效。defaultChecked 设置默认值是否为选中,checked 返回当前是否被选中的真伪值。checked 也可以代入值 true 和 false 。

要调查复选框是否被选中,可以像下面这样写。

<script type="text/javascript">
<!--
function func() {
    if (document.F1.C1.checked) {
        alert(document.F1.C1.value);
    }
    if (document.F1.C2.checked) {
        alert(document.F1.C2.value);
    }
}
// -->
</script>
<form name="F1" action="#">
<input type="checkbox" name="C1" value="AAA">AAA
<input type="checkbox" name="C2" value="BBB">BBB
<input type="button" value="OK" onclick="func()">
</form>

要调查单选框是否被选中,可以像下面这样写。

<script type="text/javascript">
<!--
function func() {
    var i;
    if (document.F1.R1.length) {
        for (i = 0; i < document.F1.R1.length; i++) {
            if (document.F1.R1[i].checked) {
                alert(document.F1.R1[i].value);
            }
        }
    } else {
        if (document.F1.R1.checked) {
            alert(document.F1.R1.value);
        }
    }
}
// -->
</script>
<form name="F1" action="#">
<input type="radio" name="R1" value="AAA" checked>AAA
<input type="radio" name="R1" value="BBB">BBB
<input type="radio" name="R1" value="CCC">CCC
<input type="button" value="OK" onclick="func()">
</form>
window.document.form.checkbox.click()

使此按钮变成被点击的状态。

■ 表单元素(下拉菜单)

下拉菜单(<select>)除了公共的属性和方法,还支持下列属性和方法。

window.document.form.select.length

选项 (option) 的个数,与下面的 options.length 相同。

window.document.form.select.selectedIndex

当前选中的选项的下标(0~)。把值代入的话可以改变当前选中的项目。

<script type="text/javascript">
<!--
function func() {
    var n = document.F1.S1.selectedIndex;
    alert(document.F1.S1.options[n].text);
}
// -->
</script>
<form name="F1" action="#">
<select name="S1">
<option>AAAA
<option>BBBB
<option>CCCC
</select>
<input type="button" value="OK" onclick="func()">
</form>

■ 表单元素(下拉菜单选项)

下拉菜单选项(<option>)除了公共的属性和方法,还支持下列属性和方法。

window.document.form.select.options
window.document.form.select.options[n]
window.document.form.select.options.length

options 是 <option> 的数组,options[n] 是数组中的单个对象,length 是数组的长度。

window.document.form.select.option.defaultSelected
window.document.form.select.option.selected

defaultSelected 是默认值是否选中的真伪值,selected 是当前是否选中的真伪。

window.document.form.select.option.text

返回选项所显示的字符串。

window.document.form.select.option.value

返回 <option> 标签的 value 属性的值。