DOM : DOMとフォーム – 生成AI時代のプログラミング学習

dom_dom0600_001

テキスト入力の現在値は、input要素の ( A ) プロパティで参照・更新できる。たとえば inputEl.( A ) = “hello” とすれば、表示値は ( B ) になる。

チェックボックスのON/OFFは ( A ) プロパティで判定する。if (cb.( A )) { … } のように使い、未チェックなら ( B ) が返る。

同一グループのラジオボタンから選択された要素を1つ取得するには、document.querySelector(‘input[ ( A ) =”gender”]:( B )’) のように、name属性と擬似クラスを組み合わせて指定する。

フォーム送信時のデフォルト動作（ページ遷移やリロード）を抑止するには、submitイベント内で event.( A )() を呼ぶ。通常は form.addEventListener(“( B )”, handler) の形で監視する。

FormData から値を取り出すには formData.( A )(“field”) を使う。複数値のフィールド（同名チェックボックスなど）を配列で受けるには formData.( B )(“field”) を使う。

<select> 要素の選択値は、テキストではなく ( A ) プロパティで取得する。個々の <option> の表示文字列は option.text、送信されるのは ( B ) である。

フォームを初期状態に戻すには、フォーム要素で ( A ) メソッドを呼ぶ。個別の入力に対しては、inputEl.( B ) = “” のように直接値を変更できる。

submit ハンドラ内で送信元フォーム要素を参照するには、イベントオブジェクトの ( A ) を使う。たとえば new FormData(event.( A )) のようにし、個別の入力には form.elements.( B ) でアクセスできる。

チェックボックスの送信値は未チェック時は送られない。未チェックでも固定値を送りたい場合は、隠しフィールドと組み合わせるか、JSで ( A ) を作って送る。JSで動的送信する場合、fetch のボディには new ( B )(form) を渡す方法が簡単である。

必須入力のブラウザ標準バリデーションを使うには、入力に required を付ける。JSで送信前に妥当性を確認するには、form.( A )() を呼ぶ。無効なときに送信を止めるには、if (!form.( B )()) event.preventDefault(); のように書く。