Bootstrapで横並びのフォームを作成する方法を解説!

この記事では、Bootstrapを使って横並びのフォーム(form)を作成する方法をサンプルコード付きで紹介します。Bootstrapを使うときれいなフォーム(form)が簡単に作成できますが、横並びにするなどのレイアウトも手軽に調整できます。

コンテンツ [表示]

  1. 1Bootstrapで横並びのフォームを作成したい
  2. 2Bootstrapを使った基本的なフォームの作り方
  3. 3Bootstrapで横並びのフォームを作成する方法
  4. 3.1フォーム自体を横並びにする
  5. 4Bootstrapでフォームの一部の要素を横並びにする方法
  6. 4.1一部のinputだけ横並びにする
  7. 4.2一部のチェックボックスを横並びにする
  8. 5まとめ

Bootstrapで横並びのフォームを作成したい

Bootstrapを使うと以下のような横並びのフォームを簡単に作成することができます。

横並びのフォーム

Bootstrapを使った基本的なフォームの作り方

Bootstrapを使った、基本的なフォームの作り方を軽く説明します。
 

<form>
  <div class="form-group">
    <label for="InputName">お名前</label>
    <input type="email" class="form-control" id="InputName">
  </div>
  <div class="form-group">
    <label for="InputAsk">お問い合わせ内容</label>
    <textarea rows="5" class="form-control" id="InputAsk"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

フォームを作成する時は、まずform要素を作成しその中に項目を作っていくようにします。
次に項目ごとにdiv要素を作成し、form-groupというクラスを適用させます。

このdiv要素の中にlabel要素とinput要素などの入力するための要素を作成し、入力するための要素の方にはform-controlというクラスを適用させます。

後はinput要素を使ったりテキストボックスを使ったりなど基本的にHTMLでのフォームと違いはありません。

また、ボタンもBootstrapを使うと見た目を綺麗にすることができます。以下の記事も参考にしてください。

Bootstrapのボタンの色やサイズ、タイプの種類を紹介!のイメージ
Bootstrapのボタンの色やサイズ、タイプの種類を紹介!
Bootstrapで作成できるボタンの色やサイズをサンプルコードやプレビューを交えて紹介します。また、Bootsrapに用意されている、ボタンの背景色を変えることで選択中や選択不可な状態を表す方法や、トグルボタンの作り方も解説しています。
<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck">
    <label class="form-check-label" for="exampleCheck">チェックボックス</label>
  </div>
  <div class="form-group form-check">
    <input type="radio" class="form-check-input" id="exampleRadio">
    <label class="form-check-label" for="exampleRadio">ラジオボタン</label>
  </div>

また、基本のフォームに加えてチェックボックスやラジオボタンも作成できます。

inputlabel要素を囲んでいるdiv要素にform-checkクラスを追加し、input要素とlabel要素にはそれぞれform-check-inputクラスとform-check-labelクラスを追加します。

input要素のtype属性でcheckboxかradioを指定することで、どちらを使うかを指定できます。

Bootstrapで横並びのフォームを作成する方法

フォーム自体を横並びにする

フォーム全体を横並びにするにはform-inlineというクラスを使用します。このクラスをformタグのクラス属性に適用すると、その中身を全て横並びにすることができます。
 

なお、form-inlineを追加するだけだと各項目間に余白がなくなって窮屈な見た目になってしまいます。そのため、CSSかmr-○などのクラスを用いて余白を設定するとよいでしょう。

Bootstrapでフォームの一部の要素を横並びにする方法

一部のinputだけ横並びにする

次に、フォーム全体ではなくある項目だけを横並びにする方法です。例えば「名前」を入力する際に「性」と「名」を横並びで表示したい場合などに活用できます。

フォームの一部を横並びにしたい場合には、横並びにしたい要素をdivタグで囲い、formタグではなくそのdivタグに対してclass="form-inline"を指定します。
余白などは適宜調整すると見やすくなります。

一部のチェックボックスを横並びにする

チェックボックスを横並びにする時は使うクラスが異なります。

チェックボックスを横並びにする際はform-checkクラスが適用されているdiv要素にさらにform-check-inline要素を適用します。こうすることによって横並びのラジオボタンやチェックボックスを作成することができます。

まとめ

いかがでしたか?Bootstrapを使うとフォームをきれいな見た目で作成してくれるだけでなく、レイアウトも簡単に調節できます。

自分の作成したいフォームに合わせて、ぜひ使用してみてください!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事