在网页开发或日常操作中，经常会遇到需要重复填写相同表单内容的情况，通过编写js脚本实现表单自动填充可以大幅提升效率，核心思路是通过DOM API定位到对应的表单元素，再给元素的属性或值赋值完成填充。
表单自动填充的核心原理
网页中的表单元素都是DOM树的节点，js可以通过多种方式获取这些节点，不同类型的表单元素赋值方式略有区别：
- 文本框、密码框、隐藏域等类型元素，直接修改
value属性 - 文本域
<textarea>元素，同样修改value属性 - 下拉框
<select>元素，修改value属性为对应选项的value值 - 单选框、复选框，修改
checked属性为true
定位表单元素的常用方法
要填充表单首先需要准确找到目标元素，常用的定位方式有以下几种：
通过id定位
这是最快捷的方式，前提是表单元素设置了唯一的id属性，使用document.getElementById方法获取：
// 获取id为username的输入框
const usernameInput = document.getElementById('username');
通过name属性定位
如果元素没有id，但是有name属性，可以使用document.querySelector或者document.getElementsByName：
// 获取name为email的输入框
const emailInput = document.querySelector('input[name="email"]');
// 获取所有name为hobby的复选框
const hobbyChecks = document.getElementsByName('hobby');
通过选择器定位
对于结构复杂的表单，可以使用CSS选择器精准定位，document.querySelector返回第一个匹配的元素，document.querySelectorAll返回所有匹配的元素集合：
// 获取表单下第一个文本框
const firstInput = document.querySelector('form input[type="text"]');
// 获取class为form-item的所有输入框
const allInputs = document.querySelectorAll('.form-item input');
不同类型表单的填充示例
下面针对常见的表单类型给出具体的填充代码示例，假设我们有一个简单的用户信息表单：
<form id="userForm">
<p>用户名：<input type="text" id="username" name="username"></p>
<p>密码：<input type="password" id="password" name="password"></p>
<p>邮箱：<input type="email" name="email"></p>
<p>简介：<textarea name="intro"></textarea></p>
<p>城市：
<select name="city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="sport">运动
<input type="checkbox" name="hobby" value="music">音乐
</p>
<p>性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
</form>
填充文本类元素
文本框、密码框、文本域的填充方式一致，直接给value赋值：
// 填充用户名
document.getElementById('username').value = '张三';
// 填充密码
document.querySelector('input[type="password"]').value = '123456';
// 填充邮箱
document.querySelector('input[name="email"]').value = 'test@ipipp.com';
// 填充简介
document.querySelector('textarea[name="intro"]').value = '这是自动填充的简介内容';
填充下拉框
下拉框只需要把value设置为对应选项的value值即可，不需要操作option节点：
// 选择上海
document.querySelector('select[name="city"]').value = 'sh';
填充单选框和复选框
单选框和复选框需要把checked属性设置为true，复选框可以批量设置：
// 选择性别为男
document.querySelector('input[name="gender"][value="male"]').checked = true;
// 选择阅读和运动两个爱好
const hobbyList = ['read', 'sport'];
hobbyList.forEach(hobby => {
document.querySelector(`input[name="hobby"][value="${hobby}"]`).checked = true;
});
完整的自动填充脚本
把上面的逻辑整合起来，就是一个完整的表单自动填充脚本，可以直接在浏览器控制台运行，或者嵌入到页面中：
function autoFillForm() {
// 文本类填充
document.getElementById('username').value = '张三';
document.querySelector('input[type="password"]').value = '123456';
document.querySelector('input[name="email"]').value = 'test@ipipp.com';
document.querySelector('textarea[name="intro"]').value = '这是自动填充的简介内容';
// 下拉框填充
document.querySelector('select[name="city"]').value = 'sh';
// 单选框填充
document.querySelector('input[name="gender"][value="male"]').checked = true;
// 复选框填充
const hobbyList = ['read', 'sport'];
hobbyList.forEach(hobby => {
const hobbyInput = document.querySelector(`input[name="hobby"][value="${hobby}"]`);
if (hobbyInput) {
hobbyInput.checked = true;
}
});
console.log('表单自动填充完成');
}
// 调用函数执行填充
autoFillForm();
使用注意事项
- 运行脚本前需要确认表单已经加载完成，如果是嵌入页面的脚本，可以放在
<body>底部，或者使用DOMContentLoaded事件监听：
document.addEventListener('DOMContentLoaded', function() {
autoFillForm();
});
- 如果表单元素是动态生成的，需要等待元素渲染完成后再执行填充逻辑，可以使用定时器或者MutationObserver监听DOM变化
- 部分网站会对表单元素做防篡改处理，直接修改value可能不会触发后续的校验逻辑，这时候可以尝试触发input事件：
const input = document.getElementById('username');
input.value = '张三';
// 触发input事件，让表单校验逻辑生效
input.dispatchEvent(new Event('input', { bubbles: true }));
- 自动填充脚本仅用于合法场景，比如测试、个人操作提效，不要用于非法爬取或篡改他人数据
js表单自动填充javascript表单操作DOM操作修改时间：2026-06-25 12:36:43