JavaScript DOM 操作怎么获取和设置表单输入框的值-js教程-PHP中文网

通过value属性可直接获取和设置表单元素值：input/textarea读写value；select单选读select.value，多选需遍历selectedoptions；checkbox/radio用checked控制状态，value仅用于提交值。

javascript dom 操作怎么获取和设置表单输入框的值

获取和设置表单输入框（如 <input>、<textarea></textarea>、<select></select>）的值，核心是通过 DOM 元素的 value 属性。它既可读也可写，是最直接、最常用的方式。

获取输入框的当前值

使用 element.value 读取用户输入或程序设置后的实时内容：

<input type="text">、<input type="password">、<input type="email"> 等：直接读 value
<textarea></textarea>：同样用 value，不是 innerHTML 或 textContent
<select></select> 单选：读 selectElement.value，自动返回选中 <option></option> 的 value 属性值（无 value 时取文本）
<select multiple></select>：需遍历 selectElement.selectedOptions，再取每个的 value

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const input = document.getElementById('username');
console.log(input.value); // 获取文本框内容

const select = document.querySelector('select');
console.log(select.value); // 获取当前选中的 option 的 value

设置输入框的值

直接赋值给 value 属性即可更新显示内容，同时会清除用户之前的输入（除非你保留逻辑）：

对 <input> 和 <textarea></textarea>：赋字符串即可
对 <select></select>：设为某个 <option></option> 的 value 字符串，浏览器自动选中对应项
对 <select multiple></select>：仅设 value 不生效；需手动操作 options[i].selected

示例：

input.value = '张三'; // 填入文本框

const select = document.getElementById('city');
select.value = 'shanghai'; // 自动选中 value="shanghai" 的 option

注意 input 的 type 和 value 行为差异

不同 type 的 <input> 对 value 的解释不同：

type="checkbox" 或 "radio"：不靠 value 控制是否勾选，而用 checked 属性；value 仅表示提交时发送的值
type="number"：设 value = '123' 可以，但设 value = 123 也行；读取时始终是字符串（如 "123"），即使输入的是数字
type="date"：value 格式固定为 YYYY-MM-DD 字符串，设错格式（如 '2024/05/01'）会被忽略