JavaScript 表单专题

最新推荐文章于 2024-10-01 20:10:01 发布

苦涩2020

最新推荐文章于 2024-10-01 20:10:01 发布

阅读量292

点赞数 1

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

本文链接：https://blog.csdn.net/UserPython/article/details/105716832

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

JavaScript

25 篇文章

订阅专栏

本文详细介绍了JavaScript中对表单的各种操作，包括访问表单的方式、Form对象的属性、方法和事件句柄，以及Text对象、Textarea对象、Select下拉列表的详细使用，涵盖了单行文本框、多行文本框、下拉列表、单选和复选框等常见表单元素的操作技巧。

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

访问表单的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问表单的方式</title>
    <style type="text/css">
        form{
            width: 300px;
            height: 100px;
            background:green;
            margin: 25px;
        }
    </style>
</head>
<body>
    <form action="" name="myform1">表单1</form>
    <form action="" name="myform2">表单2</form>
    <form action="" name="myform3">表单3</form>
    <form action="" name="myform4">表单4</form>
    <script>
        //方式1：通过TagName或ID访问
        document.getElementsByTagName("form")[0].style.background = "red";
        //方式2：通过forms属性的索引值访问
        document.forms[1].style.background = "blue";
        //方式3：通过forms属性的表单name值访问
        document.forms["myform3"].style.background = "orange";
        //方式4：直接通过name值访问;不推荐使用，因为页面中表单较多的情况下容易出现相同name
        myform4.style.background = "pink";
    </script>
</body>
</html>

访问form表单控件的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过name访问指定表单控件</title>
</head>
<body>
    <form action="" name="myform">
        userName:<input type="text" name="username"><br>
        password:<input type="password" name="password"><br>
        <input type="submit" id="tijiao" onclick="getValue()">
    </form>
    <script>
        
        function getValue(){
            var form1 = document.forms[0];
            // 方式一：通过elements访问
            // var userN = form1.elements[0].value;
            // alert(userN);

            //方式二：通过控件的name访问或修改
            var userN = form1.username.value = "hhh";
            alert(userN);
            form1.password.style.background = "pink";
        }
    </script>
</body>
</html>

Form 表单对象

Form 对象代表一个HTML表单
在HTML文档中每出现一此，Form对象就会被创建

Form 对象集合

elements[ ]：包含表单中所有控件元素的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form对象集合</title>
</head>
<body>
    <form action="" name="myform">
        <p>昵称：<input type="text" name="name"></p>
        <p>密码：<input type="password" name="password"></p>
        <p><input type="submit" value="提交"></p>
    </form>
    <script>
        function getForm(){
            var fele = myform.elements;
            // alert(fele.length);
            for(var i = 0; i < fele.length; i++){
                if(fele[i].type == "submit"){
                    fele[i].style.background = "orange";
                }else{
                    fele[i].style.background = "green";
                }
            }
        }
        getForm();
    </script>
</body>
</html>

Form 对象属性

action：设置或返回表单的action属性
length：返回表单中的控件元素数目
id/name/target/method

Form 对象方法

reset()：把表单的所有输入元素重置为它们的默认值
submit()：提交表单

Form 对象事件句柄

onreset：在重置表单元素之前调用（对象是form表单）
onsubmit：在提交表单之前调用（对象是form表单）

单行文本框

Text 对象

Text 对象属性

accessKey：设置或返回访问文本域的快捷键
alt：设置或返回当前浏览器不支持文本域时供显示的替代文本
defaultValue：设置或返回文本域的默认值
disabled：设置或返回文本域是否应被禁用
form：返回一个对包含文本域的表单对象的引用
maxLength：设置或返回文本域中最大字符数
readOnly：设置或返回文本域是否应该是只读的
tabIndex：设置或返回文本域的tab键控制次序
id/name/size/type/value…

Text 对象方法

blur()：从文本域上移开焦点
focus()：在文本域上设置焦点
select()：选取文本域中的内容

