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

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

無効な項目のデザインを設定する

 フォームの入力項目は、HTML4.01やXHTML1.0で定義されたdisabled属性を指定することで無効にすることができる。無効にした項目は選択・入力できなくなり、サーバーにも項目のデータは送信されない。

 これに対して、CSS 3の勧告候補「Basic User Interface Module」で提案されている:disabledセレクタを利用すると、disabled属性を指定した無効な項目にだけスタイルシートを適用することができる。

 また、:enabledセレクタを利用すれば、disabled属性を指定していない有効な項目にだけスタイルシートを適用することも可能だ。セレクタへのブラウザの対応状況は下の表のようになっている。なお、Internet Explorerはバージョン8でも対応していない。

セレクタとブラウザの対応
セレクタFirefoxSafariOperaInternet Explorer
:disabled3以上で対応×
:enabled3以上で対応×

 たとえば次のソースでは、disabled属性で「住所」のテキストボックスを無効にして、:disabledセレクタでデザインを指定している。また、disabled属性の設定を解除して、テキストボックスを有効にするボタンも用意した。設定の解除にはJavaScriptを使用する。

input:disabled{
background-color: lightgray;
}

input:enabled{
background-color: greenyellow;
}

名前:

住所:

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

 では先ほどと同様に、ブラウザで表示を確認してみよう。

  • コメント(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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]