Bootstrapで横並びのフォームを作成する方法を解説！
この記事では、Bootstrapを使って横並びのフォーム(form)を作成する方法をサンプルコード付きで紹介します。Bootstrapを使うときれいなフォーム(form)が簡単に作成できますが、横並びにするなどのレイアウトも手軽に調整できます。
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を使うと見た目を綺麗にすることができます。以下の記事も参考にしてください。
<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>また、基本のフォームに加えてチェックボックスやラジオボタンも作成できます。
inputやlabel要素を囲んでいる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を使うとフォームをきれいな見た目で作成してくれるだけでなく、レイアウトも簡単に調節できます。
自分の作成したいフォームに合わせて、ぜひ使用してみてください！
