Bootstrap によるレスポンシブ Web デザイン

フォームを使う

Webページの利用者が何らかのデータを入力して送信するときにはフォームを配置します．実際に利用者が入力したデータを受け取って処理をするためにはそのためのプログラムを記述する必要があります．ここでは，フォームのコントロールに Bootstrap のデザインを適用する方法を例示します．

テキストコントロール

Bootstrapではない場合

Bootstrap のクラスを適用しない場合は次のような表示になります．

index.html（抜粋）<form>
  <input type="text">
</form>

目次に戻る

クラスの設定

Bootstrap ではテキストコントロールに form-control クラスをつけるだけで表示が美しくなり，レスポンシブ化されます．つまり，ブラウザの幅が変化するとテキストコントロールの幅も自動的に変更されます．実際に文字列を入力できること試してください．

index.html（抜粋）<form>
  <input type="text" class="form-control">
</form>

目次に戻る

ボタンの配置

ボタンには btn クラスと btn-primary や btn-secondary などのクラスを設定します．これによってデザインが自動的に適用されます．入力された文字列を送信したいテキストコントロールには name 属性で名前をつけておきます．実際に文字列を入力して送信ボタンを押してください．そうすると，ブラウザのURLの最後に ?fullname1=入力した文字列 のように表示されているはずです．

index.html（抜粋）<form>
  <input type="text" name="fullname1" class="form-control">
  <button type="submit" class="btn btn-primary">送信</button>
  <button type="reset" class="btn btn-secondary">リセット</button>
</form>

目次に戻る

ラベルの設定

ラベルの設定方法は通常のHTMLと同様です．ラベルをつけるときには <label> タグを使います．このとき，<input> に id="..." を設定し，<label for="..."> のようにその id を指定することに注意してください．また id は同一ページ内で重複しないように設定しなければなりません．さらに，上の例ではテキストコントロールとボタンの空白がなく引っ付いて配置されています．次のようにそれぞれを <p> タグで囲んで段落として取り扱うことで，マージンを取る方法もあります（これ以外にもスタイルシートで調整する方法も考えられるでしょう）．

index.html（抜粋）<form>
  <p>
    <label for="name2">氏名</label>
    <input type="text" name="fullname2" id="name2" class="form-control">
  </p>
  <p>
    <button type="submit" class="btn btn-primary">送信</button>
  </p>
</form>

目次に戻る

form-groupの利用

form-group クラスを適用した div 要素でコントロールを囲うとボタンが幅広くなります．

index.html（抜粋）<form>
  <div class="form-group row">
    <label for="name3">氏名</label>
    <input type="text" name="fullname3" id="name3" class="form-control">
  </div>
  <div class="form-group row">
    <button type="submit" class="btn btn-primary">送信</button>
  </div>
</form>

目次に戻る

cardの利用

Bootstrap の card を使い，さらにレスポンシブ化させて次のようなデザインにすることもできます．ブラウザの幅を変化させて，幅が広いPCモードと狭いスマートフォンモードでどのようにレイアウトが変化するか確認してください．

index.html（抜粋）<div class="row justify-content-center">
  <div class="col-md-10">
    <div class="card">
      <div class="card-header">
        Cardを使う
      </div>
      <div class="card-body">
        <form>
          <div class="form-group row">
            <label for="name4" class="col-md-4 col-form-label text-md-end">氏名</label>
            <div class="col-md-6">
              <input type="text" name="fullname4" id="name4" class="form-control">
            </div>
          </div>
          <div class="form-group row">
            <label for="age4" class="col-md-4 col-form-label text-md-end">年齢</label>
            <div class="col-md-6">
              <input type="number" name="age4" id="age4" class="form-control">
            </div>
          </div>
          <div class="form-group row mb-0">
            <div class="col-md-6 offset-md-4 d-grid gap-2">
              <button type="submit" class="btn btn-primary btn-block">送信</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

目次に戻る

プレースホルダーの設定

