🧐

まだinputに一々disabledかけている?

2022/05/27に公開約700字

フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。

普段👇

<div>
  <input disabled={loading} type="email" name="name" />
</div>

<div>
  <input disabled={loading} type="password" name="password" />
</div>

<div>
  <input disabled={loading} type="submit" value="submit" name="button" />
</div>

fieldset使った場合👇

<fieldset disabled={loading}>
	<div>
	  <input type="email" name="name" />
	</div>

	<div>
	  <input type="password" name="password" />
	</div>

	<div>
	  <input type="submit" value="submit" name="button" />
	</div>
</fieldset>

Discussion

ログインするとコメントできます