入力要素の操作（valueプロパティ）

DOMとフォーム: 入力要素の操作（valueプロパティ）

valueプロパティは、フォーム要素（特に <input> や <textarea>）の現在の値を取得したり、設定したりするために使用されます。ユーザーが入力した内容や、JavaScriptでプログラム的に変更した内容を扱う際に重要なプロパティです。

---

1. 基本的な役割

• 取得: 入力欄に現在入力されている値を取得できます。

• 設定: 入力欄の値をJavaScriptから変更できます。

html
<input type="text" id="username" value="初期値">

javascript
const input = document.getElementById("username");

// 値を取得
console.log(input.value); // "初期値"

// 値を変更
input.value = "新しい値";

---

2. 初期値との違い

• HTMLで定義された初期値: <input value="初期値"> のように記述された値。

• JavaScriptから参照する値: input.value は、ユーザーの入力やスクリプトで変更された値を反映します。

なお、defaultValue プロパティを使うとHTMLで定義された初期値を参照できます。

javascript
console.log(input.defaultValue); // "初期値"

---

3. 適用できる要素

• <input>（text, password, hidden, checkbox, radio, number, color などタイプによって挙動が異なる）

• <textarea>

• <select>（選択中の値を返す）

特に注意すべきは checkbox と radio です。これらは checked プロパティを使うのが基本であり、value プロパティは選択時にサーバーへ送信される値を表します。

---

4. 使用例

テキスト入力の操作

html
<input type="text" id="email" placeholder="メールアドレスを入力">
<button id="btn">値を変更</button>

<script>
  const emailInput = document.getElementById("email");
  const button = document.getElementById("btn");

  // 入力値を取得
  console.log(emailInput.value);

  // ボタンを押したら値を変更
  button.addEventListener("click", () => {
    emailInput.value = "example@test.com";
  });
</script>

---

チェックボックスの操作

html
<input type="checkbox" id="agree" value="yes"> 利用規約に同意する

<script>
  const agree = document.getElementById("agree");

  // valueは送信される値（"yes"）
  console.log(agree.value);

  // チェック状態はcheckedで確認
  console.log(agree.checked); // true / false
</script>

---

まとめ

• value プロパティは入力要素の値を 取得・設定するために使う。

• 初期値は defaultValue、現在の値は value。

• checkbox や radio は checked プロパティで制御する。

これにより、フォーム入力をJavaScriptで柔軟に制御できるようになります。