HTML5：如何在“无线电”输入字段中使用“必需”属性

247

我只是想知道如何在单选按钮上以正确的方式使用新的HTML5输入属性“required”。每个单选按钮字段都需要像下面这样的属性吗？或者只有一个领域得到它就足够了？HTML5：如何在“无线电”输入字段中使用“必需”属性

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

来源

2011-11-27 nerdess

418

设置required属性用于无线电组中的至少一个输入。

设置required对于所有输入更加清晰，但不是必要的（除非动态地生成无线电按钮）。

要组合单选按钮，它们必须都具有相同的name值。这允许一次仅选择一个，并将required应用于整个组。

<form> 
 
    Select Gender: 
 

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

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

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

还注意到：

为了避免混乱，是否需要不是一个单选按钮组，鼓励作者在所有无线电指定属性一组中的按钮。的确，一般来说，鼓励作者避免使用单选按钮组，因为这是用户无法返回的状态，因此通常被认为是糟糕的用户界面。

Source

来源

2011-11-27 18:31:12 Seybsen

+43

你需要记住的很重要的一点是，无线电和复选框，输入由**姓名**属性进行分组，以取代display:none。因此，对任何一个输入（具有相同名称的一组输入之间）进行设置将会起作用。另一方面，如果你错过了** name **属性，它将不会像你期望的那样工作。 –

@kumar_harsh非常好的一点。忽略名称的典型例子是使用Angular ng-model代替。 –

@kumar_harsh“包含输入元素a的单选按钮组还包含满足以下所有条件的所有其他输入元素b”（4）http://www.w3.org/TR/html5/forms.html ＃radio-button-group –

尝试这个...

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

     <input type="submit" value="Click Here" /> 
</form>

Find JSFIDDLE

来源

2013-12-03 05:19:52 Vijay

如果你的单选按钮已经被定制，例如单选按钮的原始图标已隐藏通过css display:none，这样你可以创建自己的单选按钮，那么你可能会得到错误。

解决它的方法是用opacity:0

来源

2017-09-13 12:40:39 james

HTML5：如何在“无线电”输入字段中使用“必需”属性

回答

相关问题