JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框

pan_junbiao

已于 2025-03-31 20:23:38 修改

阅读量1.5k

点赞数 4

分类专栏： JavaScript 我の原创文章标签： JavaScript

于 2019-08-07 15:31:28 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/98624439

版权

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

表单元素在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。下面将介绍一些常用的使用JavaScript操作表单元素的方法。

1、表单（form）

1.1 使用JavaScript脚本提交form表单

//提交表单
myForm.method = 'POST';
myForm.action = "action.html";
myForm.submit();

1.2 使用JavaScript脚本重置form表单

//重置表单
document.getElementsByName("myForm")[0].reset();

表单（form）的详细使用，请点击并浏览本博客的文章：《HTML中Form表单的使用》

2、文本框（text）

2.1 获取文本框的值

document.getElementById("txtBlogInfo").value;

2.2 禁用文本框

//禁用文本框
document.getElementById("txtBlogInfo").setAttribute("disabled", "disabled");

示例：创建页面，使用JavaScript禁用文本框。

<html>
<head>
    <title>使用JavaScript禁用文本框</title>
    <meta name="author" content="pan_junbiao的博客">
    <style>
        input{
            padding: 3px;
            width: 300px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            &