1. ホーム
  2. ハイパーリンク

[解決済み】radio入力フィールドで "required "属性を使用する方法

2022-03-23 06:35:25

質問内容

HTML5の新しい入力属性である"required"をラジオボタンに正しく使用するにはどうすればよいのか悩んでいます。ラジオボタンの各フィールドには以下のような属性が必要なのでしょうか、それとも1つのフィールドだけが属性を取得すれば十分なのでしょうか?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

解決方法は?

TL;DR required 属性を、ラジオグループの少なくとも1つの入力に設定します。


設定方法 required をすべての入力に使用する方がより明確ですが、(ラジオボタンを動的に生成する場合を除き)必要ではありません。

ラジオボタンをグループ化するには、すべてのラジオボタンが同じ name の値を指定します。これにより、一度に1つだけ選択することができ、適用される required をグループ全体に適用します。

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

また、注意してください。

ラジオボタンのグループが必須であるか否かの混乱を避けるため、グループ内のすべてのラジオボタンにこの属性を指定することが推奨されます。実際、一般に、ラジオボタングループには初期状態でチェックされているコントロールがないことを避けることが推奨されています。

ソース