首頁 >web前端 >js教程 >如何在 JavaScript 中從所有類型的 HTML 輸入中檢索值

如何在 JavaScript 中從所有類型的 HTML 輸入中檢索值

Linda Hamilton
Linda Hamilton原創
2024-12-31 15:15:09359瀏覽

How to retrieve values from all types of HTML Inputs in JavaScript

本部落格介紹如何使用 JavaScript 透過 ID 從 HTML 表單中的不同輸入類型檢索值。

輸入型別與檢索方法

1.文字輸入

  • HTML 代碼
  <input type="text">



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

<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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn