---
title: Twitter BootstrapでのFormの書き方
tags: []
categories: ["Web", "CSS", "Bootstrap"]
date: 2011-11-23T05:42:39Z
updated: 2011-11-23T05:42:39Z
---

**最新のBootstrap2.0では書き方が変わりましたので↓のは使えません。。**
代わりにこちらの[ツール][1]をどうぞ(サンプルが仕様ですｗ)。
<hr>
Bootstrapの[form][2]の書き方メモ。bootstrapのページだとソース見ながらじゃないと分かりにくいのでまとめる。

### テキストフィールド
#### コード
    <div class="clearfix">
        <label for="xlInput">X-Large input</label>
        <div class="input">
            <input class="xlarge" id="xlInput"
                name="xlInput" size="30" type="text">
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="xlInput">X-Large input</label>
        <div class="input">
            <input class="xlarge" id="xlInput"
                name="xlInput" size="30" type="text">
        </div>
    </div>
</form>

### セレクト
#### コード
    <div class="clearfix">
        <label for="normalSelect">Select</label>
        <div class="input">
            <select name="normalSelect"
                id="normalSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="normalSelect">Select</label>
        <div class="input">
            <select name="normalSelect"
                id="normalSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
</form>

### マルチセレクト
#### コード
    <div class="clearfix">
        <label for="multiSelect">Multiple select</label>
        <div class="input">
            <select class="medium" size="5"
                multiple="multiple" name="multiSelect"
                id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="multiSelect">Multiple select</label>
        <div class="input">
            <select class="medium" size="5"
                multiple="multiple" name="multiSelect"
                id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
</form>

### 編集不可なテキストフィールド
#### コード
    <div class="clearfix">
        <label>Uneditable input</label>
        <div class="input">
            <span class="uneditable-input">Some
                value here</span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label>Uneditable input</label>
        <div class="input">
            <span class="uneditable-input">Some
                value here</span>
        </div>
    </div>
</form>

### 使用不可なテキストフィールド
#### コード
    <div class="clearfix">
        <label for="disabledInput">Disabled
            input</label>
        <div class="input">
            <input class="xlarge disabled"
                id="disabledInput" name="disabledInput"
                size="30" type="text"
                placeholder="Disabled input here… carry on."
                disabled="">
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="disabledInput">Disabled
            input</label>
        <div class="input">
            <input class="xlarge disabled"
                id="disabledInput" name="disabledInput"
                size="30" type="text"
                placeholder="Disabled input here… carry on."
                disabled="">
        </div>
    </div>
</form>

### 使用不可なテキストエリア
#### コード
    <div class="clearfix">
        <label for="disabledInput">Disabled
            textarea</label>
        <div class="input">
            <textarea class="xxlarge" name="textarea"
                id="textarea" rows="3" disabled=""></textarea>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="disabledInput">Disabled
            textarea</label>
        <div class="input">
            <textarea class="xxlarge" name="textarea"
                id="textarea" rows="3" disabled=""></textarea>
        </div>
    </div>
</form>
### エラーのあるテキストフィールド
#### コード
    <div class="clearfix error">
        <label for="errorInput">Input with error</label>
        <div class="input">
            <input class="xlarge error" id="errorInput"
                name="errorInput" size="30" type="text">
            <span class="help-inline">Small
                snippet of help text</span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix error">
        <label for="errorInput">Input with error</label>
        <div class="input">
            <input class="xlarge error" id="errorInput"
                name="errorInput" size="30" type="text">
            <span class="help-inline">Small
                snippet of help text</span>
        </div>
    </div>
</form>
### OKなテキストフィールド
#### コード
    <div class="clearfix success">
        <label for="successInput">Input with
            success</label>
        <div class="input">
            <input class="xlarge error"
                id="successInput" name="successInput"
                size="30" type="text"> <span
                class="help-inline">Success!</span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix success">
        <label for="successInput">Input with
            success</label>
        <div class="input">
            <input class="xlarge error"
                id="successInput" name="successInput"
                size="30" type="text"> <span
                class="help-inline">Success!</span>
        </div>
    </div>
