フォームのインタフェースデザイン（2）

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

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

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

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

　たとえば、次のソースでは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セレクタの場合