DOM访问表单控件的常用属性和方法

最新推荐文章于 2024-11-18 12:11:58 发布

骆驼飞了

最新推荐文章于 2024-11-18 12:11:58 发布

阅读量308

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/luotuofeile/article/details/113857689

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM中访问表单控件的常见属性和方法，包括action、elements、length、method、target等，以及如何通过它们操作表单。示例代码演示了如何使用这些属性和方法，如reset()、submit()以及访问表单控件的值。此外，还展示了如何通过JavaScript获取和操作表单内不同类型的控件。

摘要由CSDN通过智能技术生成

DOM访问表单控件的常用属性和方法：

action	返回该表单的提交地址
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()	重置表单和确定表单方法。

在elements返回的数组中访问具体的表单控件语法如下：

.elements[index]	返回该表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单中id或name为elementName的表单控件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    function operForm(){
            var myform=document.forms[0];
            // alert(myform.action);
            // alert(myform.method);
            // alert(myform.target);
            //myform.submit();
            myform.reset();
        }
    </script>
</head>
<body>
<form id="myform" action="https://www.baidu.com/" method="get" target="_self">
        <input name="username" type="text" value="wangwu"><br>
        <input name="password" type="text" value="112233"><br>
        <select name="city">
            <option value="shanghai">上海</option>
            <option value="beijing" selected="selected">北京</option>
        </select><br>
        <input type="button" value="获取表单内第一个控件" onclick="alert(document.getElementById('myform')[0].value)">
        <input type="button" value="获取表单内第二个控件" onclick="alert(document.getElementById('myform')['password'].value)">
        <input type="button" value="获取表单内第三个控件" onclick="alert(document.getElementById('myform').city.text)">
        <input type="button" value="操作表单" onclick="operForm()">
</form>
</body>