码迷,mamicode.com
首页 > 其他好文 > 详细

表单及其控件的访问

时间:2020-06-27 00:38:50      阅读:47      评论:0      收藏:0      [点我收藏+]

标签:var   elements   meta   form   png   兼容   select   type   img   

表单及其控件(元素)的访问方式

1.采用表单名称.控件名称.属性

  表单名称.控件名称.方法(参数)

2.采用forms[下标].elements[下标/元素id名称/元素name名称].属性,elements表示表单里面的所有元素的数组

   forms[下标].elements[下标/元素id名称/元素name名称].方法(参数)

 3.访问select下拉列表option元素的方法

  select的id名称.options[下标].属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body><!--placeholder是html5的新属性,需要注意兼容性-->
        <form id="dd" name="calc">
            <input type="text" name="tx1"  placeholder="请在这里输入信息" value="111" />+
            <input type="text" name="tx2" value="222" readonly/>
            =<span id="d2"></span>
            <input type="button"  onclick="cal()" value="计算" />
             
            
        </form>
        <script>
           function cal()
            {
//documnet表示页面上的所有对象元素,在通过表单的id名或者name去引用想要的属性值
//通过document.表单id名称calc.元素的id名称tx1.属性

var t1=document.calc.tx1.value;
//通过documnet.forms[下标].elements[下标].属性;
var t2=document.forms[0].elements[1].value;
document.getElementById("d2").innerHTML=parseFloat(t1)+parseFloat(t2); } 

</script> </body> </html>




 代码效果图如下

技术图片

 

表单及其控件的访问

标签:var   elements   meta   form   png   兼容   select   type   img   

原文地址:https://www.cnblogs.com/hsl541/p/13196829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!