twitter-bootstrap
フォーム

基本形

フォームコントロールには特別なクラスを使用せずにデフォルトスタイルがいくつかあります。

ただし、ラベルとコントロールを.form-groupタグで.form-group 、最適な間隔を設定することができます。

<form>
  <div class="form-group">
    <label for="input-email">Email address</label>
    <input type="email" class="form-control" id="input-email" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="input-password">Password</label>
    <input type="password" class="form-control" id="input-password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

読み取り専用および無効化された入力

readonly属性を追加して、ユーザー入力を防止します。読み取り専用フィールドは編集できません

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

入力フィールドを無効にするには、 disabled属性を追加しdisabled 。不安定なフィールドは編集することもできません。カーソルが変更され、目立つようになります。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>