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にて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B

ホームページ制作ならRU DESIGN

関連記事

メタタグを使用して簡単にリダイレクト(301)設定する方法
2024/05/23
サイトのドメイン変更時、なんらかの理由で公開時のアドレスと異なる記事へ移転や変更をした際に、訪れたユーザーを指定したURLへ転送するリダイレクト機能について。古...
WordPressでカスタム投稿に投稿する際に、アイキャッチを設定していなければ自動で設定させる方法
2024/05/20
ワードプレスのアイキャッチの設定をしなかった場合でも、投稿時に自動で設定してくれる方法です。   functions.php function def...
別のワードプレスへ記事移行の際に画像もエクスポートしてくれるプラグイン
2024/05/16
ワードプレスの記事をエクスポートする際に、デフォルトの状態ではメディア(添付ファイル)は含まれません。「Export media with selected c...
ワードプレス各バージョンと使用可能なPHPバージョン一覧
2024/01/29
 WordPressのバージョンによって使用可能なPHPのバージョンは異なってきます。PHPのバージョンによっては、ワードプレスが正常に動作しなかったり、テンプ...
古いMacに「ChromeOS 」をインストールして利用
2023/10/08
 Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...