BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。
結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。
事前に知っておきたい
Formをいじるまえに知っておきたいこととしては、
- レイアウトにより（inline, horizontal）、マークアップが異なる。
- text系(input,textarea,select)と、その他のものは扱いが違う。
- horizontalではform-groupがrowと同じ概念になる（なので要素をcol-xで分割）
の３つ。
私は、いろいろな差をBootstrapが吸収してくれるはずという先入観により、遠回りをしました。
素の状態
container以外は何もbootstrapの要素はない。
<div class="container">
<form>
<label>name</label>
<input type="text" name="email">
<label>password</label>
<input type="text" name="password">
<input type="checkbox">remember
<button type="submit">ログイン</button>
</form>
</div>
これは、下記のようにレンダリングされる。
素の状態です。
Bootstrapとしての基本形
Bootstrapで基本的なformを作る際、
- text系はlabelと一緒に<div class="form-group">で囲む。
- text系はclass="form-control"を定義する。
- checkbox,radiobutton,submit等はform-groupでは囲まない(horizontalでは囲む）。
というのがある。こんな感じ。
<div class="container">
<form>
<div class="form-group">
<label>name</label>
<input type="text" name="email" class="form-control">
</div>
<div class="form-group">
<label>password</label>
<input type="text" name="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox">remember
</label>
</div>
<button type="submit">ログイン</button>
</form>
</div>
さらに、
- checkboxは<div class="checkbox">で囲む。
- checkboxは<lavel>で囲む（うーん）。これ入れないと位置がずれる（インデントの位置をlabelと同じにする）。
などに留意する必要がある。
これは、このようにレンダリングされます。
多くの場合、これで事足ります。text系は、with=100%になる。
ちなみに、
<div class="container">
<form>
<div class="form-group">
<label>name</label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>password</label>
<input type="text" name="password">
</div>
<div class="checkbox">
<!-- <label> -->
<input type="checkbox">remember
<!-- </label> -->
</div>
<button type="submit">ログイン</button>
</form>
</div>
このように.form-controlを設定せず、checkboxに<label>を定義しないと、
と、グチャグチャになってしまいます。
基本形におけるinputサイズの設定
通常？はsizeですが、どうやらsizeは無視されるようです。sytle="width:200px;"は効きます。
めんどいので、inline styleでもいいのですが、Bootstrapらしくcolumnで定義してみます。
columnを使うにはrowが必要なので、rowを適切な箇所に定義します。
例えば、
<div class="container">
<form>
<div class="form-group">
<label>name</label>
<div class="row">
<div class="col-xs-4">
<input type="text" name="email" class="form-control" size="30">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-2">
<label>password</label>
</div>
<div class="col-xs-4">
<input type="text" name="password" class="form-control">
</div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox">remember
</label>
</div>
<button type="submit" class="btn btn-default">ログイン</button>
</form>
</div>
emailの方は、単にinputのサイズを変えるパターン。これは、こうなる。
passwordの方は、labelとinput等を並べる方法。ただ、高さ等が合わない。。これは、horizontalで解決する方が早い。
縦のサイズは.input-smで小さくなる。
正直、horizontalとかではない普通のinput等の制御はレスポンシブとかなければinline styleがいいのでは？という結論。
radio, checkbox
上記の例では、rememberという、1行で収まるパターンだった。が、普通は、性別で男女を聞くという複数のパターンとなる。
これが、またまた厄介である。
結論から言えば、bootstrapのスタイルだけではどうしようもなく、<p>やら<b>やら、一般のタグと組み合わせてスタイルを整えることになる。
例えばこんな感じ。ただ、これはボタンが縦並びになる。通常は横並びにしたい。
<p><b>性別</b></p>
<div class="radio">
<label>
<input type="radio" name="gender" value="man"><b>男</b>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="woman"><b>女</b>
</label>
</div>
横並びにするにはradio-inlineなどと-inlineをつける。checkboxも基本同じ。
<p><b>性別</b></p>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="man"><b>男</b>
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="woman"><b>女</b>
</label>
</div>
そして.form-horizontal
rowを使わなくても、横並び、サイズの調整は.form-horizontalを使えば簡単にできる。
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2">name</label>
<div class="col-xs-5">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2">password</label>
<div class="col-xs-5">
<input type="text" name="password" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label>
<input type="checkbox">remember
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-default">送信</button>
</div>
</div>
</form>
</div>
一見複雑に見えるが、<div class="form-group">を<div class="row">だと思えば、なんでいちいちdivで囲まなければいけないかなど、理解し易い。
こうなる。
いちおう.form-inline
横並びにしたい場合は、<form class="form-inline>とする。
<div class="container">
<form class="form-inline">
<div class="form-group">
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<input type="text" name="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox">remember
</label>
</div>
<button type="submit" class="btn btn-default">送信</button>
</form>
</div>
これはこうなる。
inlineでテキストボックスのサイズはどう変えるのか？そのうち試す。まあ、inlineなので、inline stypeかな。
テキストボックスの縦サイズ
Bootstrapのテキストボックスはちとでかい。
テキストボックスの縦サイズは、.input-smで小さくなる。