フォーム

JavaScript(ジャバスクリプト)で作った、フォーム(form要素)に関するちょっと便利なサンプル集。

  • 送信フォームの必須項目が入力済みかチェック

    入力必須項目に未入力があった場合、「必須項目は全て入力して下さい。」というアラートを出現させ、送信せず、未入力の必須項目の項目名の下に 【○○を入力して下さい】と表示させるサンプル。

  • 送信フォームの入力内容が半角数字かチェック

    送信フォームの入力内容が半角数字かどうかをチェックし、半角数字でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角数字で入力させたい項目の項目名の右の「(半角数字で入力して下さい)」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。

  • 送信フォームの入力内容が半角英数かチェック

    送信フォームの入力内容が半角英数かどうかをチェックし、半角英数でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角英数で入力させたい項目の項目名の右の「(半角英数で入力して下さい)」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。

  • 送信フォームの入力文字数をチェック

    送信フォームの入力文字数をチェックし、指定した文字数に対し、不足していたり、超過していたりした場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、不足の場合は、「○○文字不足しています。」と表示させ、超過の場合は、「○○文字オーバーしています。」と表示させるサンプル。

  • 送信フォームのメールアドレス入力内容をチェック

    送信フォームのメールアドレス入力内容が正しいかをチェックし、メールアドレスの形式でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、【メールアドレスを正しく入力して下さい。】と表示させるサンプル。

  • フォーム内容リセット前にダイアログで確認

    フォームの入力内容をリセットするとき、「リセットしてよろしいですか?」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。

  • リセット前に確認し「リセットしました」を2秒表示

    フォームの入力内容をリセットするとき、「リセットしてよろしいですか?」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約2秒間程だけ表示する。確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。

  • 特定のラジオボタンだけテキスト入力欄を有効化

    特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を無効化し、テキストを入力できないようにする。

  • 特定のラジオボタンだけテキスト入力欄を表示

    特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を表示、及び、有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を非表示、及び、無効化し、テキストを入力できないようにする。

  • 同意するを選ぶと送信ボタンを有効化

    「同意する」のラジオボタンを選択(クリック)すると、送信ボタンを有効化する。「同意しない」のラジオボタンを選択(クリック)すると、送信ボタンを無効化する。つまり、「同意する」を選択しなければ、送信ボタンをクリックできない。

  • ロールオーバーでラジオボタンの色を反転

    マウスポインタをラジオボタンの上に合わせると、色を反転(背景色と文字色を変化)させる。ラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。

  • マウスポインタの動作でラジオボタンの色を変更

    マウスポインタをラジオボタンの上に合わせると、色を反転(背景色と文字色を変化)させ、さらに、選択したラジオボタンの背景色を変え目立たせる。

  • フォームの内容の変更を特定の要素に即反映

    JavaScriptを使い、フォーム内のフォーム部品の値の変更を、特定の要素内に直ぐに出力させる方法。

  • フォームの内容を一行にまとめ表に追加

    JavaScriptを使い、フォームの内容を一行(tr要素)にまとめ、表(table要素)に最後の行(tr要素)として追加するサンプル。

  • テキスト入力欄のテキストを選択

    テキスト入力欄のテキストを選択するJavaScriptサンプル。

  • テキストエリアのテキストを選択

    テキストエリアのテキストを選択するJavaScriptサンプル。

スポンサード リンク