如何使用“必需的"商品.带有“无线电"的属性输入栏 [英] How to use the "required" attribute with a "radio" input field

查看:132
本文介绍了如何使用“必需的"商品.带有“无线电"的属性输入栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我只是想知道如何以正确的方式在单选按钮上使用新的HTML5输入属性"required".是否每个单选按钮字段都需要以下属性,或者仅一个字段就足够了吗?

I am just wondering how to use the new HTML5 input attribute "required" in the right way on radio buttons. Does every radio button field need the attribute like below or is it sufficient if only one field gets it?

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

推荐答案

TL; DR:为无线电组的至少一个输入设置required属性.

TL;DR: Set the required attribute for at least one input of the radio group.

为所有输入设置required更加清晰,但这不是必需的(除非动态生成单选按钮).

Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).

要对单选按钮进行分组,它们必须全部具有相同的name值.这样一次只能选择一个,并将required应用于整个组.

To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.

<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>

还请注意:

为避免对是否需要单选按钮组感到困惑,建议作者在组中的所有单选按钮上指定属性.实际上,总的来说,鼓励作者避免一开始就没有任何最初检查的控件的单选按钮组,因为这是用户无法返回的状态,因此通常被认为是较差的用户界面. /p>

To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.

来源

这篇关于如何使用“必需的"商品.带有“无线电"的属性输入栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