Bootstrapチュートリアル -インプット-

Bootstrapは次のフォームコントロールをサポートしています。

入力項目

Bootstrapは、メールアドレス、URL、検索テキスト、日付等のすべてのHTML5入力タイプをサポートします。
注：型が正しく宣言されていない場合、入力はスタイリングされません。
次の例では、テキスト入力フィールドとパスワード入力フィールドを持つフォームを作成します。

<div class="form-group">
  <label for="usr">ユーザー名:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">パスワード:</label>
  <input type="password" class="form-control" id="pwd">
</div>

テキストエリア

<div class="form-group">
  <label for="comment">コメント:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

チェックボックス

チェックボックスは、ユーザーがプリセットオプションのリストから任意の数のオプションを選択したい場合に使用されます。
次の例には3つのチェックボックスがあります。最後のオプションは無効です。

<div class="checkbox">
  <label><input type="checkbox" value="">オプション 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">オプション 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>オプション 3</label>
</div>

同じ行にチェックボックスを表示する場合は、 .checkbox-inline クラスを使用します。

<label class="checkbox-inline"><input type="checkbox" value="">オプション 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">オプション 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">オプション 3</label>

ラジオボタン

ラジオボタンは、ユーザーにプリセットオプションのリストから1つのオプションを選択させたい場合に使用されます。
次の例には3つのラジオボタンが含まれています。最後のオプションは無効です。

<div class="radio">
  <label><input type="radio" name="optradio">オプション 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">オプション 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>オプション 3</label>
</div>

ラジオボタンを同じ行に表示する場合は、 .radio-inline クラスを使用します。

<label class="radio-inline"><input type="radio" name="optradio">オプション 1</label>
<label class="radio-inline"><input type="radio" name="optradio">オプション 2</label>
<label class="radio-inline"><input type="radio" name="optradio">オプション 3</label>

セレクトリスト/コンボボックス

選択リストは、ユーザーが複数のオプションから選択できるようにする場合に使用されます。

<div class="form-group">
  <label for="sel1">選択リスト:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

<div class="form-group">
  <select multiple class="form-control" id="sel2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>