新しいブログに引っ越しました

tomotomoSnippetは新しいブログに移動しました
http://develtips.com/

2010-09-08

[CakePHP1.3]FormHelperが出力する必須項目*について

重い腰を上げてCakePHP1.3.3をダウンロードして使い始めました。
Scaffoldビューのリンクやボタンが角丸になっているなど、CSS3をふんだんに使っているようです。
(ぱっと見で)

とりあえず、Formヘルパーを使ってログイン画面を作ってみたところ、少し不都合な事実に気づいてしまいました。
// views/users/login.ctp
echo $form->create('User', array('action'=>'login');
echo $form->input('User.username');
echo $form->input('User.password');
echo $form->end('ログイン');

モデルで必須項目に設定した項目のラベルが太字と*印(アスタリスク)で表示されています。
注意書きで「*印は必須項目です」と書こうとしたのですが、CSSを良く見ると*は:after疑似クラスで表示されている模様。
/* cake.generic.css L269 */
form .required label:after {
 color: #e32;
 content: '*';
 display:inline;
}
これではIE6はもちろんの事、IE7でも*が表示されません。
IE7以前で*を表示するなら別の方法を考えないといけませんね。
CSSからcontent: '*';を削除して、必須のラベルに手動で*を表示するとか。

CSS2.1に完全準拠していないブラウザからのアクセスを想定するサイトを構築する際には、ちょっと注意しましょう。

いっその事「IE7以前はサポート外です」と表示するか(笑)

(余談)
「FormHelperが出力する必須項目*について」というタイトルにしましたが、*は別にFormヘルパーが出力してるわけでは無いです。
<div class="input text required">というタグを出力しているだけです。
完全にcake.generic.cssの話ですが、私は最初、*印はFormヘルパーが出力していると勘違いしたので、こんなタイトルにしました。

人気のエントリー