ユーザが利用しやすいようにプレースホルダーを設定することは重要でしょう．

index.html（抜粋）<form>
  <label for="name5">氏名</label>
  <input type="text" name="fullname5" id="name5" placeholder="氏名を入力してください" class="form-control">
  <button type="submit" class="btn btn-primary btn-block">送信</button>
</form>

目次に戻る

値の設定

初期値の設定は value 属性で行います．

index.html（抜粋）<form>
  <label for="name6">氏名</label>
  <input type="text" name="fullname6" id="name6" placeholder="氏名を入力してください" value="神院 太郎" class="form-control">
  <button type="submit" class="btn btn-primary btn-block">送信</button>
</form>

目次に戻る

入力を必須にする

入力を必須にするには required="required" を設定します．なお，required="required" の required は属性で "required" は属性値です．属性名と属性値が同じものは「論理属性 (Boolean attributes)」と呼ばれ，論理属性は省略して次のように属性名だけ指定することができます．ユーザが何も入力せずに送信ボタンを押したらエラーが表示されます．ただし，空白文字だけ入力した場合でもデータが送信されてしまうので，データを処理するプログラム側で内容を検証する必要があります．

index.html（抜粋）<form>
  <label for="name7">氏名</label>
  <input type="text" name="name7" id="name7" placeholder="氏名を入力してください" required class="form-control">
  <button type="submit" class="btn btn-primary">送信</button>
</form>

目次に戻る

テキストエリア

複数行にわたる文字列の入力を受け付けたいときにはテキストエリアを使うと良いでしょう．テキストエリア高さは rows で指定します．また，初期値を指定するときには <textarea> ... </textarea> タグの中に入力します．

index.html（抜粋）<form>
  メッセージ
  <textarea rows="5" name="msg1" class="form-control">メッセージの入力</textarea>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

目次に戻る

チェックボックス

1個以上の選択肢について個別に On/Off を切り替えるためのコントロールとしてチェックボックスがあります．次のように入力するとチェックボックスを配置できますが，隣の文字列をクリック（タップ）しても On/Off を切り替えられず，切り替えるためにはチェックボックスそのものをクリック（タップ）しなけばなりません．これでは使い勝手が非常に悪いでしょう．また，Bootstrap ではチェックボックスに form-check-input クラスを追加すると良いでしょう（わずかにデザインが変わっていることに注意してください）．

index.html（抜粋）<form>
  <input type="checkbox" name="check11">オプション項目11（form-check-inputクラスなし）<br>
  <input type="checkbox" name="check12" class="form-check-input">オプション項目12（form-check-inputクラスあり）<br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

文字列をクリック（タップ）しても On/Off が切り替えられるようにするためには <label for="..."> を使います．このとき，チェックボックスに id="..." を設定して，その id を <label for="..."> にしていることに注意してください．さらに送信ボタンを押したときにどのようなパラメータが送信されて URL に含まれているかについて確認するようにしてください．また checked 属性を付加した項目はページ読み込み時点で選択されていることに注意してください．

index.html（抜粋）<form>
  <input type="checkbox" name="check21" id="check21" class="form-check-input">
  <label for="check21">オプション項目21</label><br>
  <input type="checkbox" name="check22" id="check22" class="form-check-input">
  <label for="check22">オプション項目22</label><br>
  <input type="checkbox" name="check23" id="check23" class="form-check-input" checked>
  <label for="check23">オプション項目23</label><br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

Bootstrap では switch も利用できます．これを利用するためには次の通り form-switch と role="switch" を指定する必要があります．同様に checked 属性を付加した項目はページ読み込み時点で選択されます．

index.html（抜粋）<form>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" name="check25" id="check25">
    <label class="form-check-label" for="check25">オプション項目25</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" name="check26" id="check26" checked>
    <label class="form-check-label" for="check26">オプション項目26</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" name="check27" id="check27">
    <label class="form-check-label" for="check27">オプション項目27</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

