-
- <html>
- <head>
- <title></title>
- <script type="text/javascript">
- function checkForm(){
- var name=document.form1.number.value; //or form1.number.value
- var name=document.forms[0].number.value;
- var name=document.forms[0]['number'].value;
- var name=document.form1['number'].value //or form1['number'].value
- alert(name);
-
- }
- </script>
- </head>
- <body>
- <form name="form1" method="post" action="">
- 网元名称:<input type="text" name="number" size="20">
- <br>
- <input type="submit" value="提交" onClick="checkForm()">
- </form>
- </body>
- </html>
复制代码-
- <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>
复制代码-
- <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>
复制代码-
-
- 表单(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 属性的值。
- www.monmonkey.com
复制代码-
- <html>
-
- <head>
- <script type="text/javascript">
- function upperCase()
- {
- var x=document.getElementById("fname").value
- document.getElementById("fname").value=x.toUpperCase()
- }
- </script>
- </head>
-
- <body>
-
- Enter your name: <input type="text" id="fname" onblur="upperCase()"><br />
- Enter your age: <input type="text" id="age" onblur="alert(this.id)">
-
- </body>
- </html>
-
复制代码 |