【Bootstrap】フォームで読み込み専用、イベント無効化

問題

　詳細ページなどで、フォームで読み込み専用として表示したい

方法

spendingDetail.blade.php

<form class="mt-5 date_option">
   @csrf
   <div class="form-group d-flex border-bottom">
       <label for="title" class="col-form-label w-25">タイトル</label>
       ⭐️ここ
       <input type="text" class="form-control-plaintext" id="title" value="aaa" disabled readonly>
   </div>
   <div class="form-group d-flex border-bottom">
       <label for="amount" class="col-form-label w-25">支出金額</label>
       <input type="number" class="form-control-plaintext" id="amount" value="12345" disabled readonly>
   </div>
   <div class="form-group d-flex border-bottom">
       <label for="date" class="col-form-label w-25">日付</label>
       <input type="date" id="date" class="form-control-plaintext" disabled readonly>
   </div>
   <div class="mt-4">
       <button type="submit" class="btn btn-primary">編集</button>
       <button type="submit" class="btn btn-danger">削除</button>
   </div>
</form>

⭐️
disabled：ポインターイベント無効化
readonly：入力の値の変更を防ぐ

参考