如何在 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中文網其他相關文章！