上では，スイッチだけでなくラベルをクリックして On/Off を切り替えることができます．しかしながら，スイッチの場合はスイッチを操作したときだけ On/Off が切り替わる方が直感的であり，また，リストグループを使ってラベルの右側にスイッチを配置することが多いようです．したがって，次のようにする方法も考えられます．なお，Bootstrap によって標準的なスタイリングされている部分をいくつか調整しています．具体的には On/Off の切り替えを調整するために，input 要素のid 属性と label 要素の for 属性を削除しています．また，スイッチを右に寄せてマージンやパディングを調整するために ps-0 （padding-start，つまり padding-left の意味），me-5（margin-end，つまり margin-right の意味），float-end （終端側へのフロート，つまり右寄せの意味）を設定しています．

index.html（抜粋）<form>
  <ul class="list-group">
    <li class="list-group-item">
      <div class="form-check form-switch ps-0">
        <label class="form-check-label me-5">オプション項目28</label>
        <input class="form-check-input float-end" type="checkbox" role="switch" name="check28">
      </div>
    </li>
    <li class="list-group-item">
      <div class="form-check form-switch ps-0">
        <label class="form-check-label me-5">オプション項目29</label>
        <input class="form-check-input float-end" type="checkbox" role="switch" name="check29" checked>
      </div>
    </li>
    <li class="list-group-item">
      <div class="form-check form-switch ps-0">
        <label class="form-check-label me-5">オプション項目30</label>
        <input class="form-check-input float-end" type="checkbox" role="switch" name="check30">
      </div>
    </li>
  </ul>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

なお，2023年12月には Safari の Technology Preview 185 で <input type="checkbox" switch> がサポートされました．今後，HTML だけで switch が利用できるようになるかもしれません．

目次に戻る

ラジオボタン

複数の選択肢の中から1つだけを選ぶようにするためにはラジオボタンコントロールを使用します．このとき，同じ name 属性を指定したコントロールが一つのグループになります．また，それぞれの選択肢には value 属性を指定することにも注意してください．チェックボックスと同様に Bootstrap の form-check-input クラスを利用すると良いでしょう．

index.html（抜粋）<form>
  <input type="radio" name="radio3" id="radio31" value="31" class="form-check-input">
  <label for="radio31">オプション項目31</label><br>
  <input type="radio" name="radio3" id="radio32" value="32" class="form-check-input">
  <label for="radio32">オプション項目32</label><br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

checked 属性を指定しておくと，ページ読み込み時に既定の選択肢が選ばれている状態になります．

index.html（抜粋）<form>
  <input type="radio" name="radio4" id="radio41" value="41" class="form-check-input" checked>
  <label for="radio41">オプション項目41（既定）</label><br>
  <input type="radio" name="radio4" id="radio42" value="42" class="form-check-input">
  <label for="radio42">オプション項目42</label><br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

目次に戻る

選択リスト

select コントロールを使うと，多数のリストから一つを選ぶことができます．

index.html（抜粋）<form>
  <select name="select5" class="form-control">
    <option value="51">オプション項目51</option>
    <option value="52">オプション項目52</option>
    <option value="53">オプション項目53</option>
    <option value="54">オプション項目54</option>
    <option value="55">オプション項目55</option>
  </select><br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

多数のリストから複数個を選択できるようにするには multiple 属性を指定します．このとき，マウスのドラッグで範囲を選択できます．あるいは始点を選択した後，Shift キーを押しながら終点をクリックして範囲を選択します．さらに，Ctrl（Mac では ⌘）キーを押しながら個別に選択することもできます．

index.html（抜粋）<form>
  <select name="select6" multiple size="5" class="form-control">
    <option value="61">オプション項目61</option>
    <option value="62">オプション項目62</option>
    <option value="63">オプション項目63</option>
    <option value="64">オプション項目64</option>
    <option value="65">オプション項目65</option>
  </select><br>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

目次に戻る