フォームのインタフェースデザインを考える(1)

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

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

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

ページを読み込んだ段階での表示 ページを読み込んだ段階での表示
  • 「名前」のテキストボックスに適用されるセレクタの設定:input:enabled {〜}
  • 「住所」のテキストボックスに適用されるセレクタの設定:input:disabled {〜}

  • ポイント:

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

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

「住所を入力する」ボタンをクリックしたときの表示 「住所を入力する」ボタンをクリックしたときの表示
  • 「名前」のテキストボックスに適用されるセレクタの設定:input:enabled {〜}
  • 「住所」のテキストボックスに適用されるセレクタの設定:input:enabled {〜}

  • ポイント:

    • 「名前」と「住所」の両方のテキストボックスが黄緑色で表示される。
    • 「住所」のテキストボックスは有効な状態で、選択・入力できるようになっている。
  • コメント(2件)
#1 tokumei   2008-06-02 05:32:31
IEは未対応とそれで終わるのではなく、IEにも対応した記述方法を
掲載した方が、より良い記事になるかと思うのですが
いかがでしょうか。
#2 builder   2008-06-03 14:22:22
builder編集部です。いつもご愛読いただき、ありがとうございます。

1ページ目の表「フォームに対するセレクタの利用とブラウザの対応 」におきまして、
当初、各セレクタを上から「:hover」「:active」「:hover」と記載しておりました。
この重複は編集時のミスによるもので、正しくは「:hover」「:active」「:focus」の順です。
はてなブックマークでご指摘くださったid:mohri様、ありがとうございます。

また、tokumei様、ご意見をお寄せ頂きありがとうございます。
頂いたご要望を今後の誌面作りに役立ててまいります。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]