「CSS」カテゴリーアーカイブ

Formの改行に悩む

Webページでformを扱っていると、</form>の後に改行がついてしまうのにいつもてこずってしまう。特に複数のformの複数のsubmitボタンを並べたいときに苦労する。

例えば、
<form>
<input type="submit">
</form>
<form>
<input type="submit">
</form>
<form>
<input type="submit">
</form>
こんな感じでてきとーに書いてしまうと、
[ボタン]
[ボタン]
[ボタン]
って感じになってしまう。これをなんとか
[ボタン][ボタン][ボタン]
にしたいわけだ。

大まかに、対策としては2つあって、1つはスタイルシートで対処する方法。
<form style="margin: 0px; float: left;">
<input type="submit">
</form>
<form style="margin: 0px; float: left;">
<input type="submit">
</form>
<form style="margin: 0px; float: left;">
<input type="submit">
</form>
といった感じにする。これだとPCのブラウザで見る限りはうまく
[ボタン][ボタン][ボタン]
になっているはず。ところが、ケータイ(i-mode)ではまだ縦に並んでいる・・・

根本的に対処するにはコードを変える必要があって、これがもう一つの対処法だけど、
<form>
<input type="submit" name="hoge1" value="hoge1">
<input type="submit" name="hoge2" value="hoge2">
<input type="submit" name="hoge3" value="hoge3">
</form>
のように一つのformにまとめてしまう方法。これだと苦も無くボタンは横並び
[ボタン][ボタン][ボタン]
になるし、ケータイで見ても横に並んでいる。ただ、この方法だとformが一つだからsubmitの送り先が一つになってしまう。よって、送り先スクリプトで処理を分岐しないといけないし、重い処理が複数あるときは送り先が大混乱してしまうかもしれない。

と言っても、なるべく後者の方法で頑張るのが一番素直な対処法なんだろうな。