JavaScript（ジャバスクリプト）で作った、フォーム（form要素）に関するちょっと便利なサンプル集。
-
送信フォームの必須項目が入力済みかチェック
入力必須項目に未入力があった場合、「必須項目は全て入力して下さい。」というアラートを出現させ、送信せず、未入力の必須項目の項目名の下に 【○○を入力して下さい】と表示させるサンプル。
-
送信フォームの入力内容が半角数字かチェック
送信フォームの入力内容が半角数字かどうかをチェックし、半角数字でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角数字で入力させたい項目の項目名の右の「（半角数字で入力して下さい）」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。
-
送信フォームの入力内容が半角英数かチェック
送信フォームの入力内容が半角英数かどうかをチェックし、半角英数でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角英数で入力させたい項目の項目名の右の「（半角英数で入力して下さい）」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。
-
送信フォームの入力文字数をチェック
送信フォームの入力文字数をチェックし、指定した文字数に対し、不足していたり、超過していたりした場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、不足の場合は、「○○文字不足しています。」と表示させ、超過の場合は、「○○文字オーバーしています。」と表示させるサンプル。
-
送信フォームのメールアドレス入力内容をチェック
送信フォームのメールアドレス入力内容が正しいかをチェックし、メールアドレスの形式でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、【メールアドレスを正しく入力して下さい。】と表示させるサンプル。
-
フォーム内容リセット前にダイアログで確認
フォームの入力内容をリセットするとき、「リセットしてよろしいですか？」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。
-
リセット前に確認し「リセットしました」を２秒表示
フォームの入力内容をリセットするとき、「リセットしてよろしいですか？」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約２秒間程だけ表示する。確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。
-
特定のラジオボタンだけテキスト入力欄を有効化
特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を無効化し、テキストを入力できないようにする。
-
特定のラジオボタンだけテキスト入力欄を表示
特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を表示、及び、有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を非表示、及び、無効化し、テキストを入力できないようにする。
-
同意するを選ぶと送信ボタンを有効化
「同意する」のラジオボタンを選択（クリック）すると、送信ボタンを有効化する。「同意しない」のラジオボタンを選択（クリック）すると、送信ボタンを無効化する。つまり、「同意する」を選択しなければ、送信ボタンをクリックできない。
-
ロールオーバーでラジオボタンの色を反転
マウスポインタをラジオボタンの上に合わせると、色を反転（背景色と文字色を変化）させる。ラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。
-
マウスポインタの動作でラジオボタンの色を変更
マウスポインタをラジオボタンの上に合わせると、色を反転（背景色と文字色を変化）させ、さらに、選択したラジオボタンの背景色を変え目立たせる。
-
フォームの内容の変更を特定の要素に即反映
JavaScriptを使い、フォーム内のフォーム部品の値の変更を、特定の要素内に直ぐに出力させる方法。
-
フォームの内容を一行にまとめ表に追加
JavaScriptを使い、フォームの内容を一行（tr要素）にまとめ、表（table要素）に最後の行（tr要素）として追加するサンプル。
-
テキスト入力欄のテキストを選択
テキスト入力欄のテキストを選択するJavaScriptサンプル。
-
テキストエリアのテキストを選択
テキストエリアのテキストを選択するJavaScriptサンプル。