JavaScript 动态设置表单控件值需操作对应属性：通过 ID 用 getElementById 设置 value；通过 name 用 getElementsByName 获取 NodeList 后遍历赋值；对复选框等需设 checked 属性，select 则设 selectedIndex。
如果您需要通过 JavaScript 为 HTML5 表单中的 input、textarea、select 等控件动态设置值，则需直接操作其 value 属性或 selectedIndex、checked 等对应属性。以下是多种可行的赋值方法：
一、通过元素 ID 获取并设置 value
该方法适用于已知控件具有唯一 id 属性的场景，通过 document.getElementById 快速定位元素并赋值。
1、确保目标 input 元素具有 id 属性，例如：
2、在 script 标签中编写 JavaScript：document.getElementById("username").value = "张三";
立即学习“前端免费学习笔记（深入）”；
3、执行后，输入框将显示 张三 作为初始值。
二、通过 name 属性批量获取并赋值
当存在多个同名表单控件（如复选框组）或未设置 id 时，可使用 getElementsByName 返回 NodeList 并遍历赋值。
1、定义一组复选框：
2、获取全部同名元素：const hobbies = document.getElementsByName("hobby");
3、遍历并匹配赋值：for (let i = 0; i
4、此时 value 为 reading 的复选框将被选中。
三、通过 querySelector 选择器精确赋值
利用 CSS 选择器语法可灵活定位任意表单控件，包括 class、type、data-* 属性等组合条件。
1、定义目标元素：ail" data-field="contact">
2、使用 querySelector 匹配：document.querySelector('input[type="email"][data-field="contact"]').value = "user@example.com";
3、该语句仅影响第一个匹配项，若需全部匹配则使用 querySelectorAll 并循环。
4、赋值结果为 user@example.com 显示在邮箱输入框中。
四、为 select 下拉框设置选中项
select 元素不能仅靠 value 属性触发界面更新，需设置 selectedIndex 或通过 option 的 selected 属性控制。
1、定义下拉框：
2、通过 value 值查找并选中：const sel = document.getElementById("city"); const opts = sel.options; for (let i = 0; i
3、执行后，下拉框将显示 上海 且对应 option 的 selected 属性为 true。
五、为 textarea 设置内容
textarea 的文本内容由其 textContent 或 value 属性承载，推荐统一使用 value 属性以确保兼容性和表单提交一致性。
1、定义文本域：
2、直接赋值：document.getElementById("message").value = "欢迎留言！";
3、该赋值会立即渲染到可视区域，并在表单提交时作为有效数据传输。
4、注意：使用 innerHTML 或 textContent 赋值可能导致 换行符丢失或 HTML 标签被解析，应避免。
