Bootstrap Form おさらい

  • 246
    Like
  • 1
    Comment
More than 1 year has passed since last update.

BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。
結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。

事前に知っておきたい

Formをいじるまえに知っておきたいこととしては、

  • レイアウトにより(inline, horizontal)、マークアップが異なる。
  • text系(input,textarea,select)と、その他のものは扱いが違う。
  • horizontalではform-groupがrowと同じ概念になる(なので要素をcol-xで分割)

の3つ。

私は、いろいろな差を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>

これは、下記のようにレンダリングされる。

form01

素の状態です。

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と同じにする)。

などに留意する必要がある。

これは、このようにレンダリングされます。

form03

多くの場合、これで事足ります。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>を定義しないと、

form02

と、グチャグチャになってしまいます。

基本形における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で小さくなる。

form04

正直、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で囲まなければいけないかなど、理解し易い。

こうなる。

form05

いちおう.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>

これはこうなる。

form06

inlineでテキストボックスのサイズはどう変えるのか?そのうち試す。まあ、inlineなので、inline stypeかな。

テキストボックスの縦サイズ

Bootstrapのテキストボックスはちとでかい。
テキストボックスの縦サイズは、.input-smで小さくなる。