js_input_examples

JavaScript 与 HTML 输入元素示例

本节概述了 JavaScript 与 HTML 输入元素（HTML input elements）和表单（forms）进行交互的常见方式，从而实现动态响应的用户界面（user interfaces）。

Button (<button>, <input type="button">) 元素

操作 button 元素：

• 启用或禁用 button：buttonElement.disabled = true/false;。
• 获取 button 的 name 属性：buttonElement.name。
• 确定 button 的 type 类型（例如，‘button’, ‘submit’, ‘reset’）：buttonElement.type。
• 获取或设置 value 属性（通常与 input 类型为 button 的元素相关）：buttonElement.value。
• 获取或设置 button 上显示的文本：buttonElement.textContent 或 buttonElement.innerHTML。
• 查找 button 所属的 form：buttonElement.form (返回父 form 元素或 null)。

事件处理（Event handling）（例如，buttonElement.addEventListener('click', ...)）对于 button 的交互性至关重要。

Form (<form>) 元素

与 HTML 表单交互：

• 通过编程方式提交 form：formElement.submit()。
• 将 form 重置为初始值：formElement.reset()。
• 访问单个 form 元素：formElement.elements (一个 HTMLFormControlsCollection 对象)，可以通过 name 或索引访问（例如，formElement.elements['username'] 或 formElement.elements[0]）。
• 通过遍历 formElement.elements 获取 form 中每个元素的值。
• 查找 form 的 accept-charset 属性：formElement.acceptCharset。
• 获取或设置 action 属性（提交的 URL）：formElement.action。
• 获取或设置 enctype 属性（提交的编码类型，例如，‘multipart/form-data’）：formElement.enctype。
• 查找 form 中的元素数量：formElement.elements.length。
• 获取或设置用于发送 form 数据的 HTTP method (‘GET’ 或 ‘POST’)：formElement.method。
• 获取 form 的 name 属性：formElement.name。
• 获取或设置 target 属性（在哪里显示响应）：formElement.target。

对于现代异步 form 提交（asynchronous form submissions）（例如，使用 fetch 或 XMLHttpRequest），FormData 对象非常有用：const formData = new FormData(formElement);。

Select (<select>) 和 Option (<option>) 元素

使用下拉列表及其选项：

• 启用或禁用下拉列表：selectElement.disabled = true/false;。
• 获取包含下拉列表的 form：selectElement.form。
• 获取下拉列表中的选项数量：selectElement.options.length 或 selectElement.length。
• 控制多选显示：selectElement.size (可见选项数量)，selectElement.multiple = true/false;。
• 获取选中 option 的值（用于单选）：selectElement.value。
• 获取选中 option 的索引（用于单选）：selectElement.selectedIndex。
• 访问单个 option：selectElement.options[index]。
• 检查 option 是否被选中：optionElement.selected (布尔值)。设置为 true 或 false 来改变状态。
• 获取或设置 option 的文本：optionElement.text 或 optionElement.textContent。
• 获取或设置 option 的值：optionElement.value。
• 动态添加 option：const newOption = new Option('Text', 'value'); selectElement.add(newOption);。
• 移除 option：selectElement.remove(index); 或 selectElement.options[index] = null;。

对于多选列表（multi-select lists），你需要遍历 selectElement.options 来找到所有被选中的 option。

其他 Input 类型 (<input type="text">, <input type="checkbox"> 等)

与各种输入字段相关的常见任务：

• 获取或设置文本输入、密码、电子邮件等的值：inputElement.value。
• 检查 checkbox 或 radio button 是否被选中：inputElement.checked (布尔值)。设置为 true 或 false 来改变状态。
• 获取 name、type、id 属性。
• 控制只读状态：inputElement.readOnly = true/false;。
• 控制必需状态：inputElement.required = true/false;。
• 访问验证属性（validation properties）（例如，inputElement.validity, inputElement.validationMessage），用于 HTML5 表单验证（HTML5 form validation）。

为 ‘input’, ‘change’, ‘focus’, ‘blur’ 事件附加事件监听器（event listeners）是创建交互式表单的常见做法。有关特定 input 类型及其独有属性/方法的更多详细信息，请参阅 MDN Web Docs。