最近ポートフォリオ内でレコード登録からデータベース反映までの機能を作成しました。
その際に、入力フォームと同じフォームデザインで入力内容確認画面も作成したかったのですが、入力フォームと同じフォームに入力した内容を表示するだけでは、確認画面なのに入力内容を変更できてしまうという問題にずっと悩んでました。
（前に作成したポートフォリオでは、入力内容確認をテーブルで表示していた為、入力フォームとテーブルで全く異なるデザインになってしまい統一感が無かった。）
結果、input要素内でreadonlyを指定してあげるだけで解決できました（笑）
とても短い内容ですが、今回はreadonlyについてご紹介するので是非参考にしてもらえればと思います！
readonly
readonlyは、input要素での入力を不可にし、編集ができない読み取り専用のinput要素にしてくれます。
<input type="text" name="" value="" readonly>
1.登録内容を入力して確認画面に送信する。
2.確認画面フォームのinput要素でreadonlyとvalueに登録画面から取得したデータを指定。
これだけで、登録内容入力画面と同じデザインで統一感のある入力内容確認画面を作成することができます！
Tailwind CSSを使用されている方は、下記のサイトを参考にするとアプリらしいフォームを作成することが出来るので、是非ご覧になってみてください！
https://absarcs.info/how-to/customize-form-tailwind-css/
参考サイト
readonlyについて
http://html5.cyberlab.info/elements/forms/input-readonly.html
↧