DOM访问表单元素

最新推荐文章于 2025-09-07 22:29:54 发布

weixin_30355437

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/john568300/p/6411177.html

本文通过一个HTML示例展示了如何使用JavaScript访问和操作网页表单中的各个元素，包括文本框、密码框及下拉选择框等。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM访问表单元素</title>
    <script type="text/javascript">
        function one(){
            var form = document.getElementById("myform");
            //表单 .elements[下标]
            var name = form.elements[0];
           /* var name = form.elements["username"];
              var name = form.username;
           和上面等价*/
            alert(name.value);
        }
        function two(){
            var form = document.getElementById("myform");
            var password = form.elements[1];
            alert(password.value);
        }
        function three(){
            var form = document.getElementById("myform");
            var city = form.elements[2];
            alert(city.value);
        }
        function four(){
            //能够让点击普通按钮的时候完成提交动作
            var form = document.getElementById("myform");
            //提交
            form.submit();
        }

    </script>
</head>
<body>
<form id="myform" action="http://www.baidu.com" method="get"
      target="_self">
    <input name="username" type="text" value="xiaoming"/><br/>
    <input name="password" type="text" value="123456"/><br/>
    <select name="city">
        <option value="shanghai">上海</option>
        <option value="nanjing" selected="selected">南京</option>
    </select><br/>
    <input type="button" value="获取表单内第一个控件"
           onclick="one()"/>
    <input type="button" value="获取表单内第二个控件"
           onclick="two()"/>
    <input type="button" value="获取表单内第三个控件"
           onclick="three()"/>
    <input type="button" value="操作表单"
           onclick="four()"/>
</form>
</body>
</html>