ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目
フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。
でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！
デモ
<fieldset>
<fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。
disabled を受け付けて、その中にある要素をすべて非活性化します。
1 2 3 | <fieldset disabled>…</fieldset> |
JavaScript からも disabled プロパティで操作できます。
1 2 | const fieldset = document.querySelector('fieldset');fieldset.disabled = true; |
<fieldset> の外側には当然影響しません。今回の用途なら <form> の中全体を囲んでみましょう。レイアウトをフォームにまとめたい場合は display: contents にしてグリッドやフレックスを透過させると便利です。
おしまい
そういえばもう Ajax って言わないですか？