1. TOP
  2. >技術メモ>
  3. 【初心者の方向け】 Bootstrap4の使い方 フォーム

【初心者の方向け】 Bootstrap4の使い方 フォーム

技術メモ, Bootstrap4

2019/03/29
2022/07/21
【初心者の方向け】 Bootstrap4の使い方 フォーム

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

問い合わせや予約・申し込み・コメントといった様々な用途で使われるフォームデザインをBootstrapを使ってデザインしてみましょう。

 

Bootstrap4のバージョン4.3をベースに書いています。

 

基本的なフォーム

 

テキスト入力のみのシンプルなフォームです。

まずは、こちらを確認して見ましょう。

 

フォームサンプル




 
サンプルコード

<input>や<select>、<textarea>を使用する際は.form-group内に記述していきます。

また各要素には、class=”form-control”を指定してください。

.form-controlには、該当する要素の外観などのデザインが指定されています。

<form>
  <div class="form-group">
    <label for="name">名前</label>
    <input type="text" class="form-control" id="name" placeholder="名前">
  </div>
  <div class="form-group">
    <label for="mail">メールアドレス</label>
    <input type="email" class="form-control" id="mail" placeholder="メールアドレス">
  </div>
  <div class="form-group">
    <label for="comment">コメント</label>
    <textarea class="form-control" id="comment" rows="3" placeholder="コメントを入力してください"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">送信する</button>
</form>

 

セレクトフォーム

セレクトフォームは単独選択や複数選択など指定できます。

 



 

サンプルコード

<form>
<div class="form-group">
    <label for="select1">選択してください</label>
    <select class="form-control" id="select1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>
  <div class="form-group">
    <label for="select2">複数選択できます</label>
    <select multiple class="form-control" id="select2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

 

チェックボックスとラジオボタン

 

チェックボックスとラジオボタンのサンプルです。

テキスト入力フォームなどと違う点は

.form-check内に記述していく形になります。

また<input><label>のクラスも内容が変わるので、サンプルコードを確認してください。

 

チェックボックス






ラジオボタン






 
サンプルコード

チェックボックスやラジオボタンを横並びにするには.form-check-inlineを指定してください。

<!--チェックボックス-->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="check1">
  <label class="form-check-label" for="check1">1</label>
  <input class="form-check-input" type="checkbox" value="" id="check2">
  <label class="form-check-label" for="check2">2</label>
  <input class="form-check-input" type="checkbox" value="" id="check3">
  <label class="form-check-label" for="check3">3</label>
</div>
<!--ラジオボタン-->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
  <label class="form-check-label" for="radio1">1</label>
  <input class="form-check-input" type="radio" name="radio" id="radio2" value="option2">
  <label class="form-check-label" for="radio2">2</label>
  <input class="form-check-input" type="radio" name="radio" id="radio3" value="option3">
  <label class="form-check-label" for="radio3">3</label>
</div>

 

ファイル入力

ファイル入力は.form-group内に記述していきます。
<input>には.form-control-fileを指定します。

 


 

サンプルコード

<form>
  <div class="form-group">
    <label for="file1">ファイルを選択</label>
    <input type="file" class="form-control-file" id="file1">
  </div>
</form>

 

レンジ入力

 

スマホでの入力支援や、大きい数値など直感的に選択できるレンジ入力は

<input>要素に.form-control-rangeを使用してデザインされます。

JavaScriptを用いて視覚的な数値の変動も表示できます。

 


JavaScriptを組み合わせた例



50

 

サンプルコード

通常のレンジ表示になります。

実際に使用する場合には、<input>内にmax=”○” min=”○” step=”○” value=”○”を使ってレンジ入力の最小値や最大値を指定していきましょう。

<form>
  <div class="form-group">
    <label for="range">レンジ</label>
    <input type="range" class="form-control-range" id="range">
    <span id="value">5</span>
  </div>
</form>

 

フォームレイアウト

 

グリッドを使用してフォームのレイアウトも可能です。

サンプルでは画面幅に応じて縦並びに切り替わります。

 







 

サンプルコード

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="name-sample">名前</label>
      <input type="text" class="form-control" id="name-sample" placeholder="名前">
    </div>
    <div class="form-group col-md-6">
      <label for="sex">性別</label>
      <select id="sex" class="form-control">
        <option selected>選択してください</option>
        <option>男</option>
        <option>女</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="text" class="form-control" id="email" placeholder="メールアドレス">
  </div>
  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input1">選択欄</label>
      <select id="inputState" class="form-control">
        <option selected>選択してください</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
    </div>
    <div class="form-group col-md-4">
      <label for="input-2">入力欄</label>
      <input type="text" class="form-control" id="input-2">
    </div>
    <div class="form-group col-md-4">
      <label for="input-3">入力欄</label>
      <input type="text" class="form-control" id="input-3">
    </div>
</div>  
<button type="submit" class="btn btn-primary">送信</button>
</form>

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
ホームページ制作ならRU DESIGN

関連記事

ワードプレス各バージョンと使用可能なPHPバージョン一覧
2024/01/29
 WordPressのバージョンによって使用可能なPHPのバージョンは異なってきます。PHPのバージョンによっては、ワードプレスが正常に動作しなかったり、テンプ...
古いMacに「ChromeOS 」をインストールして利用
2023/10/08
 Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...
公式サポートが終了した古いMacに最新のmacOSをインストールするプロジェクト
2023/10/07
 古いMacに最新のmacOSをインストールするプロジェクト「OpenCore Legacy Patcher」(OCLP)は、Appleが提供する最新のmacO...
【WordPress】古い投稿を現在の日付で再投稿してくれるプラグイン「Republish Old Posts」
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...