zoukankan      html  css  js  c++  java
  • JS基础11-DOM操作表单元素

    一、DOM访问表单控件的常用属性和方法如下:

    action

    返回该表单的提交地址

    elements

    返回表单内全部表单控件所组成的数组,通过数组可以访问表单内的任何表单控件。

    length

    返回表单内表单域的个数

    method

    返回表单内的method属性,主要有getpost两个值

    target

    确定提交表单时的结果窗口,主要有_self_blank_top

    reset()submit()

    重置表单和确定表单方法

    二、elments返回的数组中访问具体的表单控件语法如下:

    .elements[index]

    返回该表单中第index个表单控件

    .elements[elementName]

    返回表单内idnameelementName的表单控件

    .elementName

    返回表单内idnameelementName的表单控件

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM操作表单元素</title>
    
    </head>
    
    <body>
    <form  id="myform" action="https://www.baidu.com/" method="get" target="_blank">
        <input type="text" value="张三"><br>
        <input type="text" value="123" id="t2"><br>
        <select name="" id="t3">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="淄博">淄博</option>
            <option value="昆明" selected>昆明</option>
        </select>
        <br>
        <input type="button" value="获取表单内第一个控件" onClick="show(c.elements[0])">
        <input type="button" value="获取表单内第二个控件" onClick="show(c.elements['t2'])">
        <input type="button" value="获取表单内第三个控件" onClick="show(c.t3)">
        <input type="button" value="操作表单" onClick="show(c.reset())">
    </form>
    
    <!--从上往下执行,计算机先读取到id="myform",之后才能给声明的变量c赋值-->
    <script type="text/javascript">
         var c=document.getElementById('myform');
        function show(curr){
            alert(curr.value);
        }
        
    </script>
    </body>
    </html>

     

  • 相关阅读:
    IE8上传插件jquery-form.js上传请求参数设置type为post失效问题
    路径参数汉字兼容问题
    vue-cli2移动端适配
    事件委托原生、jQuery实现
    new Date()在移动端的问题
    create-react-app配置less
    删除左右两边空格
    日期转换
    Git 常用命令
    单页面应用
  • 原文地址:https://www.cnblogs.com/LuckyGJX/p/8654692.html
Copyright © 2011-2022 走看看