table で form を構築して Ajax.Updater で部分的に更新させる場合は注意が必要

例えばお問い合わせフォームを作る時、以下のようになることがあると思います。

1
2
3
4
5

<form method="post">
<table>
<tr><th>名前</th><td><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10">

これは問題の無い場合です。しかし以下のようになると問題が発生します。問題が発生するというか、本来これは間違った書き方になるので問題が発生するしないに関わらずダメなんですが、通常どのブラウザでも問題なく表示されてしまうのでミスだということに気付けません。

1
2
3
4
5
6

<table>
<tr><th>名前</th><td><form method="post"><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10"></textarea><br />
<input type="submit" value="メール送信" /><input type="reset" value="クリア" /></form></td></tr>
</table>

しかし、上記のような間違った書き方をしているファイルを、Ajax.Updater で部分的に更新させるために別で読み込もうとすると IE Chrome Opera Safari などのブラウザでは問題なく表示されますが、Firefox ではレイアウトが崩壊するようになります。おそらく CSS が上手く適用されなくなるのが原因だと思われますがあくまで推測です。Firefox は真面目で本当に良い奴ですね。

Firefox にバグがあるわけではなく、Firefox が Ajax に上手く対応できていないわけではなく、自分が間違っているので　Firefox に怒らないでください。私は(Firefox にもバグあるじゃないか！と)怒ってしまったので後悔しています……。

関連記事

コメント

コメントは受け付けていません。