• 基本的なサンプル
• インラインフォーム
• 水平フォーム
• サポートされるフォーム要素
• 静的なフォーム要素
• フォーカス状態
• 無効状態
• 読み取り専用状態
• 検証
• サイズ制御
• ヘルプテキスト

基本的なサンプル

個々のフォーム要素は、グローバルなスタイル設定の影響を自動的に受けます。 全ての.form-controlが付くテキストの<input>、<textarea>と<select>要素は、 デフォルトでwidth: 100%が設定されます。 .form-groupに囲まれたラベルとフォーム要素は適切なスペースを設けます。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

form-groupをinput-groupと混同しないでください
form-groupとinput-groupを直接混同することはしないでください。 代わりに、form-groupの内部にinput-groupを入れ子にしてください。

インラインフォーム

フォーム要素を左寄せ・インラインブロックにするために、 フォームに.form-inline(<form>である必要はありません)を追加します。 これは、少なくとも768pxの幅のあるビューポートのフォームにのみ適用されます。

幅のカスタマイズが必要?
Bootstrapのデフォルトでは、inputとselectにはwidth: 100%が適用されます。 インラインフォーム内ではwidth: auto;にリセットされるので、 複数のフォーム要素は同じライン上に並びます。 レイアウトに応じて、追加でカスタム幅を要求することができます。

常にラベルを用意すること
スクリーンリーダーにとって、各inputにラベルが含まれていない事は問題になります。 これらのインラインフォームでは、.sr-onlyクラスを使用してラベルを隠すことが可能です。 支援技術のために、ラベルを提供する他に、 aria-labelやaria-labelledby、またはtitle属性を提供する方法も存在します。 もしこれらが提供されないと、スクリーンリーダーはplaceholder属性があれば、それを頼るかもしれません。 ただし、placeholderを他のラベリングの代わりに使用することは賢明とは言えませんので注意してください。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平フォーム

フォーム(<form>である必要はありません)へ.form-horizontalを追加することで水平レイアウトとなり、 その内部のフォーム要素のラベルとグループを整列(align)させるには、Bootstrapに予め定義されているグリッドクラスを使用してください。 そのような変更を行えば.form-groupはグリッド行のように動作するため、.rowは不要です。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

サポートされるフォーム要素

標準でサポートされるフォーム要素は Examples of standard form controls supported in an example form layout.

input

多くの一般的なフォーム要素は、テキストベースのinputフィールドになります。 HTML5を含む全ての型がサポートされます。 text、password、datetime、datetime-local、date month、time、week、number、email url、search、tel、color

type宣言の必要性
typeが適切に宣言されてさえいれば、inputだけはそれだけでスタイルが適用されます。

<input type="text" class="form-control" placeholder="Text input">

inputグループ
textベースの<input>の前または後ろに、統合されるテキストまたはボタンを追加するには、 inputグループコンポーネントを確認してください。

textarea

複数行のテキストをサポートするフォーム要素です。 必要に応じて、rows属性を変更してください。

<textarea class="form-control" rows="3"></textarea>

checkboxとradio

checkbosはリストから1つまたは幾つかの項目を選択し、 radioは多くの項目から1つだけ選択します。

disabled属性のcheckboxまたはradioには、ふさわしいスタイルが適用されます。 また、.radio、.radio-inline、.checkbox、.checkbox-inline、<fieldset>に.disabledクラスを追加すると、 checkboxまたはradioの<label>はユーザーがhoverすると"not-allowed(許可しない)"のカーソルを表示します。

デフォルト(縦積み)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

インラインのcheckboxとradio

同じライン上にcheckboxやradioを並べたい場合は、 .checkbox-inlineまたは.radio-inlineクラスを使用します。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ラベル無しのcheckboxとradio

万が一、<label>内にテキストを配置するべきでは無いという場合は、 そのinput要素はあなたの期待通りに配置されます。 現在は非インラインのcheckboxとradioでのみ動作します。 依然として支援技術(例えば、aria-labelを使用して)のために、 ラベルのフォーム要素が提供されることを忘れないで下さい。

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

select

多くのネイティブ(具体的にはSafariとChrome)なselect要素は、 border-radiusプロパティで修正することが出来ない角丸を持ちます。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

multiple属性を持つ<select>のフォーム要素は、 デフォルトで複数のoptionが表示されます。

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

静的なフォーム要素

フォーム内のラベルの隣にプレーンなテキストを配置する必要がある場合、 <p>に対して.form-control-staticを使用します。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

フォーカス状態

いくつかのフォーム要素のアウトラインのデフォルトスタイルを削除し、 そこに:focus時のbox-shadowを適用しています。

デモ:focus状態
上記の例のinputは.form-controlの:focus状態をデモンストレーションするため、 カスタマイズされたスタイルを使用しています。

無効状態

inputにdisabled属性を追加して、ユーザー・インターフェースを保護します。 disabledされたinputはグレーアウトの状態になり、カーソルは"not-allowed"になります。

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

fieldsetの無効化

<fieldset>にdisabled属性を追加すると、 <fieldset>内の全てのフォーム要素を無効化します。

クロスブラウザ互換性
Bootstrapは全てのブラウザでこれらのスタイルを適用する一方で、 IE11以下では<fieldset>のdisabled属性を完全にはサポートしません。 これらのブラウザのfieldsetに対しては、JavaScriptで無効化を行うようにしてください。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

読み取り専用状態

inputへreadonly真偽値を追加すると、inputの値は変更されないように保護されます。 読み取り専用のinputはグレーアウト(disabledのinputのように)されますが、カーソルは標準のものが維持されます。

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

検証

Bootstrapにはフォーム要素のエラー・警告・成功を表す検証のスタイルが含まれています。 使用するには親要素に.has-warning、.has-error、.has-successを追加します。 これらの要素内の.control-label、.form-control、.help-blockが、検証のスタイルを受け付けます。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

任意のアイコンと付与

.has-feedback属性と右のアイコンを追加することで、任意のフィードバックアイコンを追加することもできます。

フィードバックアイコンは、テキストの<input class="form-control">要素でのみ動作します。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

水平とインラインフォームの任意のアイコン

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

非表示の.sr-onlyラベルを使用したアイコン

フォーム要素の<label>を隠すために.sr-onlyを使用した場合(aria-label属性のようなラベルオプションではなく)、 Bootstrapは自動的に追加されたアイコンの位置を調整してくれます。

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

サイズ制御

.input-lgのようなクラスを使用して高さ(height)を設定し、 .col-lg-*のようなグリッドカラムのクラスを使用して幅(width)を設定します。

高さのサイズ

ボタンのサイズにマッチする、より高いまたは低いフォーム要素を作成します。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平フォームグループのサイズ

.form-group-lgまたは.form-group-smを追加することで、 .form-horizontal内のラベルとフォーム要素のサイズを変更することができます。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

カラムのサイズ変更

グリッドカラムまたはカスタム親要素でinputを囲むと、簡単に希望するwidth(幅)にすることができます。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ヘルプテキスト

フォーム要素のためのブロック(レベル)要素のヘルプテキストです。

フォーム要素と関連付くヘルプテキスト
ヘルプテキストはaria-describedby属性を使用することで、 明示的にフォーム要素に関連付けられるべきです。 こうすることでユーザーがフォーム要素へフォーカスまたは入力する際に、 スクリーンリーダーのような支援技術がこのヘルプテキストの内容を通知してくれるようになります。

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

 Back to top