JavaScript：form标签

最新推荐文章于 2023-10-14 20:54:58 发布

枫眠cc

最新推荐文章于 2023-10-14 20:54:58 发布

阅读量1.1k

点赞数

分类专栏： ★ JavaScript

赠人玫瑰，手有余香！本文是作者的原创文章，转载或摘抄时请注明出处。

本文链接：https://blog.youkuaiyun.com/lovecuidong/article/details/116140342

版权

★ JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中获取和操作form标签，包括利用不同方式如标签名、id、类名等进行选取，以及如何阻止表单提交、触发提交和重置。同时，文章还探讨了form元素的elements属性、length属性，以及表单元素的常见属性和方法，如disabled、name、value等。此外，还讲解了下拉菜单select对象和option对象的相关属性和操作方法，如multiple、size、options等，并提供了创建和删除option的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取form标签

利用标签名获取：document.getElementsByTagName('form');

利用id获取：document.getElementById('form的id');

通过类名获取：document.getElementsByClassName('类名');

利用document.forms获取，返回值是一个数组，如果要获取该数组中某个form元素

通过下标：document.forms[下标];
利用item方法获取：document.forms.item(下标);
利用name的值获取：document.forms['name名'];

<form action="" name="f1"></form>
<form action="" name="f2"></form>
<form action="" name="f3"></form>

阻断form提交，利用事件对象的preventDefault方法

<body>
    <form action="ok.html" name="f1">
        <input type="text" name="user">
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript">
        var fm = document.forms['f1'];
        fm.onsubmit = function (e) {
            e = e || window.event;
            e.preventDefault();
        }
    </script>
</body>

<!-- ok.html -->
<body>
    <h1>提交成功</h1>
</body>

利用submit方法提交，该方法是form节点的方法，功能是提交表单数据

<body>
    <form action="ok.html" name="f1">
        <input type="text" name="user">
        <span>提交</span>
    </form>

    <script type="text/javascript">
        var fm = document.forms['f1'];
        var span = document.getElementsByTagName('span')[0];
        span.onclick = function () {
            fm.submit();
        }
    </script>
</body>

设置按Ctrl+Enter提交表单数据

<body>
    <form action="ok.html" name="f1">
        <input type="text" name="user">
        <span>提交</span>
    </form>

    <script type="text/javascript">
        var fm = document.forms['f1'];
        var span = document.getElementsByTagName('span')[0];
        document.onkeydown = function (e) {
            e = e || window.event;
            if (e.ctrlKey && e.keyCode == 13) {
                fm.submit();
            }
        }
    </script>
</body>

利用reset方法重置，该方法是form节点的方法，功能是重置表单数据

<body>
    <form action="ok.html" name="f1">
        <input type="text" name="user">
        <input type="button" value="重置">
    </form>

    <script type="text/javascript">
        var fm = document.forms['f1'];
        var btn = document.getElementsByTagName('input')[1];
        btn.onclick = function () {
            fm.reset();
        }
    </script>
</body>

在给表单元素添加name或id属性时，名称不要叫submit或reset，否则影响这两个方法的使用，影响提交和重置功能。

F5刷新和Ctrl+F5刷新：F5刷新时，数据是从缓存中从新加载的，而按Ctrl+F5时会从服务器端重新读取数据。

form标签的elements属性：获取表单中的所有元素，返回值是一个数组，可以利用下标、item方法获取对应的表单元素。也可以利用元素的name属性获取该元素，格式document.forms[下标].elements[name属性名]

form标签的length属性：作用是获取表单元素的个数

<body>
    <form action="ok.html" name="f1">
        姓名：<input type="text" name="username"><br>
        性别：<input type="radio" name="gander">男<input type="radio" name="gander">女<br>
        密码：<input type="password" name="psd"><br>
        爱好：<input type="checkbox" name="hobby">爬山<input type="checkbox" name="hobby">游泳<br>
    </form>

    <script type="text/javascript">
        var fm = document.forms[0];
        var eles = fm.elements['username'];
        console.log(eles);
        console.log(fm.length);
    </script>
</body>

表单元素共有的属性和方法

1.disabled：禁用当前字段，属性值为true

2.name：获取或设置name属性值

3.readOnly：设置只读，属性值为true

4.value：当前元素的值

5.defaultValue，即默认值，不会因为value值的改变而改变

6.form：获取当前form对象

7.checked：适用于单选框和复选框，表示是否被选中，属性值为true

8.defaultChecked：表示默认选中true

9.type：当前元素类型，下拉菜单（单选）的type值为select-one，下拉菜单（多选）的type值为select-multiple

