入力値を読み取る
テキスト、チェックボックス、select 入力の値にアクセスします。
「入力値を読み取る」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
フォームデータの扱い
フォームでは、テキストボックス、チェックボックス、ラジオボタン、ドロップダウンなどのフィールドからユーザー入力を収集します。それぞれデータの取得方法が少しずつ異なります。
input.value
テキスト系の入力要素では、現在の内容をvalueプロパティから取得できます。値は常に文字列です。
const name = document.querySelector("#name");
console.log(name.value);valueは常に文字列
数値入力であっても、返される値は文字列です。数値が必要な場合は明示的に変換してください。
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
数値入力と日付入力にはvalueAsNumberがあり、値を直接数値として返します（空または無効な場合はNaNです）。
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
チェックボックスは、valueではなく、ブール値のcheckedプロパティで状態を示します。
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseラジオボタン
ラジオボタングループでは、チェックされている項目を探します。選択された項目はcheckedプロパティで識別できます。
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");selectのvalue
単一選択のドロップダウンでは、選択された項目をvalueから取得できます。
const country = document.querySelector("#country");
console.log(country.value);複数選択
複数選択では、selectedOptionsを読み取り、値に変換します。
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);inputイベント
すべてのキーストロークや変更にリアルタイムで反応するには、inputイベントを監視します。
name.addEventListener("input", (e) => {
console.log(e.target.value);
});changeイベント
changeイベントは、値が変更されたフィールドがフォーカスを失ったときに発生します。ただし、チェックボックスとセレクトでは直ちに発生します。
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormDataを使うと、フォーム内の名前付きフィールドを一度にすべて収集できます。サーバーへの送信に適しています。
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));クイックチェック
チェックボックスを正しく読み取る方法を選んでください。
まとめ
テキスト入力はvalueから読み取ります（常に文字列です。数値にはvalueAsNumberを使います）。チェックボックスとラジオボタンはchecked、ドロップダウンはvalueまたはselectedOptionsから読み取ります。すべての変更にはinputイベント、確定時の変更にはchangeイベントで反応し、FormDataですべてのデータを一度に収集できます。
よくある質問
「入力値を読み取る」レッスンは無料ですか？
はい。「入力値を読み取る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「入力値を読み取る」で何を学びますか？
テキスト、チェックボックス、select 入力の値にアクセスします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「入力値を読み取る」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。