<form action="" method="get" name="form1">
        <p>测试内容：<input type="text" name="txt" value="测试文本框"></p>
        <input type="button" value="按钮" onclick="eve()">
    </form>
    <script>
        function eve(){
            var txt = document.forms["form1"].txt;
            // alert(txt);
            // txt.focus();//获得焦点
            // txt.blur();//失去焦点
            txt.select();//选取文本域的内容
        }
    </script>

多行文本框

Textarea 对象属性

accessKey：设置或返回访问文本域的快捷键
cols：设置或返回textarea的宽度
rows：设置或返回textarea的高度

Textarea 对象方法

blur()：从文本域上移开焦点
focus()：在文本域上设置焦点
select()：选取文本域中的内容

Select 下拉列表

Select 对象集合

options[ ]：返回包含下拉列表中的所有选项的一个数组

Select 对象属性

length：返回下拉列表中的选项数目
multiple：设置或返回是否选择多个项目
selectedIndex：设置或返回下拉列表中被选项目的索引号
size：设置或返回下拉列表中的可见行数
id/name/disabled/form/tabIndex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
    <style type="text/css">
        select{
            width: 150px;
            background: pink;
        }
        textarea{
            width: 150px;
        }
    </style>
</head>
<body>
    <form name="form1" action="">
        <!-- size:设置显示项目数 -->
        <select name="sel" size=3 onchange="mySelect()" multiple> 
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
        </select><br>
        <textarea name="show" rows="5"></textarea>
    </form>
    <script>
        function mySelect(){
            // var len = document.form1.sel.options.length;//5
            var len = document.form1.sel.options;//返回一个options数组
            // alert(len[0].value);//1
            // alert(len[0].text);//选项1

            // var len2 = document.form1.sel.length;//返回下拉列表数目
            // alert(len2);//5

            var str = "";
            for(var i = 0; i < len.length; i++){
                if(document.form1.sel.options[i].selected){
                    str += document.form1.sel.options[i].text + "\n";
                }
            }
            // alert(str);
            document.form1.show.value = str;
        }
    </script>
</body>
</html>

Select 对象方法

add()：向下拉列表指定位置添加一个选项
语法：selectObject.add(option, index);
remove()：从下拉列表中删除一个选项
语法：selectObject.remove(index)
blur()/focus()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组元素添加到下拉列表</title>
</head>
<body>
    <form name="form1" action="">
        <select name="sel" size="3">
            <option value="1">选项一</option>
            <option value="2">选项二</option>
            <option value="3">选项三</option>
        </select>
        <input type="button" value="addOpt" onclick="addOpt()">
        <input type="button" value="delOpt" onclick="delOpt()">
    </form>
    <script>
        var count=0;
        function addOpt(){
            var FORM = document.form1.sel;
            //添加一个选项
            // var op = new Option("添加文本"+count, "值");
            // FORM.add(op);
            FORM.add(new Option("添加文本"+count, "值"), 2)
            count++;
        }
        //删除一个选项
        function delOpt(){
            var FORM = document.form1.sel;
            //方式一：将options属性长度设置为0，删除所有
            // FORM.options.length = 0;

            // 方式二：指定索引值删除
            // FORM.remove(2);
            var index = FORM.selectedIndex;
            FORM.remove(index);
        }
    </script>
    
</body>
</html>

级联菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联菜单</title>
</head>
<body>
    <form action="" name="form1">
        选择省份：
        <select name="sel1" size="1" onchange="changeMenu()">
            <option value="广东省">广东省</option>
            <option value="广西省">广西省</option>
            <option value="山东省">山东省</option>
            <option value="山西省">山西省</option>
        </select>
        <select name="sel2" size="1">
            <option value="广州市">广州市</option>
            <option value="深圳市">深圳市</option>
            <option value="佛山市">佛山市</option>
        </select>
    </form>
    <script>
        var arr = [];
        arr["广东省"] = ["广州市", "深圳市", "佛山市"];
        arr["广西省"] = ["梧州市", "桂林市", "南宁市"];
        arr["山东省"] = ["青岛市", "威海市", "大齐市"];
        arr["山西省"] = ["孟州市"];
        function changeMenu(){
            var sel1 = document.form1.sel1;
            // alert(sel1.options[sel1.selectedIndex].text);

            var list = arr[sel1.options[sel1.selectedIndex].text];
            // alert(list);

            var sel2 = document.form1.sel2;
            // removeMenu(sel2);
            alert(sel2[0].value);
            for(var i = 0; i < list.length; i++){
                sel2.options[i] = new Option(list[i], i);
            }
        }
        //清空sel2列表
        function removeMenu(menu){
            for(var i = 0; i < menu.options.length; i++){
                menu.options[i] = null;
            }
        }
    </script>
