JavaScript ですべてのタイプの HTML 入力から値を取得する方法

このブログでは、JavaScript を使用して HTML フォームのさまざまな入力タイプから値を ID によって取得する方法について説明します。

入力タイプと取得方法

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 フォーム要素を Web ページに追加します。
2. 対応する JavaScript スニペットを使用して、入力から値を取得します。
3. 収集されたデータは、ログに記録したり、さらに処理するためにサーバーに送信したりできます。

---

このドキュメントは、HTML でさまざまな入力タイプを操作し、JavaScript を使用してその値を収集するための明確なリファレンスを提供します。

以上がJavaScript ですべてのタイプの HTML 入力から値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。