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

我只是想知道如何在单选button上以正确的方式使用新的HTML5input属性“required”。 每个单选button字段都需要如下的属性吗？ 还是只有一个领域得到它是足够的？

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

Answer 1

您只需要为radiogroup的一个input设置required的属性，但是您可以将其设置为全部。

例如：

 <form> <label for="input1">1:</label> <input type="radio" name="myradiogroup1" id="input1" value="1" required><br> <label for="input2">2:</label> <input type="radio" name="myradiogroup1" id="input2" value="2"><br> <label for="input3">3:</label> <input type="radio" name="myradiogroup1" id="input3" value="3"><br> <input type="submit" value="send"> </form> 

看到这个小提琴

如果你dynamic生成这些单选button，我build议总是添加必要的属性，这样你就不用担心至less有一个input。

另请注意：

为了避免混淆是否需要单选button组，鼓励作者在组中的所有单选button上指定属性。 事实上，一般来说，鼓励作者避免使用单选button组，因为这是用户无法返回的状态，因此通常被认为是糟糕的用户界面。

资源

Answer 2

试试这个…

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

findJSFIDDLE

Answer 3

如果您的单选button已被定制，例如单选button的原始图标已通过css“display：none”隐藏，以便您可以创build自己的单选button，则可能会出现错误。

解决这个问题的方法是将“display：none”replace为“opacity：0”

：d