フォーム要素の取得とは何か
フォーム要素の取得は、HTML の form や input・select・textarea・button などにプログラムからアクセスして、値を読んだり書いたり、送信を制御したりすることです。ここが重要です：フォームは「form（親）→ elements（子たち）」という階層でアクセスするのが基本。選択には名前（name）・ID（id）・CSS セレクタ（querySelector）などの複数のルートがあり、目的に応じて最短の取り方を選ぶとコードが短く安全になります。
まず form 自体を掴む（親への入口）
ID やセレクタで掴む
<form id="f">
<input name="email">
</form>
<script>
const f = document.getElementById("f"); // 最も素直
// const f = document.querySelector("form#f"); // セレクタでもOK
</script>
ここが重要です：複雑でない場合は id で十分。セレクタは「特定の位置・条件にあるフォーム」を柔軟に取れるので、ページに複数フォームがあるときに便利です。
document.forms から掴む（複数フォームの管理に強い）
<form name="login"></form>
<form name="contact"></form>
<script>
const login = document.forms["login"]; // name で参照
const first = document.forms[0]; // 先頭フォーム
</script>
ここが重要です：document.forms は HTMLCollection（生きたコレクション）です。フォームが増減しても反映されるため、フォーム管理がしやすくなります。name を付けると参照が簡単です。
子要素の取り方（form.elements と名前での取得）
form.elements でまとめて扱う
<form id="f">
<input name="email">
<input name="age" type="number">
<select name="country"></select>
</form>
<script>
const f = document.getElementById("f");
const el = f.elements; // すべてのコントロール
console.log(el.email, el.age); // name でアクセス（ショートカット）
console.log(el["country"]); // 文字列キーでアクセス
</script>
ここが重要です：elements は「フォーム内の全コントロール」を集めたインターフェイス。name を付けておくとドット記法やブラケット記法で簡単に参照できます。
同じ name が複数ある場合（ラジオボタンなど）
<form id="f">
<label><input type="radio" name="color" value="red">赤</label>
<label><input type="radio" name="color" value="blue">青</label>
</form>
<script>
const group = f.elements["color"]; // RadioNodeList
console.log(group.value); // 選択中の value（未選択なら空文字）
// すべてを列挙したい場合
[...group].forEach(r => console.log(r.value));
</script>
ここが重要です：ラジオのように同じ name が複数あると、RadioNodeList が返ります。value は“選ばれている一つ”を返してくれるので、選択値の取得がシンプルです。
各入力の基本プロパティ（値・状態を正しく読む）
テキスト入力・数値入力
<input id="name" name="name">
<input id="age" name="age" type="number">
<script>
console.log(name.value); // 文字列
console.log(Number(age.value)); // 数値にしたいなら明示変換
</script>
ここが重要です：type=”number” でも value は文字列です。計算するなら Number(…) や parseInt(…) で明示的に変換します。
チェックボックス・ラジオ
<input id="agree" type="checkbox">
<script>
console.log(agree.checked); // true/false（選択状態）
</script>
ここが重要です：チェックボックスは checked を見るのが正解。value はラベルのような“付随文字列”で、選択状態そのものではありません。
セレクトボックス
<select id="country">
<option value="JP">日本</option>
<option value="US">アメリカ</option>
</select>
<script>
console.log(country.value); // 選択中 option の value
console.log(country.selectedIndex); // インデックス
console.log([...country.selectedOptions].map(o => o.value)); // multiple のとき複数取得
</script>
ここが重要です：single は value 一発、multiple は selectedOptions を配列化して扱うと楽です。
ファイル入力
<input id="avatar" type="file" accept="image/*">
<script>
const file = avatar.files[0]; // File オブジェクト
if (file) console.log(file.name, file.size);
</script>
ここが重要です：files は FileList。サーバーへ送るなら FormData と併用します。
CSS セレクタで柔軟に取得（querySelector 系）
局所的に確実に取りたい
<form id="f">
<input name="email">
</form>
<script>
const email = f.querySelector('input[name="email"]'); // フォーム内限定で検索
</script>
ここが重要です：フォームの外にも同名があると混乱します。親フォームから querySelector すれば“このフォーム内の”確実な取得ができます。
複数要素をまとめて
<script>
const inputs = f.querySelectorAll("input, select, textarea"); // NodeList（静的）
inputs.forEach(el => console.log(el.name));
</script>
ここが重要です：querySelectorAll は静的なリスト。動的追加に自動追従させたいなら form.elements のほうが向いています。
値の取得を一発で行う（FormData と組み合わせ）
FormData で“name→value”をマップとして受け取る
<form id="f">
<input name="email" value="a@example.com">
<input name="color" type="radio" value="red" checked>
<input name="color" type="radio" value="blue">
<input name="agree" type="checkbox" checked>
</form>
<script>
const data = new FormData(f);
console.log(data.get("email")); // "a@example.com"
console.log(data.get("color")); // "red"（選択中）
console.log(data.get("agree")); // "on"（checked のときのみ入る）
console.log([...data.entries()]); // すべての [name, value] を列挙
</script>
ここが重要です：FormData は「送信時にどうなるか」をそのまま再現します。チェックなしの checkbox は“キーが存在しない”ので、必須の判定は get() の戻り有無で行うと正確です。
よくある落とし穴と回避策
value を数値だと勘違いする
テキストでも number でも value は文字列です。ここが重要です：計算するなら Number(…) へ明示変換。空文字の扱い（NaN）にも注意し、未入力ならデフォルト値を用意します。
同名ラジオを単一の input として扱ってしまう
同じ name のラジオは RadioNodeList が返ります。ここが重要です：group.value で“選択中”を取る。全件処理は配列化して列挙します。
checkbox の value を状態と誤解する
checked が状態、value はラベル的文字列です。ここが重要です：送信の有無は FormData.get(“name”) の存在で判定すると“未チェックをキーなし”として正しく扱えます。
querySelectorAll の静的性を忘れる
動的に追加した要素は既存の NodeList に自動追加されません。ここが重要です：最新状態で扱いたいなら毎回取り直すか、form.elements を使います。
name が未設定で elements のショートカットが効かない
name のない要素は elements.email のようには参照できません。ここが重要です：フォーム項目には必ず name を付ける。送信にも必須です。
まとめ
フォーム要素の取得は「form を掴む→ elements で子を扱う」が基本です。name を軸にすれば短く安全に参照でき、同名の複数（ラジオ）は RadioNodeList として group.value で選択値が取れます。値は文字列が基本、状態は checked・selected を使う。複数要素には querySelector 系と form.elements を使い分け、送信相当の値取得は FormData を活用すると現実的です。落とし穴（数値変換、checkbox の扱い、静的 NodeList、name 未設定）を避ければ、初心者でも正確で読みやすいフォーム操作が書けます。
