Bootstrapでのformの基本的な書き方と注意点

<div class="form-horizontal">
    <form method="post" action="">
        <div class="form-group">
        <label for="lastname" class="col-xs-3 control-label">姓</label>
            <div class="col-md-3 col-xs-7">
                <input type="text" class="form-control input-sm" name="lastname" id="lastname" placeholder="姓">
            </div>
        </div>
        <div class="form-group">
        <label for="firstname" class="col-xs-3 control-label">名</label>
            <div class="col-md-3 col-xs-7">
                <input type="text" class="form-control input-sm" name="firstname" id="firstname" placeholder="名">
            </div>
        </div>
        <div class="form-group">
        <label for="email" class="col-xs-3 control-label">メールアドレス</label>
            <div class="col-md-3 col-xs-7">
                <input type="text" class="form-control input-sm" name="email" id="email" placeholder="メールアドレス">
            </div>
        </div>
        <div class="form-group">
        <label for="taste" class="col-xs-3 control-label">当店の料理はいかがでしたか？</label>
            <div class="col-md-6 col-xs-7">
                <input type="text" class="form-control input-sm" name="taste" id="taste" placeholder="">
        </div>
        <div class="form-group">
        <label for="other" class="col-xs-3 control-label">他にお気づきの点がございましたら、ご記入願います
。</label>
            <div class="col-md-6 col-xs-8">
                <textarea id="other" cols="50" rows="10" class="form-control input-sm" name="other"></textarea>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <input type="submit" class="btn btn-default" value="submit" />
            </div>
        </div>
        </div>
    </form>
</div><!-- form-horizontal -->

• .form-horizontal で水平レイアウトに。

• .form-group がある場合、.row を兼ねているため.rowは不要。

• .input-sm でフォームを小さく。

• label タグに .control-label も指定する。

• label input をまとまりにして .form-group を設定した div タグで覆うと、間隔を適度に保つ。

• inputに.form-contol を設定すると、幅が 100% に設定される。

• labelの表示を非表示にするには、labelへ.sr-only クラスを追加する。