フォームのインタフェースデザイン(2)

エ・ビスコム・テック・ラボ
2008-06-06 08:00:00
  • このエントリーをはてなブックマークに追加

未対応のブラウザに対応する - :disabled / :enabledセレクタの場合

 disabled属性を指定して無効な状態になっている項目のデザインも、JavaScriptで指定することが可能だ。次のようにソースを記述すると、:disabledや:enabledセレクタに未対応のInternet Explorer 5以上でも、Firefoxなどと同じように無効な項目のデザインを設定できるようになる。

function mydisabled() {

myinput = document.getElementsByTagName('input').length;
for (i=0;i

名前:

住所:

ブラウザで表示を確認する

 ブラウザでの表示は次のようになる。

ページを読み込んだ段階での表示

ページを読み込んだ段階での表示 ページを読み込んだ段階での表示
  • 実行する処理:

    • disabled属性の指定がないの背景色をgreenyellowに設定。
    • disabled属性の指定があるの背景色をgrayに設定。
  • ポイント:

    • 「名前」のテキストボックスは黄緑色で表示される。
    • 「住所」のテキストボックスはグレーで表示される。
    • 「住所」テキストボックスは無効な状態で入力することはできない。

「住所を入力する」ボタンをクリックしたときの表示

「住所を入力する」ボタンをクリックしたときの表示 「住所を入力する」ボタンをクリックしたときの表示
  • 実行する処理:

    • 「住所」のテキストボックスのdisabled属性を無効にする。
    • 「住所」のテキストボックスの背景色をgreenyellowに変更。
  • ポイント:

    • 「名前」と「住所」の両方のテキストボックスが黄緑色で表示される。
    • 「住所」のテキストボックスも有効な状態になり、入力することができる。

未対応のブラウザにも対応する - ユーザーのアクションに応じてフォームのデザインを変える場合

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]