<body>
    <form action="">
        姓名：<input type="text" name="userName" value="钢铁侠">
        <input type="button" value="提交"><br>
        爱好：<input type="checkbox" name="hobby" id="hobby1">辣舞小姐姐<input type="checkbox" name="hobby" id="hobby2">唱歌小姐姐<br>
        特长：
        <select name="" id=""><!-- 可以在select标签添加multiple="multiple"设置多选 -->
            <option value="">180mm</option>
            <option value="">180cm</option>
            <option value="">180m2</option>
        </select>
    </form>

    <script type="text/javascript">
        //1.disabled属性
        var user = document.getElementsByTagName('input')[0];
        //user.disabled = true;
        var btn = document.getElementsByTagName('input')[1];
        btn.onclick = function () {
            //btn.disabled = true;
        }

        //2.name属性
        console.log(user.name);
        //user.name = "un";
        console.log(user.name);

        //3.readOnly属性
        //user.readOnly="readOnly";
        //user.readOnly=true;

        //4.value属性
        console.log("点击前打印：" + user.value);
        btn.onclick = function () {
            console.log("点击后打印：" + user.value);
        }

        //5.defaultValue属性
        console.log("点击前打印：" + user.value);
        btn.onclick = function () {
            console.log("点击后打印：" + user.defaultValue);
        }

        //6.form属性
        console.log(user.form);

        //7.checked属性
        var hobby1 = document.getElementById("hobby1");
        hobby1.checked = true;

        //8.defaultChecked属性
        var hobby2 = document.getElementById("hobby2");
        hobby2.defaultChecked = true;

        //9.type属性
        var eles = document.forms[0].elements[4];
        console.log(eles.type);
    </script>
</body>

focus()：获取焦点，blur()：失去焦点

<body>
    <input type="text" id="inp">
    <button type="button" id="but1">获取焦点</button>
    <button type="button" id="but2">失去焦点</button>

    <script type="text/javascript">
        var input = document.getElementById("inp");
        var but1 = document.getElementById("but1");
        var but2 = document.getElementById("but2");

        but1.onclick = function (){
            input.focus();
        }
        but2.onclick = function (){
            input.blur();
        }
    </script>
</body>

下拉菜单select对象常用的属性和方法

1.multiple：获取或设置该下拉菜单为多选，属性值为true

2.size：可以用来设置显示多少个选项

3.options：获取option的集合

4.type：获取select的type属性值，默认为select-one（单选），如果是多选，结果为select-multiple

5.add()：添加新的option，格式：select节点.add(option节点, 位置下标); 第二个参数可以省略，或者使用undefined，表示将option插入到最后一个位置

6.remove()：删除option选项，格式：select节点.remove(下标)，如果没有参数，那么会将整个select菜单删除，在IE浏览器下面如果不写参数，那么程序报错

<body>
    <form action="" name="f1">
        <select name="" id="sel">
            <option value="1">黑寡妇</option>
            <option value="2">绯红女巫</option>
            <option value="3">惊奇队长</option>
            <option value="4">卡魔拉</option>
            <option value="5">黄蜂女</option>
        </select>
    </form>
    <script type="text/javascript">
        var sel = document.getElementById('sel');
        //1.multiple属性
        sel.multiple = true;
        //2.size属性
        sel.size = 2;
        //3.options属性
        console.log(sel.options[0]);
        //4.type属性
        console.log(sel.type);
        
        //5.add()
        var opt = document.createElement('option');
        opt.innerHTML = '小辣椒';
        sel.add(opt);
        //6.remove()
        sel.remove(sel.options.length-1);
    </script>
</body>

下拉菜单option对象常用的属性和方法

1.value：查询或设置选项的value值

2.text：查询或设置选项的文本内容

3.selected：表示当前选项被选中，属性值为true

创建option

方法1：使用createElement方法
方法2：使用构造方法，格式：var 选项名称 = new Option("text值", "value值");

添加option

方法1：使用appendChild方法，但是在低版本IE中会出现不兼容现象
方法2：使用add方法

删除option

方法1：使用removeChild方法
方法2：使用remove方法

<body>
    <form action="" name="f1">
        <select name="" id="sel">
            <option value="1">黑寡妇</option>
            <option value="2">绯红女巫</option>
            <option value="3">惊奇队长</option>
            <option value="4">卡魔拉</option>
            <option value="5">黄蜂女</option>
        </select>
    </form>
    <script type="text/javascript">
        var opt = document.getElementById('sel').options;
        //1.value属性
        console.log(opt[1].value);
        //2.text属性
        console.log(opt[1].text);
        //3.selected属性
        opt[1].selected = true;

        var nopt = new Option("小辣椒","6");
        var sel = document.getElementById('sel');
        sel.add(nopt);
        sel.remove(5);
    </script>
</body>