【初心者の方向け】 Bootstrap4の使い方フォーム

問い合わせや予約・申し込み・コメントといった様々な用途で使われるフォームデザインをBootstrapを使ってデザインしてみましょう。

Bootstrap4のバージョン4.3をベースに書いています。

基本的なフォーム

テキスト入力のみのシンプルなフォームです。

まずは、こちらを確認して見ましょう。

フォームサンプル

名前

メールアドレス

送信する

サンプルコード

やを使用する際は.form-group内に記述していきます。</p> <p>また各要素には、class="form-control"を指定してください。</p> <p>.form-controlには、該当する要素の外観などのデザインが指定されています。</p> <pre><code class="language-default"><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> </code></pre> <h3>セレクトフォーム</h3> <p>セレクトフォームは単独選択や複数選択など指定できます。</p> <p>選択してください12345</p> <p>複数選択できます12345</p> <p>サンプルコード</p> <pre><code class="language-default"><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> </code></pre> <h3>チェックボックスとラジオボタン</h3> <p>チェックボックスとラジオボタンのサンプルです。</p> <p>テキスト入力フォームなどと違う点は</p> <p>.form-check内に記述していく形になります。</p> <p>また<input><label>のクラスも内容が変わるので、サンプルコードを確認してください。</p> <p>チェックボックス</p> <p>123</p> <p>ラジオボタン</p> <p>123</p> <p>サンプルコード</p> <p>チェックボックスやラジオボタンを横並びにするには.form-check-inlineを指定してください。</p> <pre><code class="language-default"> <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> </code></pre> <h3>ファイル入力</h3> <p>ファイル入力は.form-group内に記述していきます。 <input>には.form-control-fileを指定します。</p> <p>ファイルを選択</p> <p>サンプルコード</p> <pre><code class="language-default"><form> <div class="form-group"> <label for="file1">ファイルを選択</label> <input type="file" class="form-control-file" id="file1"> </div> </form> </code></pre> <h3>レンジ入力</h3> <p>スマホでの入力支援や、大きい数値など直感的に選択できるレンジ入力は</p> <p><input>要素に.form-control-rangeを使用してデザインされます。</p> <p>JavaScriptを用いて視覚的な数値の変動も表示できます。</p> <p>レンジ</p> <p>JavaScriptを組み合わせた例</p> <p>レンジ50</p> <p>サンプルコード</p> <p>通常のレンジ表示になります。</p> <p>実際に使用する場合には、<input>内にmax="○" min="○" step="○" value="○"を使ってレンジ入力の最小値や最大値を指定していきましょう。</p> <pre><code class="language-default"><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> </code></pre> <h3>フォームレイアウト</h3> <p>グリッドを使用してフォームのレイアウトも可能です。</p> <p>サンプルでは画面幅に応じて縦並びに切り替わります。</p> <p>名前</p> <p>性別選択してください男女</p> <p>メールアドレス</p> <p>選択欄選択してくださいABC</p> <p>入力欄</p> <p>入力欄</p> <p>送信</p> <p>サンプルコード</p> <pre><code class="language-default"><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> </code></pre> </div><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6065340865343988" crossorigin="anonymous"></script><script> document.addEventListener('astro:page-load', () => { const toc = document.getElementById('toc-wrapper'); const prose = document.querySelector('.article-content'); if (toc && prose) { const firstH2 = prose.querySelector('h2'); if (firstH2) { toc.style.display = 'block'; firstH2.parentNode.insertBefore(toc, firstH2); } else { toc.style.display = 'block'; prose.insertBefore(toc, prose.firstChild); } } if (prose) { const h2List = prose.querySelectorAll('h2'); const adIndices = [0, 3]; adIndices.forEach(index => { if (h2List[index]) { const h2 = h2List[index]; const nextEl = h2.nextElementSibling; if (nextEl && nextEl.classList.contains('ru-adsense-wrapper')) { return; } const adWrapper = document.createElement('div'); adWrapper.className = 'ru-adsense-wrapper my-10 flex justify-center w-full max-w-full overflow-hidden'; const ins = document.createElement('ins'); ins.className = 'adsbygoogle'; ins.style.display = 'block'; ins.style.width = '100%'; ins.setAttribute('data-ad-client', 'ca-pub-6065340865343988'); ins.setAttribute('data-ad-slot', '3070695088'); ins.setAttribute('data-ad-format', 'auto'); ins.setAttribute('data-full-width-responsive', 'true'); const adScript = document.createElement('script'); adScript.textContent = '(adsbygoogle = window.adsbygoogle || []).push({});'; adWrapper.appendChild(ins); adWrapper.appendChild(adScript); if (h2.nextSibling) { h2.parentNode.insertBefore(adWrapper, h2.nextSibling); } else { h2.parentNode.appendChild(adWrapper); } } }); } }); </script><div class="my-12 p-8 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800"><div class="flex flex-col sm:flex-row items-center sm:items-start gap-6"><div class="w-20 h-20 sm:w-24 sm:h-24 rounded-full flex-shrink-0 overflow-hidden shadow-md border-2 border-white dark:border-slate-700"><img src="/images/logo.png" alt="RU DESIGN" class="w-full h-full object-cover"></div><div class="text-center sm:text-left"><div class="text-sm font-bold text-indigo-600 dark:text-indigo-400 mb-1 uppercase tracking-wider">AUTHOR</div><h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">RU DESIGN</h3><p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">個人でWeb制作をしています。一般からナイト系まで幅広く対応し、実践的なノウハウや自作ツールをこのブログで公開中。制作のご相談もお気軽にどうぞ。</p></div></div></div><div class="mb-12"> </div><div class="flex items-center gap-4 py-6 border-t border-b border-slate-200 dark:border-slate-800 mb-12"><span class="font-bold text-slate-900 dark:text-white text-sm">この記事をシェア:</span><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdesign.pon-poo.com%2Farchive%2Fpost-309%2F&text=%E3%80%90%E5%88%9D%E5%BF%83%E8%80%85%E3%81%AE%E6%96%B9%E5%90%91%E3%81%91%E3%80%91%20Bootstrap4%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%20%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0" target="_blank" rel="noopener" class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-[#1DA1F2] hover:text-white transition-colors" title="Twitterでシェア"><span class="w-5 h-5 block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></span></a></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12"><a href="/archive/post-342/" class="p-5 border border-slate-200 dark:border-slate-800 rounded-xl hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors group flex flex-col justify-center"><div class="text-xs text-slate-500 mb-2 group-hover:text-indigo-600 flex items-center gap-1"><span class="w-3 h-3 rotate-180"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg></span> 前の記事</div><div class="font-bold text-slate-900 dark:text-white line-clamp-2">【初心者の方向け】 Bootstrap4の使い方スピナー</div></a><a href="/archive/post-455/" class="p-5 border border-slate-200 dark:border-slate-800 rounded-xl hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors text-right group flex flex-col justify-center"><div class="text-xs text-slate-500 mb-2 group-hover:text-indigo-600 flex items-center justify-end gap-1">次の記事 <span class="w-3 h-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg></span></div><div class="font-bold text-slate-900 dark:text-white line-clamp-2">Bootstrap4.5が公開されました</div></a></div><div class="mt-16 pt-10 border-t border-slate-200 dark:border-slate-800"><h3 class="text-2xl font-display font-bold mb-8 text-slate-900 dark:text-white flex items-center gap-2"><span class="w-5 h-5 text-indigo-500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path><path d="M5 3v4"></path><path d="M19 17v4"></path><path d="M3 5h4"></path><path d="M17 19h4"></path></svg></span>関連記事</h3><div class="grid grid-cols-1 md:grid-cols-3 gap-6"><article class="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-5 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-indigo-100 dark:hover:border-indigo-900/50 flex flex-col h-full cursor-pointer" onclick="window.location.href='/archive/post-455/'"><div class="flex items-center gap-2 text-xs text-slate-500 mb-3"><time datetime="2020-05-15T00:00:00.000Z">2020/05/15</time></div><h4 class="font-bold mb-3 text-slate-900 dark:text-white leading-snug"><a href="/archive/post-455/" class="hover:text-indigo-600 transition-colors">Bootstrap4.5が公開されました</a></h4></article><article class="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-5 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-indigo-100 dark:hover:border-indigo-900/50 flex flex-col h-full cursor-pointer" onclick="window.location.href='/archive/post-342/'"><div class="flex items-center gap-2 text-xs text-slate-500 mb-3"><time datetime="2019-03-29T00:00:00.000Z">2019/03/29</time></div><h4 class="font-bold mb-3 text-slate-900 dark:text-white leading-snug"><a href="/archive/post-342/" class="hover:text-indigo-600 transition-colors">【初心者の方向け】 Bootstrap4の使い方スピナー</a></h4></article><article class="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-5 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-indigo-100 dark:hover:border-indigo-900/50 flex flex-col h-full cursor-pointer" onclick="window.location.href='/archive/post-276/'"><div class="flex items-center gap-2 text-xs text-slate-500 mb-3"><time datetime="2019-03-28T00:00:00.000Z">2019/03/28</time></div><h4 class="font-bold mb-3 text-slate-900 dark:text-white leading-snug"><a href="/archive/post-276/" class="hover:text-indigo-600 transition-colors">【初心者の方向け】 Bootstrap4の使い方カルーセル</a></h4></article></div></div></article></main><footer class="bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 pt-12 pb-12 mt-20"><div class="max-w-7xl mx-auto px-4"><div class="mb-16 grid gap-6 mx-auto max-w-7xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3"><div class="w-full"><a href="https://pon-poo.com" class="block rounded-2xl overflow-hidden hover:opacity-90 transition-all hover:scale-[1.01] border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-500/5 group relative h-full"><img src="/images/pon-poo_site.png" alt="ほのぼの情報サイト" class="w-full h-full object-cover" loading="lazy" decoding="async"></a></div><div class="w-full"><a href="https://game.pon-poo.com" class="block rounded-2xl overflow-hidden hover:opacity-90 transition-all hover:scale-[1.01] border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-500/5 group relative h-full"><img src="/images/game-pon-poo_site.png" alt="ほのぼのゲーム情報GAME PON-POO" class="w-full h-full object-cover" loading="lazy" decoding="async"></a></div><div class="w-full"><a href="https://www.ac-illust.com/main/profile.php?id=23865515&area=1" class="block rounded-2xl overflow-hidden hover:opacity-90 transition-all hover:scale-[1.01] border border-slate-200 dark:border-slate-800 shadow-lg shadow-slate-500/5 group relative h-full"><img src="/images/ac_dl_btn.png" alt="無料画像素材" class="w-full h-full object-cover" loading="lazy" decoding="async"></a></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"><div><h3 class="text-lg font-display font-bold text-slate-900 dark:text-white mb-6">RU DESIGN</h3><p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-8">個人でWeb制作を行う制作者の技術ブログ。制作の実践知やノウハウを発信し、無料のWebツールも公開中。一般からナイト系まで幅広く対応しています。制作のご相談もお気軽にどうぞ。</p><div class="flex flex-wrap gap-3"><a href="https://github.com/ponpoo6262" target="_blank" rel="noopener noreferrer" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-white dark:hover:bg-slate-700 transition-all shadow-sm border border-transparent hover:border-indigo-100 dark:hover:border-indigo-800" title="GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a href="https://www.youtube.com/@pon-poo" target="_blank" rel="noopener noreferrer" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-white dark:hover:bg-slate-700 transition-all shadow-sm border border-transparent hover:border-indigo-100 dark:hover:border-indigo-800" title="YouTube"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg></a></div></div><div><h3 class="text-lg font-display font-bold text-slate-900 dark:text-white mb-6">メニュー</h3><ul class="space-y-4"><li><a href="/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">ホーム</a></li><li><a href="/solutions/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">AI・Web制作</a></li><li><a href="/tech-log/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">技術ログ</a></li><li><a href="/note/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">コラム・雑記</a></li></ul></div><div><h3 class="text-lg font-display font-bold text-slate-900 dark:text-white mb-6">リソース</h3><ul class="space-y-4"><li><a href="/request/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">制作について</a></li><li><a href="/archive/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">アーカイブ</a></li><li><a href="/news/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">お知らせ</a></li><li><a href="/contact/" class="text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 text-sm transition-colors">お問い合わせ</a></li></ul></div><div><h3 class="text-lg font-display font-bold text-slate-900 dark:text-white mb-6">無料Webツール</h3><p class="text-slate-600 dark:text-slate-400 text-sm mb-6 leading-relaxed">画像処理、テキスト整形、AIツールなど、制作を効率化する便利ツール集。</p><a href="/tools/index.html" class="inline-flex items-center justify-center w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl transition-all shadow-lg shadow-indigo-600/20 group"><span>ツール集を見る</span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 group-hover:translate-x-1 transition-transform"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div></div><div class="text-center pt-8 border-t border-slate-200 dark:border-slate-800"><div class="flex justify-center flex-wrap gap-x-6 gap-y-2 mb-4"><a href="/privacy-policy/" class="text-slate-500 hover:text-slate-900 dark:hover:text-white text-xs transition-colors">プライバシーポリシー・利用規約</a><a href="/about/" class="text-slate-500 hover:text-slate-900 dark:hover:text-white text-xs transition-colors">About</a><a href="/request/" class="text-slate-500 hover:text-slate-900 dark:hover:text-white text-xs transition-colors">制作について</a></div><p class="text-slate-500 dark:text-slate-400 text-sm">© 2026 RU DESIGN. All rights reserved.</p></div></div></footer></body></html>

目次

基本的なフォーム