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

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

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

 :read-onlyや:read-writeセレクタに未対応のブラウザでも、同じようにフォームを表示することはできる。ただし、現状ではスタイルシートではなくJavaScriptを利用しなければならない。

 たとえば、次のソースではJavaScriptを利用して、readonly属性を指定したテキストボックスはグレーで、指定していないテキストボックスは黄緑色で表示するように指定している。FirefoxSafariOperaInternet Explorer 5以上で同じように表示することが可能だ。

function myreadonly() {

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

名前:

住所:

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

 ブラウザでの表示を確認すると、次のように表示される。

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

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

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

    • 「名前」のテキストボックスは黄緑色で表示される。
    • 「住所」のテキストボックスはグレーで表示される。
    • 「住所」テキストボックスは読み取り専用で入力することはできない。

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

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

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

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

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

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