bootstrapのフォーム

2024年6月8日

Bootstrapは、フォーム要素を簡単にスタイリッシュにするためのクラスやスタイルを提供します。以下は、基本的なBootstrapフォームの例です。

1. 単純なフォーム:
   Bootstrapを使用して単純なフォームを作成する例です。

   html
   <form>
       <div class="mb-3">
           <label for="exampleFormControlInput1" class="form-label">Email address</label>
           <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
       </div>
       <div class="mb-3">
           <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
           <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
       </div>
       <button type="submit" class="btn btn-primary">Submit</button>
   </form>
   

2. 水平フォーム:
   フォームのラベルと入力フィールドを水平に配置する例です。

   html
   <form>
       <div class="mb-3 row">
           <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
           <div class="col-sm-10">
               <input type="email" class="form-control" id="inputEmail3">
           </div>
       </div>
       <div class="mb-3 row">
           <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
           <div class="col-sm-10">
               <input type="password" class="form-control" id="inputPassword3">
           </div>
       </div>
       <button type="submit" class="btn btn-primary">Sign in</button>
   </form>
   

3. グリッドフォーム:
   グリッドシステムを使用してフォームを整列する例です。

   html
   <form>
       <div class="mb-3 row">
           <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
           <div class="col-sm-10">
               <input type="email" class="form-control" id="inputEmail3">
           </div>
       </div>
       <div class="mb-3 row">
           <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
           <div class="col-sm-10">
               <input type="password" class="form-control" id="inputPassword3">
           </div>
       </div>
       <div class="mb-3 row">
           <div class="col-sm-10 offset-sm-2">
               <button type="submit" class="btn btn-primary">Sign in</button>
           </div>
       </div>
   </form>
   

これらの例は、Bootstrapのフォームに基本的なスタイルやレイアウトを提供しています。必要に応じて、さらに多くのオプションやカスタマイズが可能です。詳細については、Bootstrapの公式ドキュメントを参照してください。