「ラジオ」入力フィールドで「必須」属性を使用する方法 質問する

「ラジオ」入力フィールドで「必須」属性を使用する方法 質問する

ラジオ ボタンで新しい HTML5 入力属性「required」を正しく使用する方法を知りたいだけです。ラジオ ボタンのすべてのフィールドに以下のような属性が必要ですか、それとも 1 つのフィールドだけに属性を設定すれば十分ですか?

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

ベストアンサー1

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>

以下の点にも注意してください:

ラジオ ボタン グループが必須かどうかの混乱を避けるために、作成者はグループ内のすべてのラジオ ボタンに属性を指定することが推奨されます。実際、一般的に、最初にチェックされたコントロールがないラジオ ボタン グループを作成することは避けることが推奨されます。これは、ユーザーが戻ることができない状態であるため、一般的にユーザー インターフェイスが貧弱であると見なされるためです。

ソース

おすすめ記事