とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > フォーム

フォーム

テキスト・パスワード・テキストボックス

テキスト・パスワード・テキストボックスでは、入力項目のグループに .form-group を、入力部品に .form-control を指定します。

Sample
Code
<div class="form-group">
  <label for="text1">Text:</label>
  <input type="text" id="text1" class="form-control">
</div>
<div class="form-group">
  <label for="passwd1">Password:</label>
  <input type="password" id="passwd1" class="form-control">
</div>
<div class="form-group">
  <label for="textarea1">Textarea:</label>
  <textarea id="textarea1" class="form-control"></textarea>
</div>

セレクト部品

セレクト部品の場合は、.form-control または .custom-select を用います。

Sample
Code
<div class="form-group">
  <label for="select1a">Select:</label>
  <select id="select1a" class="form-control">
    <option>Select A</option>
    <option>Select B</option>
  </select>
</div>
<div class="form-group">
  <label for="select1b">Select:</label>
  <select id="select1b" class="costom-select">
    <option>Select A</option>
    <option>Select B</option>
  </select>
</div>

ファイル

ファイル部品の場合は .form-control の代わりに .form-control-file を指定します。

Sample
Code
<div class="form-group">
  <label for="file1">File:</label>
  <input type="file" id="file1" class="form-control-file">
</div>

レンジ

レンジ部品の場合は .form-control-range を指定します。

Sample
Code
<div class="form-group">
  <label for="range1">Range:</label>
  <input type="range" id="range1" class="form-control-range">
</div>

チェックボックス

チェックボックスの場合は .form-check, .form-check-input, .form-check-label を用います。

Sample
Code
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1a" checked>
  <label class="form-check-label" for="check1a">Check A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1b">
  <label class="form-check-label" for="check1b">Check B</label>
</div>

チェックボックスやラジオボタンをラベル無しで表示する場合は .position-static を指定します。

Sample
Code
<div class="form-check">
  <input class="form-check-input position-static" type="checkbox">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="checkbox">
</div>

ラジオボタン

ラジオボタンの場合も同様、.form-check, .form-check-input, .form-check-label を用います。

Sample
Code
<div class="form-check">
  <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked>
  <label class="form-check-label" for="radio1a">Check A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radio1" id="radio1b">
  <label class="form-check-label" for="radio1b">Check B</label>
</div>

インラインフォーム

.form-inline は、横に並ぶインラインフォームを表示します。

Sample
Code
<form class="form-inline">
    :
</form>

チェックボックスやラジオボタンの場合は、.form-check-inline を指定します。

Sample
Code
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2a" value="A">
  <label class="form-check-label" for="radio2a">A</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2b" value="B">
  <label class="form-check-label" for="radio2b">B</label>
</div>

ラベルの横置並べ

.row.col-sm-2 などを用いて、ラベルとフォーム部品を横並びにすることができます。下記の例では *-sm-* を用いているので、xs サイズでは縦並び、sm サイズ以上の時に横並びになります。

Sample
Code
<form>
  <div class="form-group row">
    <label for="text3a" class="col-sm-2 col-form-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" id="text3a" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label for="text3b" class="col-sm-2 col-form-label">Last name</label>
    <div class="col-sm-10">
      <input type="text" id="text3b" class="form-control">
    </div>
  </div>
</form>

フォームの横並べ

フォームを横に並べるには、.form-row.col-sm-6 などを用います。

Sample
Code
<div class="form-row">
  <div class="form-group col-sm-6">
    <label for="text4a">First name</label>
    <input type="text" class="form-control" id="text4a" placeholder="First name">
  </div>
  <div class="form-group col-sm-6">
    <label for="text4b">Last name</label>
    <input type="text" class="form-control" id="text4b" placeholder="Last name">
  </div>
</div>

フォームサイズ

.form-control-lg, .col-form-label-lg は少し大きめのコントロールとラベルを、.form-control-sm, .col-form-label-sm は少し小さめのコントロールとラベルを表示します。

Sample
Code
<div class="form-group">
  <label for="text5a" class="col-form-label-lg">Large size</label>
  <input class="form-control form-control-lg" type="text" id="text5a" placeholder="Large size">
</div>
<div class="form-group">
  <label for="text5b">Normal size</label>
  <input class="form-control" type="text" id="text5b" placeholder="Normal size">
</div>
<div class="form-group">
  <label for="text5c" class="col-form-label-sm">Small size</label>
  <input class="form-control form-control-sm" type="text" id="text5c" placeholder="Small size">
</div>

リードオンリー

リードオンリーの部品を表示するには readonly 属性を指定します。枠線を表示しないようにするには、.form-control-plaintext クラスを追加します。

Sample
Code
<input type="text" readonly class="form-control" value="Readonly">
<input type="text" readonly class="form-control form-control-plaintext" value="Readonly plaintext">

インプットグループ

.input-group, .input-group-text, .input-group-prepend, .input-group-append を用いて、下記の様なインプットグループを表示することができます。

Sample
http://
.example.com/
Code
<div class="input-group">
  <div class="input-group-prepend"><div class="input-group-text">http://</div></div>
  <input type="text" class="form-control">
  <div class="input-group-append"><div class="input-group-text">.example.com/</div></div>
</div>

Copyright (C) 2015-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/forms.html