如何在 JavaScript 中从所有类型的 HTML 输入中搜索值

# Web 开发# JavaScript# HTML

本博客解释如何使用 JavaScript 通过“id”检索 HTML 表单中不同输入类型的值。

输入类型和检索方法

1. 文本输入

  • HTML 代码：
  • JavaScript 代码：
    • const textValue = document.getElementById('textInput').value;
  • 说明：检索在文本输入字段中输入的值。

    • 2. 电子邮件输入

  • HTML 代码：
  • JavaScript 代码：
    • const emailValue = document.getElementById('emailInput').value;
  • 说明：检索用户输入的电子邮件。此字段需要有效的电子邮件格式。

    • 3. 密码输入

  • HTML 代码：
  • JavaScript 代码：
    • const passwordValue = document.getElementById('passwordInput').value;
  • 解释：检索在密码输入字段中输入的文本。

    • 4. 数字输入

  • HTML 代码：
  • JavaScript 代码：
    • const numberValue = document.getElementById('numberInput').value;
  • 说明：检索输入字段中输入的数字。

    • 5. 日期输入

  • HTML 代码：
  • JavaScript 代码：
    • const dateValue = document.getElementById('dateInput').value;
  • 说明：以 YYYY-MM-DD 格式检索选定的日期。

    • 6.单选按钮

  • HTML 代码：
    •
  • JavaScript 代码：
    • const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;
  • 说明：检索所选单选按钮的值。如果没有选择，则返回 null。

    • 7.复选框

  • HTML 代码：
    •
  • JavaScript 代码：
    • const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
  • 说明：检索所有选中的复选框值作为数组。如果没有选中复选框，则返回一个空数组。

    • 8. 下拉列表（选择）

  • HTML 代码：
  • JavaScript 代码：
    • const dropdownValue = document.getElementById('dropdownInput').value;
  • 说明：从下拉菜单中检索选定的值。

    • 9. 文本区域

  • HTML 代码：
  • JavaScript 代码：
    • const textareaValue = document.getElementById('textareaInput').value;
  • 说明：检索在 textarea 字段中输入的文本。

    • 示例：完整脚本

    下面是从表单中的所有输入类型检索值的示例：

    function submitForm() {
  const data = {
    textInput: document.getElementById('textInput').value,
    emailInput: document.getElementById('emailInput').value,
    passwordInput: document.getElementById('passwordInput').value,
    numberInput: document.getElementById('numberInput').value,
    dateInput: document.getElementById('dateInput').value,
    radioInput: document.querySelector('input[name="radioInput"]:checked')?.value || null,
    checkboxInput: Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value),
    dropdownInput: document.getElementById('dropdownInput').value,
    textareaInput: document.getElementById('textareaInput').value
  };

  console.log(data);
  alert('Form data submitted! Check the console for details.');
}

    如何使用

  • 使用指定的 id 属性将 HTML 表单元素添加到您的网页。
  • 使用相应的 JavaScript 代码片段从输入中检索值。
  • 收集到的数据可以被记录或发送到服务器进行进一步处理。

    • 该文档为处理 HTML 中的各种输入类型以及使用 JavaScript 收集其值提供了清晰的参考。