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

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

読み取り専用の項目のデザインを設定する

 フォームの入力項目は、HTML4.01やXHTML1.0で定義されたreadonly属性を指定することで、読み取り専用にすることができる。読み取り専用にした項目はデータを入力できない状態になる。この点は、前回紹介したdisabled属性で無効にした項目と同じだ。しかし、無効にした項目は選択できず、項目のデータをサーバーにも送信しないが、読み取り専用の項目は選択可能で、項目のデータをサーバーに送信する。

 読み取り専用の項目に対しては、CSS 3の勧告候補「Basic User Interface Module」で提案されている:read-onlyセレクタを利用してスタイルシートを適用することができる。また、:read-writeセレクタを利用すれば、readonly属性を指定していない読み書き可能な項目にだけスタイルシートを適用することも可能だ。

 現在、:read-onlyと:read-writeセレクタにはFirefoxOperaが対応している。ただし、Firefoxは:-moz-read-only、:-moz-read-writeとして対応しているので注意したい。

セレクタとブラウザの対応
セレクタFirefoxSafariOperaInternet Explorer(バージョン8ベータ版も含む)
:read-only:-moz-read-onlyとして対応××
:read-write:-moz-read-onlyとして対応××

 たとえば、次のソースではreadonly属性で「住所」のテキストボックスを読み取り専用に設定し、:read-onlyと:-moz-read-onlyセレクタでデザインを指定している。また、readonly属性の設定を解除して、テキストボックスを読み書き可能にするボタンも用意した。設定の解除にはJavaScriptを使用する。

input:read-only{
background-color: gray;
}

input:read-write{
background-color: greenyellow;
}

input:-moz-read-only{
background-color: gray;
}

input:-moz-read-write{
background-color: greenyellow;
}

名前:

住所:

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

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

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

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

  • ポイント:

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

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

「住所を変更する」ボタンをクリックしたときの表示 「住所を変更する」ボタンをクリックしたときの表示
  • 「名前」のテキストボックスに適用されるセレクタの設定: input:read-write {〜} または input:-moz-read-write {〜}
  • 「住所」のテキストボックスに適用されるセレクタの設定: input:read-write {〜} または input:-moz-read-write {〜}

  • ポイント:

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

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

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