6日でできる 新HTML&CSS入門｜Bootstrapのボタンとフォーム
フォームもボタンも、classを付けるだけで見やすく整う。
Bootstrapを使って、入力しやすく操作しやすいフォーム画面をすばやく作ろう。
WebサイトやWebアプリでは、ユーザーから情報を入力してもらう場面がたくさんあります。会員登録、お問い合わせ、ログイン、アンケート、資料請求、予約フォームなど、フォームはWebページの中でも特に重要な部品です。
ただし、通常のHTMLだけでinputやbuttonを配置すると、ブラウザ標準の見た目になり、少し素朴な印象になることがあります。入力欄の幅、余白、ラベルの位置、ボタンの色、ラジオボタンやチェックボックスの並びなどを整えるには、CSSで細かく調整する必要があります。
そこで便利なのがBootstrapです。Bootstrapを使うと、form-control、form-label、form-check、btn、btn-primaryなどのclassを指定するだけで、入力欄やボタンを見やすく整えられます。自分で大量のCSSを書かなくても、統一感のあるフォーム画面を作れるのが大きな魅力です。
この記事では、Bootstrap 5を使ったフォームの基本として、CDNでの読み込み、テキスト入力、メールアドレス入力、パスワード入力、ラジオボタン、チェックボックス、送信ボタンの作り方を解説します。サンプルHTMLを確認しながら、Bootstrapのclassがどのようにフォームの見た目を整えているのかを学んでいきましょう。
Bootstrapフォームとは
Bootstrapフォームとは、Bootstrapが用意しているclassを使って、入力欄やラベル、選択ボタン、送信ボタンなどを整えたフォームのことです。
HTMLのフォームは、form、label、input、buttonなどのタグで作ります。Bootstrapでは、これらのタグにform-control、form-label、form-check-input、btnなどのclassを追加して、見た目や余白を整えます。
| 部品 | 通常のHTML | Bootstrapでよく使うclass |
|---|---|---|
| 入力欄 | input | form-control |
| ラベル | label | form-label |
| ラジオボタン | input type="radio" | form-check-input |
| チェックボックス | input type="checkbox" | form-check-input |
| 選択肢のまとまり | div | form-check |
| ボタン | button | btn、btn-primary |
| 外枠 | div | container |
| 余白 | CSSで指定 | mt-5、mb-3など |
Bootstrapフォームのよいところは、classを追加するだけで、入力欄の幅、枠線、角丸、余白などが整うことです。フォームはユーザーが直接操作する部分なので、見やすく、入力しやすく、押しやすいデザインにすることが大切です。
図1：Bootstrapのclassでフォーム部品を整える
この図から分かること
Bootstrapフォームでは、HTMLのフォーム部品に専用のclassを追加して見た目を整えます。form-controlを付けると入力欄が見やすくなり、form-labelを付けると項目名が整います。btnやbtn-primaryを使うと、視認性の高いボタンを簡単に作れます。
BootstrapをCDNで読み込む
Bootstrapを使うには、BootstrapのCSSとJavaScriptをHTMLに読み込ませます。今回のサンプルでは、CDNを使ってBootstrapを読み込みます。
CDNとは、インターネット上に置かれているファイルをHTMLから読み込む方法です。Bootstrapのファイルを自分でダウンロードしなくても、linkやscriptでURLを指定するだけで使えます。
CSSはhead内に読み込みます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">JavaScriptはbodyの終わり付近で読み込みます。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>今回のような入力欄やボタンの見た目だけであれば、主にBootstrapのCSSが働きます。ただし、ドロップダウンやモーダルなど、動きのあるコンポーネントを使う場合はJavaScriptも必要になります。
| 読み込み | 役割 |
|---|---|
| Bootstrap CSS | ボタン、フォーム、余白、レイアウトなどの見た目を整える |
| Bootstrap JavaScript | モーダル、ドロップダウンなど動きのある部品を動かす |
| CDN | インターネット経由でBootstrapファイルを読み込む |
CDNを使う場合は、インターネット接続が必要です。オフラインで学習したい場合は、Bootstrapファイルをダウンロードして、cssフォルダーやjsフォルダーに配置する方法を使います。
viewportを忘れずに指定する
Bootstrapはレスポンシブ対応を前提としたフレームワークです。スマートフォンやタブレットでも正しく表示しやすくするために、head内にviewportを指定します。
<meta name="viewport" content="width=device-width, initial-scale=1">この指定により、画面幅に合わせてページが表示されやすくなります。フォームはスマートフォンで入力されることも多いため、viewportの指定はとても大切です。
| 指定 | 役割 |
|---|---|
| width=device-width | 表示幅を端末の画面幅に合わせる |
| initial-scale=1 | 初期表示倍率を1にする |
viewportがないと、スマートフォンでフォームが小さく表示されたり、横スクロールが発生したりすることがあります。Bootstrapを使うHTMLでは、基本設定として必ず入れておきましょう。
BootstrapフォームのサンプルHTML
ここでは、Bootstrap 5のCDNを使って、オンライン講座の会員登録フォームを作成します。名前、受講コース、メールアドレス、パスワード、メール通知の希望、登録ボタンを配置します。
ファイル名： lesson54_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap 会員登録フォーム</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">オンライン講座 会員登録</h1>
<form method="GET" action="#">
<div class="mb-3">
<label for="user-name" class="form-label">お名前</label>
<input type="text" class="form-control" id="user-name" name="user-name" placeholder="例）田中太郎">
</div>
<div class="mb-3">
<label class="form-label">受講したいコース</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="course" id="html-course" value="HTML入門" checked>
<label class="form-check-label" for="html-course">HTML入門</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="course" id="css-course" value="CSS基礎">
<label class="form-check-label" for="css-course">CSS基礎</label>
</div>
</div>
<div class="mb-3">
<label for="user-email" class="form-label">メールアドレス</label>
<input type="email" class="form-control" id="user-email" name="user-email" placeholder="sample@example.com">
</div>
<div class="mb-3">
<label for="user-password" class="form-label">パスワード</label>
<input type="password" class="form-control" id="user-password" name="user-password" placeholder="パスワードを入力">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="mail-news" name="mail-news" value="希望する">
<label class="form-check-label" for="mail-news">講座のお知らせメールを受け取る</label>
</div>
<button type="submit" class="btn btn-primary">登録する</button>
<button type="reset" class="btn btn-outline-secondary">入力をリセット</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ上部に「オンライン講座 会員登録」という見出しが表示され、その下に入力フォームが並びます。
お名前とメールアドレス、パスワードの入力欄は、form-controlによって幅や余白が整った見た目になります。受講したいコースのラジオボタンは、form-check、form-check-input、form-check-labelによって、選択肢として分かりやすく配置されます。
登録するボタンにはbtn btn-primaryを指定しているため、Bootstrap標準の青いボタンとして表示されます。入力をリセットボタンにはbtn btn-outline-secondaryを指定しているため、枠線タイプの控えめなボタンになります。
サンプルHTMLの全体構造
このサンプルでは、containerの中にフォーム全体を配置しています。containerはページの主要な内容を中央寄せにし、読みやすい幅に整えるためのclassです。
<div class="container mt-5">
<h1 class="mb-4">オンライン講座 会員登録</h1>
<form method="GET" action="#">
フォーム部品
</form>
</div>mt-5は上方向の余白を付けるclassです。mb-4は下方向の余白を付けるclassです。Bootstrapでは、このような余白classを使うことで、CSSを追加しなくても間隔を整えられます。
| class | 役割 |
|---|---|
| container | フォーム全体を読みやすい幅で中央に配置する |
| mt-5 | 上方向の外側余白を大きめに取る |
| mb-4 | 下方向の外側余白を取る |
| mb-3 | フォーム項目ごとの下余白を取る |
フォームでは、入力項目同士が詰まりすぎると読みにくくなります。mb-3のような余白classを使って、項目ごとに適度な間隔を作ると、見やすいフォームになります。
図2：フォーム項目はmb-3でまとまりごとに整理する
この図から分かること
Bootstrapフォームでは、mb-3のような余白classを使って、入力項目ごとの間隔を整えます。余白があると、ラベル、入力欄、選択肢、ボタンが見やすくなります。フォームはユーザーが入力する画面なので、項目ごとにまとまりを作ることが大切です。
form-controlで入力欄を整える
Bootstrapでテキスト入力欄を整えるときは、inputにform-controlを指定します。
<input type="text" class="form-control" id="user-name" name="user-name" placeholder="例）田中太郎">form-controlを指定すると、入力欄の幅、余白、枠線、角丸などが整います。通常のinputよりも見やすく、フォーム全体の統一感が出ます。
| 入力欄 | 使うclass | 役割 |
|---|---|---|
| テキスト入力 | form-control | 名前などの1行入力欄を整える |
| メール入力 | form-control | メールアドレス入力欄を整える |
| パスワード入力 | form-control | パスワード入力欄を整える |
| 複数行入力 | form-control | textareaを整える |
form-controlは、input type="text"だけでなく、input type="email"やinput type="password"にも使えます。textareaにも使えるため、お問い合わせ内容のような複数行入力にも利用できます。
form-labelで項目名を分かりやすくする
labelにはform-labelを指定します。labelは、入力欄の意味をユーザーに伝えるためのタグです。
<label for="user-email" class="form-label">メールアドレス</label>
<input type="email" class="form-control" id="user-email" name="user-email">labelのfor属性とinputのid属性を同じ値にすると、ラベルと入力欄が関連付けられます。これにより、ラベルをクリックしたときに入力欄へフォーカスできるようになります。
| 属性 | 役割 |
|---|---|
| for | 対応する入力欄のidを指定する |
| id | 入力欄を識別する |
| name | フォーム送信時のデータ名になる |
| placeholder | 入力前の案内文を表示する |
フォームでは、placeholderだけに頼らず、labelをきちんと付けることが大切です。入力中にplaceholderは消えるため、何を入力する欄なのか分からなくなる場合があります。labelを付けておけば、入力欄の意味が常に分かります。
ラジオボタンはform-checkでまとめる
ラジオボタンは、複数の選択肢の中から1つだけ選ぶときに使います。Bootstrapでは、form-check、form-check-input、form-check-labelを使って整えます。
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="course" id="html-course" value="HTML入門" checked>
<label class="form-check-label" for="html-course">HTML入門</label>
</div>| class・属性 | 役割 |
|---|---|
| form-check | 選択肢全体のまとまりを作る |
| form-check-inline | 選択肢を横並びにする |
| form-check-input | ラジオボタン本体に指定する |
| form-check-label | ラジオボタンのラベルに指定する |
| checked | 最初から選択された状態にする |
| name | 同じグループのラジオボタンに同じ名前を付ける |
ラジオボタンでは、同じグループの選択肢に同じnameを指定します。サンプルでは、HTML入門とCSS基礎の両方にname="course"を指定しているため、どちらか1つだけを選択できます。
form-check-inlineを付けると、選択肢を横並びにできます。選択肢が少ない場合は横並びにするとコンパクトに表示できます。選択肢が多い場合は、縦に並べたほうが見やすいこともあります。
チェックボックスもform-checkで整える
チェックボックスは、選択するかしないかを指定する入力部品です。ラジオボタンと同じように、form-check、form-check-input、form-check-labelを使って整えます。
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="mail-news" name="mail-news" value="希望する">
<label class="form-check-label" for="mail-news">講座のお知らせメールを受け取る</label>
</div>| フォーム部品 | 用途 |
|---|---|
| ラジオボタン | 複数の中から1つだけ選ぶ |
| チェックボックス | 選ぶ、選ばないを切り替える |
| 複数チェックボックス | 複数の項目を選択できる |
チェックボックスは、利用規約への同意、メールマガジンの受け取り、複数の興味分野の選択などによく使われます。ラジオボタンとチェックボックスは見た目が似ていますが、選択方法が違うため、用途に合わせて使い分けましょう。
図3：ラジオボタンとチェックボックスは選び方が違う
この図から分かること
ラジオボタンは、複数の選択肢から1つだけ選ぶときに使います。チェックボックスは、選ぶか選ばないかを指定するときや、複数項目を選びたいときに使います。Bootstrapでは、どちらもform-check、form-check-input、form-check-labelを使って見やすく整えられます。
btnでボタンの見た目を整える
Bootstrapでは、buttonにbtnを指定すると、ボタンの基本デザインが適用されます。さらにbtn-primaryやbtn-successなどを組み合わせることで、色や意味を変えられます。
<button type="submit" class="btn btn-primary">登録する</button>| class | 役割 |
|---|---|
| btn | ボタンの基本デザイン |
| btn-primary | 主要操作を表す青系ボタン |
| btn-success | 成功や完了を表す緑系ボタン |
| btn-danger | 削除や危険操作を表す赤系ボタン |
| btn-warning | 注意を促す黄色系ボタン |
| btn-secondary | 補助的な操作を表すグレー系ボタン |
| btn-outline-secondary | 枠線タイプの控えめなボタン |
サンプルでは、登録するボタンにbtn btn-primaryを指定しています。これは、フォームの主要な送信ボタンとして分かりやすい見た目です。
一方、入力をリセットボタンにはbtn btn-outline-secondaryを指定しています。登録ボタンより目立ちすぎない見た目にすることで、主要操作と補助操作の違いが分かりやすくなります。
methodとactionの役割
フォームにはmethodとactionを指定できます。methodは送信方法、actionは送信先を表します。
<form method="GET" action="#">| 属性 | 役割 |
|---|---|
| method | フォームデータの送信方法を指定する |
| action | フォームデータの送信先を指定する |
| name | 送信されるデータの名前を指定する |
| value | 選択肢などの送信値を指定する |
今回のサンプルでは、学習用としてmethod="GET"、action="#"を使っています。GETでは、入力内容がURLに付いて送信される場合があります。そのため、実際の会員登録やログイン、パスワードを扱うフォームではPOSTを使うことが一般的です。
学習段階では、フォームの見た目と構造を理解することを優先し、実際の運用ではサーバー側の処理やセキュリティにも注意する必要があります。
よく使うフォーム部品とBootstrap class
Bootstrapでよく使うフォーム部品を整理しておきます。
| フォーム部品 | Bootstrap class | 解説・効果 |
|---|---|---|
| テキスト入力 | form-control | 入力欄の幅、余白、枠線が整う |
| メールアドレス入力 | form-control | メール入力欄として見やすく整う |
| パスワード入力 | form-control | パスワード欄を見やすく整える |
| textarea | form-control | 複数行入力欄を整える |
| ラジオボタン | form-check-input | 選択ボタン本体を整える |
| チェックボックス | form-check-input | チェック項目を整える |
| ラベル | form-label、form-check-label | 項目名や選択肢名を整える |
| ボタン | btn、btn-primary | 視認性の高いボタンを作る |
フォームは、入力欄だけでなく、ラベル、余白、選択肢、ボタンを含めて1つの画面として考えることが大切です。Bootstrapのclassを使うと、それぞれの部品に統一感を持たせやすくなります。
Bootstrapフォームで使うタグとclassの一覧
今回のサンプルで使ったタグやclassをまとめます。
| タグ・class | 説明・用途 |
|---|---|
| form | フォーム全体を囲む |
| input | 1行入力欄、ラジオボタン、チェックボックスを作る |
| label | 入力欄や選択肢の説明を表示する |
| button | 送信やリセットなどのボタンを作る |
| container | フォーム全体を中央寄せの幅で配置する |
| mt-5 | 上方向に大きめの余白を付ける |
| mb-3 | 項目ごとに下余白を付ける |
| mb-4 | 見出し下に余白を付ける |
| form-control | 入力欄のスタイルを整える |
| form-label | 通常の入力欄のラベルを整える |
| form-check | ラジオボタンやチェックボックスのまとまりを作る |
| form-check-inline | 選択肢を横並びにする |
| form-check-input | 選択ボタン本体を整える |
| form-check-label | 選択肢のラベルを整える |
| btn | ボタンの基本デザインを指定する |
| btn-primary | 青系の主要ボタンを作る |
| btn-outline-secondary | 枠線タイプの補助ボタンを作る |
Bootstrapフォームでは、form-controlとform-checkの使い分けが大切です。文字入力やメール入力にはform-control、ラジオボタンやチェックボックスにはform-check系のclassを使います。
フォームを見やすくするための考え方
フォームは、ユーザーが入力しやすいかどうかがとても大切です。Bootstrapを使えば見た目は整いやすくなりますが、項目の並びや説明文も工夫する必要があります。
| 工夫 | 内容 |
|---|---|
| 項目を詰めすぎない | mb-3などで余白を作る |
| labelを必ず付ける | 何を入力する欄か分かりやすくする |
| placeholderを補助的に使う | 入力例を示す |
| 主要ボタンを目立たせる | btn-primaryなどを使う |
| 補助ボタンは控えめにする | outline系のボタンを使う |
| ラジオボタンは用途に合わせる | 1つだけ選ぶ場合に使う |
| チェックボックスは確認や複数選択に使う | 同意や通知設定などに向いている |
フォームの目的は、情報を入力して送信してもらうことです。見た目が整っていても、何を入力すればよいか分かりにくいと使いにくくなります。Bootstrapのclassと、分かりやすい項目名を組み合わせることが大切です。
Bootstrapのボタンとフォームを使いこなすポイント
Bootstrapのボタンとフォームを使うと、少ないコードで整った入力画面を作れます。form-controlを使えば入力欄が見やすくなり、form-labelを使えば項目名を整理できます。ラジオボタンやチェックボックスにはform-check系のclassを使い、送信ボタンにはbtnやbtn-primaryを指定します。
フォーム全体はcontainerで囲み、mt-5やmb-3などの余白classを使うと、詰まりすぎない見やすいレイアウトになります。主要な操作にはbtn-primaryを使い、補助的な操作にはbtn-outline-secondaryなどを使うと、ボタンの役割が分かりやすくなります。
Bootstrapを使うと、HTMLにclassを追加するだけで、フォーム部品の見た目を統一できます。まずはシンプルな登録フォームを作り、そこにテキスト入力、メール入力、パスワード入力、ラジオボタン、チェックボックス、ボタンを組み合わせて練習すると、実用的なフォーム制作の基本が身につきます。