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

本博客介绍了如何使用 JavaScript 通过 ID 从 HTML 表单中的不同输入类型检索值。

输入类型和检索方法

1.文字输入

• HTML 代码：

  <input type="text">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  const textValue = document.getElementById('textInput').value;

登录后复制

• 说明： 检索在文本输入字段中输入的值。

---

2.输入电子邮件

• HTML 代码：

  <input type="email">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const emailValue = document.getElementById('emailInput').value;

• 说明： 检索用户输入的电子邮件。此字段需要有效的电子邮件格式。

---

3.输入密码

• HTML 代码：

  <input type="password">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const passwordValue = document.getElementById('passwordInput').value;

• 说明： 检索在密码输入字段中输入的文本。

---

4.输入数字

• HTML 代码：

  <input type="number">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const numberValue = document.getElementById('numberInput').value;

• 说明： 检索在输入字段中输入的数字。

---

5.输入日期

• HTML 代码：

  <input type="date">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const dateValue = document.getElementById('dateInput').value;

• 说明： 以 YYYY-MM-DD 格式检索所选日期。

---

6.单选按钮

• HTML 代码：

  <input type="radio">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;

• 说明： 检索所选单选按钮的值。如果没有选择，则返回 null。

---

7.复选框

• HTML 代码：

  <input type="checkbox">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

• 说明： 以数组形式检索所有选定的复选框值。如果没有选中任何复选框，它将返回一个空数组。

---

8.下拉菜单（选择）

• HTML 代码：

  <select>

• JavaScript Code:

  const dropdownValue = document.getElementById('dropdownInput').value;

• 说明： 从下拉菜单中检索选定的值。

---

9.文本区域

• HTML 代码：

  <textarea>

• JavaScript Code:

  const textareaValue = document.getElementById('textareaInput').value;

• 说明： 检索在文本区域字段中输入的文本。

---

示例：完整脚本

这是一个从表单中的所有输入类型检索值的示例：

  <input type="text">

• JavaScript Code:

  const textValue = document.getElementById('textInput').value;

---

使用方法

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

---

本文档提供了使用 HTML 中的各种输入类型并使用 JavaScript 收集其值的清晰参考。

以上是如何在 JavaScript 中从所有类型的 HTML 输入中检索值的详细内容。更多信息请关注PHP中文网其他相关文章！