Bootstrap4 スターターテンプレート（フォーム用）

2019/10/17 2021/12/13

今回は自分用の備忘録です。

Bootstrap4でフォームを作るときに毎回、書き方を忘れてしまうので（※ルールがややこしくて覚えられない）コピペ用としてエントリーすることにしました。

ソースコード（コピペ用）


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap4 フォームコンポーネント</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <!--自作CSS -->
    <style type="text/css">
        <!--
        /*ここに調整CSS記述*/
        -->
    </style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-light navbar-dark bg-dark">
    <a class="navbar-brand" href="#!">Bootstrap4 フォームコンポーネント</a>
</nav>

<!-- Page Content -->
<div class="container mt-5 p-lg-5 bg-light">

    <form>

        <!--氏名-->
        <div class="form-row">
            <div class="col-md-6 mb-3">
                <label for="lastName">名字</label>
                <input type="text" class="form-control" id="lastName" placeholder="名字">
            </div>
            <div class="col-md-6 mb-3">
                <label for="inputName">名前</label>
                <input type="text" class="form-control" id="inputName" placeholder="名前">
            </div>
        </div>
        <!--/氏名-->

        <!--Eメール-->
        <div class="form-group row">
            <label for="inputEmail" class="col-sm-2 col-form-label">Eメール</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Eメール">
            </div>
        </div>
        <!--/Eメール-->

        <!--パスワード-->
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="パスワード">
                <small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字を含めて8～20文字で、空白、特殊文字、絵文字を含むことはできません。</small>
            </div>
        </div>
        <!--/パスワード-->

        <!--住所-->
        <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="inputAddress01">郵便番号</label>
                <input type="text" class="form-control" id="inputAddress01" placeholder="郵便番号">
            </div>
            <div class="col-md-3 mb-3">
                <label for="inputAddress02">都道府県</label>
                <select class="custom-select" id="inputAddress02">
                    <option selected disabled value="">選択...</option>
                    <option>...</option>
                </select>
            </div>
            <div class="col-md-6 mb-3">
                <label for="inputAddress03">住所</label>
                <input type="text" class="form-control" id="inputAddress03" placeholder="住所">
            </div>
        </div>
        <!--/住所-->

        <!--性別-->
        <div class="form-group">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0">性別</legend>
                <div class="col-sm-10">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
                        <label class="custom-control-label" for="customRadioInline1">女性</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
                        <label class="custom-control-label" for="customRadioInline2">男性</label>
                    </div>
                </div>
            </div>
        </div>
        <!--/性別-->

        <!--スキル-->
        <div class="form-group row">
            <div class="col-sm-2">スキル</div>
            <div class="col-sm-10">
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                    <label class="custom-control-label" for="customCheck1">PHP／Laravel</label>
                </div>
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input type="checkbox" class="custom-control-input" id="customCheck2">
                    <label class="custom-control-label" for="customCheck2">Ruby on Rails</label>
                </div>
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input type="checkbox" class="custom-control-input" id="customCheck3">
                    <label class="custom-control-label" for="customCheck3">Vue.js</label>
                </div>
            </div>
        </div>
        <!--/スキル-->

        <!--評価-->
        <div class="form-group">
            <label for="Evaluation">評価:</label>
            <select id="Evaluation" class="form-control">
                <option>よかった</option>
                <option>普通</option>
                <option>悪かった</option>
            </select>
        </div>
        <!--/評価-->

        <!--ファイル選択-->
        <div class="custom-file mb-3">
            <input type="file" class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile">ファイル選択...</label>
        </div>
        <!--/ファイル選択-->

        <!--備考欄-->
        <div class="form-group mb-3">
            <label for="Textarea">備考欄</label>
            <textarea class="form-control" id="Textarea" rows="3" placeholder="その他、質問などありましたら"></textarea>
        </div>
        <!--/備考欄-->

        <!--ボタンブロック-->
        <div class="form-group row">
            <div class="col-sm-12">
                <button type="submit" class="btn btn-primary btn-block">登録</button>
            </div>
        </div>
        <!--/ボタンブロック-->

    </form>

</div><!-- /container -->

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>

ポイント

基本ルール
フォームグループ
ラジオ・チェックボックス（インライン）
ラジオ・チェックボックスカスタム

ポイント

基本ルール

Bootstrapでformを作る際のポイント

text系は label タグと一緒に<div class="form-group">で囲む
text系は<class="form-control">を定義する
チェックボックス、ラジオボタン、submit などは .form-group では囲まない
.row を使わなくても、横並び、サイズの調整は .form-horizontal を使えば簡単にできる
ただし、氏名や住所などテキストフォームを横並びさせたい場合は .row を使う

フォームグループ

インプットテキストはラベルと一緒に .form-group で囲みます。

一見複雑に見えるが、<div class="form-group">を<div class="row">だと思えば理解しやすい。


<div class="form-group">
  <label for="text1">Text:</label>
  <input type="text" id="text1" class="form-control">
</div>

ラジオ・チェックボックス（インライン）

チェックボックスやラジオボタンは .form-check-inline を指定します。


<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2a" value="A">
  <label class="form-check-label" for="radio2a">A</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2b" value="B">
  <label class="form-check-label" for="radio2b">B</label>
</div>

ラジオ・チェックボックスカスタム

・input と label を .custom-control と .custom-checkbox(.costom-radio) で囲みます。
・input checkbox タグには .custom-control-input を定義する
・label タグには .custom-control-label を定義する


<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">このカスタムチェックボックスをチェック</label>
</div>

参考になるサイト

Bootstrap4移行ガイド

とほほのBootstrap 4入門

Bootstrap 4 フロントエンド開発の教科書

バックエンドエンジニアでもフロント側を改修するケースはあります。特に Laravel はCSSフレームワークとして「Bootstrap」を採用しているので、Laravel 使いのエンジニアとしては、 Bootstrap は押さえておきたいスキルの１つです。本書は、Bootstrap について、機能全般を網羅している良書です。コンポーネントごとに説明があり、図で動作結果があるので初心者にとっても分かりやすく解説されています。最後のページにあるサンプルは実践でテンプレートとしても使えます。もしもの時の為に一冊保険で持っておいて損はないと思います。

Amazonで詳細を見る

オススメ