</form>
### 警告のあるテキストフィールド
#### コード
    <div class="clearfix warning">
        <label for="warningInput">Input with
            warning</label>
        <div class="input">
            <input class="xlarge error"
                id="warningInput" name="warningInput"
                size="30" type="text"> <span
                class="help-inline">Ruh roh!</span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix warning">
        <label for="warningInput">Input with
            warning</label>
        <div class="input">
            <input class="xlarge error"
                id="warningInput" name="warningInput"
                size="30" type="text"> <span
                class="help-inline">Ruh roh!</span>
        </div>
    </div>
</form>
### 先頭に文字があるテキストフィールド
#### コード
    <div class="clearfix">
        <label for="prependedInput">Prepended
            text</label>
        <div class="input">
            <div class="input-prepend">
                <span class="add-on">@</span> <input
                    class="medium" id="prependedInput"
                    name="prependedInput" size="16"
                    type="text">
            </div>
            <span class="help-block">Here's some
                help text</span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="prependedInput">Prepended
            text</label>
        <div class="input">
            <div class="input-prepend">
                <span class="add-on">@</span> <input
                    class="medium" id="prependedInput"
                    name="prependedInput" size="16"
                    type="text">
            </div>
            <span class="help-block">Here's some
                help text</span>
        </div>
    </div>
</form>
### 先頭にチェックボックスのあるテキストフィールド
#### コード
    <div class="clearfix">
        <label for="prependedInput2">Prepended
            checkbox</label>
        <div class="input">
            <div class="input-prepend">
                <label class="add-on"><input
                    type="checkbox" name="" id=""
                    value=""></label> <input
                    class="mini" id="prependedInput2"
                    name="prependedInput2" size="16"
                    type="text">
            </div>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="prependedInput2">Prepended
            checkbox</label>
        <div class="input">
            <div class="input-prepend">
                <label class="add-on"><input
                    type="checkbox" name="" id=""
                    value=""></label> <input
                    class="mini" id="prependedInput2"
                    name="prependedInput2" size="16"
                    type="text">
            </div>
        </div>
    </div>
</form>
### 末尾にチェックボックスのあるテキストフィールド
#### コード
    <div class="clearfix">
        <label for="appendedInput">Appended
            checkbox</label>
        <div class="input">
            <div class="input-append">
                <input class="mini" id="appendedInput"
                    name="appendedInput" size="16"
                    type="text"> <label
                    class="add-on active"><input
                    type="checkbox" name="" id=""
                    value="" checked="checked"></label>
            </div>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="appendedInput">Appended
            checkbox</label>
        <div class="input">
            <div class="input-append">
                <input class="mini" id="appendedInput"
                    name="appendedInput" size="16"
                    type="text"> <label
                    class="add-on active"><input
                    type="checkbox" name="" id=""
                    value="" checked="checked"></label>
            </div>
        </div>
    </div>
</form>
### ファイル
#### コード
    <div class="clearfix">
        <label for="fileInput">File input</label>
        <div class="input">
            <input class="input-file" id="fileInput"
                name="fileInput" type="file">
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="fileInput">File input</label>
        <div class="input">
            <input class="input-file" id="fileInput"
                name="fileInput" type="file">
        </div>
    </div>
</form>
### リスト形式のチェックボックス
#### コード
    <div class="clearfix">
        <label id="optionsCheckboxes">List of
            options</label>
        <div class="input">
            <ul class="inputs-list">
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option1"> <span>Option
                            one is this and that—be sure
                            to include why it’s great</span>
                </label></li>
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option2"> <span>Option
                            two can also be checked and
                            included in form results</span>
                </label></li>
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option2"> <span>Option
                            three can—yes, you guessed
                            it—also be checked and
                            included in form results.
                            Let's make it super long so
                            that everyone can see how it
                            wraps, too.</span>
                </label></li>
                <li><label class="disabled">
                        <input type="checkbox"
                        name="optionsCheckboxes"
                        value="option2" disabled="">
                        <span>Option four cannot
                            be checked as it is
                            disabled.</span>
                </label></li>
            </ul>
            <span class="help-block"> <strong>Note:</strong>
                Labels surround all the options for much
                larger click areas and a more usable
                form.
            </span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label id="optionsCheckboxes">List of
            options</label>
        <div class="input">
            <ul class="inputs-list">
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option1"> <span>Option
                            one is this and that—be sure
                            to include why it’s great</span>
                </label></li>
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option2"> <span>Option
                            two can also be checked and
                            included in form results</span>
                </label></li>
                <li><label> <input
                        type="checkbox"
                        name="optionsCheckboxes"
                        value="option2"> <span>Option
                            three can—yes, you guessed
                            it—also be checked and
                            included in form results.
                            Let's make it super long so
                            that everyone can see how it
                            wraps, too.</span>
                </label></li>
                <li><label class="disabled">
                        <input type="checkbox"
                        name="optionsCheckboxes"
                        value="option2" disabled="">
                        <span>Option four cannot
                            be checked as it is
                            disabled.</span>
                </label></li>
            </ul>
            <span class="help-block"> <strong>Note:</strong>
                Labels surround all the options for much
                larger click areas and a more usable
                form.
            </span>
        </div>
    </div>
