インプット2

静的コントロール

フォームラベルの横に静的なプレーンテキストを挿入する必要がある場合は、 <p> 要素で .form-control-static クラスを使用します。

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>

入力グループ

.input-group クラスは、アイコン、テキスト、またはボタンの前後に「ヘルプテキスト」として追加することによって、入力を強化するためのコンテナです。
.input-group-addon クラスは、入力フィールドの隣にアイコンまたはヘルプテキストを添付します。

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="パスワード">
  </div>
  <div class="input-group">
    <span class="input-group-addon">入力</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="追加情報">
  </div>
</form>

.input-group-btn はコントロールの隣にボタンを付けます。これはよく検索バーと共に使用されます。

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="検索">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>

コントロールの状態

フォーカス - コントロールにフォーカスがあたるとボックスシャドウが適用されます。
使用不可 - 入力フィールドを無効にします。
フィールドセット使用不可 - フィールドセット内のすべてのコントロールを無効にします。
読み取り専用 - readonly属性を入力に追加します。
検証ステート - Bootstrapには、エラー、警告、および成功メッセージの検証スタイルが含まれています。使用するには、 .has-warning 、 .has-error 、または .has-success を親要素に追加します。
アイコン - .has-feedback クラスを使用してフィードバックアイコンを追加することができます。
隠しラベル - .sr-only クラスを追加してラベルを隠します。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">フォーカス</label>
    <div class="col-sm-9">
      <input class="form-control" id="focusedInput" type="text" value="クリックしてフォーカス">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-3 control-label">使用不可</label>
    <div class="col-sm-9">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-3 control-label">フィールドセット使用不可</label>
      <div class="col-sm-9">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-3 control-label"></label>
      <div class="col-sm-9">
        <select id="disabledSelect" class="form-control">
          <option>選択不可セレクト</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-3 control-label" for="inputSuccess">
    success and icon</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-3 control-label" for="inputWarning">
    warning and icon</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-3 control-label" for="inputError">
    error and icon</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>