</body>
</html>

下拉列表多项移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表多项移动</title>
    <style type="text/css">
        select{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <form action="" name="form1">
        <select name="sel_1" multiple>
            <option value="A">1</option>
            <option value="B">2</option>
            <option value="C">3</option>
            <option value="D">4</option>
            <option value="E">5</option>
            <option value="F">6</option>
        </select>
        <input type="button" value="<<" onclick="changeSel(document.form1.sel_2, document.form1.sel_1)">
        <input type="button" value=">>" onclick="changeSel(document.form1.sel_1, document.form1.sel_2)">
        <select name="sel_2" multiple>
        </select>

    </form>
    <script>
        function changeSel(s1, s2){
            // var sel_1 = document.form1.sel_1;
            // alert(sel_1.selectedIndex + " " + sel_1.options[sel_1.selectedIndex].text)

            while(s1.selectedIndex != -1){
                var index = s1.selectedIndex;
                var str1 = s1.options[index].text;
                s1.remove(index);
                s2.add(new Option(str1));
            }
        }
        
    </script>
</body>
</html>

单选和复选框

通常使用input元素来创建单选和复选框，两者属性和方法相同，具有input元素共有的其他属性和方法

属性

checked：设置或返回checkbox是否被选中，true为选中，反之为false
defaultChecked：返回checked属性的默认值
id/form/name/type/disabled…

方法

click()：模拟在checkbox中的一次鼠标点击
blur()、focus()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选和复选框</title>
</head>
<body>
    <form action="" name="form1">
        <input type="radio" name="rad" value="A">A
        <input type="radio" name="rad" value="B">B
        <input type="radio" name="rad" value="C">C
    </form>
    <script>
        // alert(form1.rad.length);
        // alert(form1.rad[1].value);
        // form1.rad[0].defaultChecked = true;//默认选中
        form1.rad[1].click();//模拟点击事件
    </script>

    <hr>

    <form action="" name="form2"  onclick="return check2()">
        <input type="checkbox" name="boxc" value="A">A
        <input type="checkbox" name="boxc" value="B">B
        <input type="checkbox" name="boxc" value="C">C
        <input type="checkbox" name="boxc" value="D">D
        <input type="checkbox" name="boxc" value="E">E
    </form>
    <script>
        // alert(form2.boxc.length);
        // alert(form2.boxc[3].value);
        // form2.boxc[0].defaultChecked = true;
        // form2.boxc[2].click();

        function check2(){
            var num = 0;
            var len = document.form2.boxc.length;
            for(var i = 0; i < len; i++){
                if(document.form2.boxc[i].checked){
                    num++;
                }
            }
            if(num > 2){
                    alert("最多只能选择两个");
                    return false;
            }
        }
    </script>

    <hr>
    <form action="" name="form3">
        <p>选择课程</p>
        <p>全选 <input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p>
        <p><input type="checkbox" name="CLASS" value="HTML5">HTML5
            <input type="checkbox" name="CLASS" value="PHP">PHP
            <input type="checkbox" name="CLASS" value="JAVA">JAVA
        </p>
    </form>
    <script>
        function checkAll(c){
            // var arr = document.getElementsByName("CLASS");
            var arr = form3.CLASS;
            alert(arr.length);
            if(c){
                for(var i = 0; i < arr.length; i++){
                    arr[i].checked = true;
                }
            }else{
                for(var i = 0; i < arr.length; i++){
                    arr[i].checked = false;
                }
            }
        }
        // checkAll();
    </script>
</body>
</html>