〜備忘録シリーズ〜
【Bootstrap】第三弾

ここに記載のコードは全てBootstrap公式サイトに載っているので
覚える必要はないです。基本コピー&ペーストでOKです。

▶︎forms

    <form action="" method="post">
     <div class="form-group">
     <label for="myname">お名前</label> 
     <input class="form-control form-control-lg" type="text" 
     name="myname" id="myname" value="seri" readonly>
   </div>

readonlyを追加すると読み取り専用に。

▼こんなフォームも簡単に作れちゃう

▼対象コード

<form>
 <div class="form-row">
       <div class="form-group col-md-6">
         <label for="inputEmail4">メールアドレス</label>
         <input type="email" class="form-control" id="inputEmail4">
       </div>
       <div class="form-group col-md-6">
         <label for="inputPassword4">パスワード</label>
         <input type="password" class="form-control" id="inputPassword4">
       </div>
     </div>
     <div class="form-group">
       <label for="inputAddress">住所</label>
       <input type="text" class="form-control" id="inputAddress" placeholder="">
     </div>
     <div class="form-group">
       <label for="inputAddress2">番地/マンション名</label>
       <input type="text" class="form-control" id="inputAddress2" placeholder="〇〇ハイム">
     </div>
     <div class="form-row">
       <div class="form-group col-md-6">
         <label for="inputCity">市区町村</label>
         <input type="text" class="form-control" id="inputCity">
       </div>
       <div class="form-group col-md-4">
         <label for="inputState">都道府県</label>
         <select id="inputState" class="form-control">
           <option selected>お選びください</option>
           <option>...</option>
         </select>
       </div>
       <div class="form-group col-md-2">
         <label for="inputZip">郵便番号</label>
         <input type="text" class="form-control" id="inputZip">
       </div>
     </div>
     <div class="form-group">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" id="gridCheck">
         <label class="form-check-label" for="gridCheck">
           同意します
         </label>
       </div>
     </div>
     <button type="submit" class="btn btn-primary">登録</button>
   </form>

▶︎Checkbox

▼対象コード

<div class="form-check">
   <input class="form-check-input" type="checkbox" name="job" id="会社員" id="job_1">
   <label class="form-check-label" for="job1">会社員</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="checkbox" name="job" id="自営業" id="job_2">
   <label class="form-check-label" for="job2">自営業</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="checkbox" name="job" id="学生" id="job_3">
   <label for="job3">学生</label>
</div>
　　　　　　　　　　　　　　　　　　※"checkbox"を"radio"に変更すればradioボタンに

▶︎Validation

(入力項目に対してエラーのチェックが出来る機能)

◎設定手順
①formに対して"novalidate"の属性を付与
　→HTMLにデフォルトで入っている設定を削除
②クラス名を付ける（class="needs-validation"）　
　→クラス名はなんでもOK
③class="invalid-feedback"でエラーメッセージ記載
　→正しい時もメッセージを表示したい場合は
　　class="valid-feedback"
④script読み込み

▼対象コード

<form class="needs-validation" novalidate>
 <div class="form-row">
   <div class="col-md-6 mb-3">
     <label for="validationCustom01">姓</label>
     <input type="text" class="form-control" id="validationCustom01" value="" required>
     <div class="valid-feedback">
       正しく記載されています
     </div>
     <div class="invalid-feedback">
       入力してください
     </div>
   </div>
   <div class="col-md-6 mb-3">
     <label for="validationCustom02">名</label>
     <input type="text" class="form-control" id="validationCustom02" value="" required>
     <div class="valid-feedback">
       正しく記載されています
     </div>
     <div class="invalid-feedback">
       入力してください
     </div>
   </div>
 </div>
 <div class="form-group">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
     <label class="form-check-label" for="invalidCheck">
       同意します
     </label>
     <div class="invalid-feedback">
       必ず同意してください
     </div>
   </div>
 </div>
 <button class="btn btn-primary" type="submit">送信</button>
</form>

下記script読み込みも必要！

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
 'use strict';
 window.addEventListener('load', function() {
   // Fetch all the forms we want to apply custom Bootstrap validation styles to
   var forms = document.getElementsByClassName('needs-validation');
   // Loop over them and prevent submission
   var validation = Array.prototype.filter.call(forms, function(form) {
     form.addEventListener('submit', function(event) {
       if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
       form.classList.add('was-validated');
     }, false);
   });
 }, false);
})();
</script>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　※bodyの一番下に追加すればOK

-------------

Bootstrap編は一旦ここまでで終了としようかな
ぜひ実際に使って試してみてください！

おつかれさまでした🌷