Webデザイン |
Lesson 4 | リアルタイムで フォーム入力を判定する |
制作・文 | 河原 覚(株式会社アークフィリア) | |||
> | To Use | CSS | JavaScript | ||
> | Browser | IE 6over | Firefox 3over | Safari 5over |
複雑な条件があるフォームは通常の要素では表現しきれず、ユーザーに不便を強いてしまうことがある。そういった場合は入力に応じたリアルタイムの判定をすることでユーザビリティを向上できるだろう。 |
01
【1-1】CSSとJavaScriptの読み込み
【1-2】ユーザー名、会員番号はテキスト入力、お問い合わせ内容の種類はラジオボタン、お問い合わせ内容をテキストエリア、利用規約への同意等をチェックボックスで構成する
02
【2-1】ユーザー名判定のJavaScript
【2-2】未入力エラー
【2-3】エラーなし
03
【3-1】会員番号判定のJavaScript
【3-2】フォーマットエラー
【3-3】エラーなし
04
【4-1】ラジオボタン判定のJavaScript
【4-2】エラーなし
05
【5-1】チェックボックス判定のJavaScript
【5-2】片方のみチェック
【5-3】エラーなし
06
【6-1】文字数判定のJavaScript
【6-2】文字数オーバー
【6-3】文字数範囲内
07
【7-1】送信判定のJava Script