</form>
### 日付範囲
#### コード
    <div class="clearfix">
        <label>Date range</label>
        <div class="input">
            <div class="inline-inputs">
                <input class="small" type="text"
                    value="May 1, 2011"> <input
                    class="mini" type="text"
                    value="12:00am"> to <input
                    class="small" type="text"
                    value="May 8, 2011"> <input
                    class="mini" type="text"
                    value="11:59pm"> <span
                    class="help-block">All times
                    are shown as Pacific Standard Time
                    (GMT -08:00).</span>
            </div>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label>Date range</label>
        <div class="input">
            <div class="inline-inputs">
                <input class="small" type="text"
                    value="May 1, 2011"> <input
                    class="mini" type="text"
                    value="12:00am"> to <input
                    class="small" type="text"
                    value="May 8, 2011"> <input
                    class="mini" type="text"
                    value="11:59pm"> <span
                    class="help-block">All times
                    are shown as Pacific Standard Time
                    (GMT -08:00).</span>
            </div>
        </div>
    </div>
</form>

### テキストエリア
#### コード
    <div class="clearfix">
        <label for="textarea">Textarea</label>
        <div class="input">
            <textarea class="xxlarge" id="textarea2"
                name="textarea2" rows="3"></textarea>
            <span class="help-block"> Block of
                help text to describe the field above if
                need be. </span>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label for="textarea">Textarea</label>
        <div class="input">
            <textarea class="xxlarge" id="textarea2"
                name="textarea2" rows="3"></textarea>
            <span class="help-block"> Block of
                help text to describe the field above if
                need be. </span>
        </div>
    </div>
</form>
### リスト形式のラジオボックス
#### コード
    <div class="clearfix">
        <label id="optionsRadio">List of options</label>
        <div class="input">
            <ul class="inputs-list">
                <li><label> <input
                        type="radio" checked=""
                        name="optionsRadios"
                        value="option1"> <span>Option
                            one is this and that—be sure
                            to include why it’s great</span>
                </label></li>
                <li><label> <input
                        type="radio"
                        name="optionsRadios"
                        value="option2"> <span>Option
                            two can is something else
                            and selecting it will
                            deselect options 1</span>
                </label></li>
            </ul>
        </div>
    </div>
#### 表示
<form>
    <div class="clearfix">
        <label id="optionsRadio">List of options</label>
        <div class="input">
            <ul class="inputs-list">
                <li><label> <input
                        type="radio" checked=""
                        name="optionsRadios"
                        value="option1"> <span>Option
                            one is this and that—be sure
                            to include why it’s great</span>
                </label></li>
                <li><label> <input
                        type="radio"
                        name="optionsRadios"
                        value="option2"> <span>Option
                            two can is something else
                            and selecting it will
                            deselect options 1</span>
                </label></li>
            </ul>
        </div>
    </div>
</form>
### ボタン
#### コード
    <div class="actions">
        <input type="submit" class="btn primary"
            value="Save changes">&nbsp;
        <button type="reset" class="btn">Cancel</button>
    </div>
#### 表示
<form>
    <div class="actions">
        <input type="submit" class="btn primary"
            value="Save changes">&nbsp;
        <button type="reset" class="btn">Cancel</button>
    </div>
</form>


  [1]: http://st.ik.am/form-maker/form/
  [2]: http://twitter.github.com/bootstrap/#forms