如何在“radio”输入字段中使用“required”属性

发布时间 2023-11-12 18:45:42作者: 小满独家

内容来自 DOC https://q.houxu6.top/?s=如何在“radio”输入字段中使用“required”属性

我只是想知道如何正确使用HTML5中的新输入属性"required"来处理单选按钮。每个单选按钮字段是否都需要像下面这样的属性,或者只有一个字段有该属性就足够了?

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

TL;DR: 为单选按钮组中至少一个输入设置required属性。


将所有输入都设置为required更加清晰,但并非必需(除非动态生成单选按钮)。

要将单选按钮分组,它们必须具有相同的name值。这样只允许选择其中一个,并将required应用于整个组。

<form>
  选择性别:<br>

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

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

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

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

还请注意:

为了避免混淆,是否需要对单选按钮组进行必填,建议从组中的所有单选按钮上指定该属性。实际上,一般来说,建议不要在单选按钮组中没有任何初始选中控件的情况下,因为用户无法返回到该状态,所以通常被认为是一个较差的用户界面。

来源