Help us understand the problem. What is going on with this article?

Bootstrap Form おさらい

More than 5 years have 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で小さくなる。

zaburo
こんにちは。自分用のメモをだらだら公開しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away