
フォームのインタフェースデザイン(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として対応しているので注意したい。
セレクタ | Firefox | Safari | Opera | Internet 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セレクタの場合
- 新着記事
- 特集
- ブログ
- 企画特集
-
企業のリスクマネージメント対策に
-
M365 活用のセキュリティ対策
-
次期自治体ネットワーク強靭化へ
-
次の一手はこれだ!
-
ネットワークもサービスとして使う
-
コスト・運用の壁を崩す!
-
ビッグデータ最前線!
-
DX時代のアプリケーションセキュリティ
-
リモート、オフィス、オンサイト
-
未来のセキュリティイノベーターへ
-
部分最適だけではダメ
-
エンジニアのためのREHL8まとめ
-
連載!プロが語るストレージ戦略
-
明日からではもう遅い?!
-
連載!プロが語るストレージ戦略
-
IDaaSって何?
-
連載!プロが語るストレージ戦略
-
第4回CNBFミートアップレポート
-
性能の大幅向上を実現!
-
漫画で解説:IoTはじめの一歩
-
ゼロトラストに向けた道のりを支援
-
いまさら聞けない「PPAP」
-
デジタルを当たり前と言えるか?
-
ハイブリッドクラウドとAI
-
SECCON2020レポート第二弾!
-
データの散在と非常率運用がネック
-
SoRとSoEをつなぐDX推進の要
-
時代が求める生体認証への期待
-
いまあるデータで身近な業務をDX
-
クラウド時代に理想のセキュリティ
-
セキュリティの今を知る
-
特集:IT最適化への道
-
厳しい目が向けられる内部不正
-
その先へ