そんな方向けの記事です。
こんにちは、ティロといいます。
Bootstrapを使ってバリデーション付きのフォームを作ってみます。
「Bootstrapってなんぞや？」という方はこちらの記事をご覧ください。
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> |
バリデーションありのフォーム
バリデーション自体はhtmlの機能を使っています。
アイコンはawesomeiconを使っており、head内に以下のコードを貼り付けてください。
1 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> |
See the Pen
yLJWddB by hiro web制作とブログ (@hiroweb9)
on CodePen.
コードは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <form class="row g-3"> <div class="col-md-4"> <label for="validation1" class="form-label">姓</label> <input type="text" class="form-control" id="validation1" value="山田" required> </div> <div class="col-md-4"> <label for="validation2" class="form-label">名前</label> <input type="text" class="form-control" id="validation2" value="太郎" required> </div> <div class="col-md-4"> <label for="validationDefaultUsername" class="form-label">ユーザー名</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2"><i class="fas fa-user"></i></span> <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> <label for="validation3" class="form-label">市町村</label> <input type="text" class="form-control" id="validation3" required> </div> <div class="col-md-3"> <label for="validation4" class="form-label">都道府県</label> <select class="form-select" id="validation4" required> <option selected disabled value="">選択</option> <option>青森県</option> <option>...</option> <option>東京都</option> <option>...</option> </select> </div> <div class="col-md-3"> <label for="validation5" class="form-label">郵便番号</label> <input type="text" class="form-control" id="validation5" required> </div> <div class="col-12 mt-3"> <button class="btn btn-outline-primary" type="submit">送信</button> </div> </form> |
出典：Validation (バリデーション) – Bootstrap5 日本語リファレンス
requiredをつけると必須項目となります。
またfor=”validation1″とid=”validation1″のようにforとidは同じにします。
フォームの基本的な使い方（クラスの意味など）はこちらの記事にまとめました。
お問い合わせのフォームが作りたいなそんな時はBootstrapでサクッと作りましょう。Bootstrapの機能を詳しく知りたいという方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
またBootstrapでよく使うグリッドシステムもとても便利なのでオススメです！
いかがでしたでしょうか？
Bootstrapの機能をもっと知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。