Last-Modified: 2022/08/02

Bootstrapの入力フォーム【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapの入力フォームについて、簡単に解説していきます。

基本のHTML

Bootstrapではinput要素のクラス名はform-controlにします。

また、label要素のクラス名はform-labelとし、input要素のidと紐づけます。

<div class="mb-3">
  <label for="NameFormControlInput" class="form-label">お名前</label>
  <input type="name" class="form-control" id="NameFormControlInput" placeholder="田中 太郎">
</div>
<div class="mb-3">
  <label for="EmailFormControlInput" class="form-label">メールアドレス</label>
  <input type="email" class="form-control" id="EmailFormControlInput" placeholder="info@example.com">
</div>
<div class="mb-3">
  <label for="DetailFormControlTextarea" class="form-label">お問い合わせ内容</label>
  <textarea class="form-control" id="DetailFormControlTextarea" rows="3"></textarea>
</div>

上記のコードでは、お問い合わせフォームを想定して、入力フォームを配置しています。

入力フォームを横並びにする

入力フォームを横並びにするにはクラス名がcol-md-6のdiv要素で囲います。

このようにすることで、幅768px以上の端末では横並びに表示させることができます。

<form class="row g-3">
  <div class="col-md-6">
    <label for="NameFormControlInput" class="form-label">名前</label>
    <input type="email" class="form-control" id="NameFormControlInput">
  </div>
  <div class="col-md-6">
    <label for="EmailFormControlInput" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="EmailFormControlInput">
  </div>
  <div class="col-12">
    <label for="DetailFormControlTextarea" class="form-label">お問い合わせ内容</label>
    <textarea class="form-control" id="DetailFormControlTextarea" rows="3"></textarea>
  </div>
</form>

上記のコードはサンプルコードであり、先程のお問い合わせフォームの一部を横並びにしています。

ラベルとinput要素を横並びにする

左にラベル、右にinput要素はよく見る形です。

その場合は、以下のようにクラス名をlabel要素ではcol-sm-2に、input要素ではcol-sm-10にします。

<div class="row mb-3">
  <label for="NameFormControlInput" class="col-sm-2 col-form-label">お名前</label>
  <div class="col-sm-10">
    <input type="name" class="form-control" id="NameFormControlInput" placeholder="田中 太郎">
  </div>
</div>
<div class="row mb-3">
  <label for="EmailFormControlInput" class="col-sm-2 col-form-label">メールアドレス</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="EmailFormControlInput" placeholder="info@example.com">
  </div>
</div>
<div class="row mb-3">
  <label for="DetailFormControlTextarea1" class="col-sm-2 col-form-label">お問い合わせ内容</label>
  <div class="col-sm-10">
    <textarea class="form-control" id="DetailFormControlTextarea" rows="3"></textarea>
  </div>
</div>

このようにすることによって、端末の幅が544px以上の場合には、左にラベル、右にinput要素の形になります。

• facebook
• Tweet
• Read Later