JavaScript浏览器对象 > 表单（Form） 表单元素赋值 有大用

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

f = document.forms[0];
f = document.forms["FORM1"];
f = document.FORM1;
f = document.getElementById('form的id')
document.all.FORM1.submit();

用 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>

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

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

f = document.forms[0];
f = document.forms["FORM1"];
f = document.FORM1;
f = document.getElementById('form的id')
document.all.FORM1.submit();

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

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

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

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

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

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

name 属性指定的元素名。

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

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

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

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

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

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

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

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

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

仅单选框和复选框有效。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>

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

下拉菜单（<select>）除了公共的属性和方法，还支持下列属性和方法。

选项 （option） 的个数，与下面的 options.length 相同。

当前选中的选项的下标（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>）除了公共的属性和方法，还支持下列属性和方法。

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

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

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

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