Bootstrapの得意技！フォームを装飾してみよう

Contents

完成イメージ

お名前、メール、お問い合わせの3つの入力欄
それぞれラベル付きで、幅いっぱいに広がっている
下に「送信」ボタン（青いボタン）

作成ファイル・保存場所

bootstrap フォルダに以下のファイルを作成してください。

ファイル名	内容
bootstrap05.html	Bootstrapのフォーム装飾練習用ファイル
※CSSファイル不要	BootstrapはCDNで読み込みます

htmlは下記をコピーして使います。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap フォーム装飾</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>






</body>
</html>

目的

Bootstrapの .form-control, .form-label, .btn などを使って、整った見た目のフォームを作る
インライン入力・ラベル・ボタンの間隔が自動で調整される仕組みを体験する
.form-group（5.xでは .mb-3 など）を使って、入力欄ごとのまとまりを作る

チェックポイント

各入力欄が .form-control で統一されているか
ラベルに .form-label を使っているか
各フォーム要素に placeholder や required が使われているか
ボタンが .btn btn-primary などで装飾されているか

作業ステップ

bootstrap05.html というファイルを新規作成します。
<main class="container"> の中に <form> を作成してください。
フォーム内に以下の入力欄を配置します：
- お名前（type="text"）
- メールアドレス（type="email"）
- お問い合わせ内容（<textarea>）
- 送信ボタン（<button type="submit"> または <input type="submit">）
各入力欄に .form-control を付け、ラベルには .form-label を使ってください。
入力欄の間には .mb-3 で余白を入れましょう。

ボタンは `<button>`？ `<input>`？

フォーム送信には <button type="submit"> と <input type="submit"> のどちらでも使えます。

これまで「送信には input、JavaScriptには button」という教え方もされてきましたが、
HTML5以降ではどちらもフォーム送信に使用可能です。

Bootstrapでは次のような理由で <button> の使用が主流です：

.btn クラスとの相性が良く、柔軟な装飾がしやすい
中に HTML（アイコンなど）を入れられる
実務やフレームワーク（React、Vueなど）でもよく使われている

<!-- 推奨（Bootstrapで主流の書き方） -->
<button type="submit" class="btn btn-primary">送信</button>

<!-- もちろん従来のinputでもOK -->
<input type="submit" class="btn btn-primary" value="送信">

学習中はどちらでもOKですが、この課題では <button> を使ってみましょう！

Bootstrapトレーニング

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap フォーム装飾</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <main class="container my-5">
        <h1 class="mb-4">お問い合わせフォーム</h1>

        <form action="#" method="post">
            <!-- お名前 -->
            <div class="mb-3">
                <label for="name" class="form-label">お名前</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="例：山田太郎" required>
            </div>

            <!-- メールアドレス -->
            <div class="mb-3">
                <label for="email" class="form-label">メールアドレス</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="example@mail.com"
                    required>
            </div>

            <!-- お問い合わせ内容 -->
            <div class="mb-3">
                <label for="message" class="form-label">お問い合わせ内容</label>
                <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
            </div>

            <!-- 送信ボタン -->
            <button type="submit" class="btn btn-primary">送信</button>
        </form>
    </main>

</body>
</html>

応用ポイント

.form-check, .form-select, .input-group なども後で試してみよう
.btn-outline-* に切り替えてボタンのデザインを変えることもできます
.col-md-* を使って、フォームの幅をレスポンシブに調整してみよう