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

Question

我只是想知道如何在单选按钮上以正确的方式使用新的 HTML5 输入属性“必需”。 是否每个单选按钮字段都需要像下面这样的属性，或者如果只有一个字段获得它就足够了？

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

Answer 1

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

---

所有输入required的设置更清晰，但不是必需的（除非动态生成单选按钮）。

要将单选按钮分组，它们必须具有相同的name值。 这允许只有一个在同一时刻被选择并应用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>

还要注意：

为了避免混淆是否需要一个单选按钮组，鼓励作者在一个组中的所有单选按钮上指定属性。 实际上，一般来说，鼓励作者首先避免使用没有任何初始检查控件的单选按钮组，因为这是用户无法返回的状态，因此通常被认为是糟糕的用户界面。

来源

Answer 2

您可以使用此代码片段...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

在其中一个选择语句中指定“ required ”关键字。 如果要更改其外观的默认方式。 您可以按照以下步骤操作。 如果您有意修改默认行为，这仅用于提供额外信息。

将以下内容添加到您的.css文件中。

/* style all elements with a required attribute */
:required {
  background: red;
}

有关更多信息，您可以参考以下 URL。

https://css-tricks.com/almanac/selectors/r/required/

Answer 3

我必须使用required="required"以及相同的名称和类型，然后验证工作正常。

<input type="radio" name="user-radio"  id="" value="User" required="required" />

<input type="radio" name="user-radio" id="" value="Admin" />

<input type="radio" name="user-radio" id="" value="Guest" /> 

Answer 4

这是具有原生 HTML5 验证的必需单选按钮的一个非常基本但现代的实现：

 fieldset { display: block; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; border: none; } body {font-size: 15px; font-family: serif;} input { background: transparent; border-radius: 0px; border: 1px solid black; padding: 5px; box-shadow: none!important; font-size: 15px; font-family: serif; } input[type="submit"] {padding: 5px 10px; margin-top: 5px;} label {display: block; padding: 0 0 5px 0;} form > div {margin-bottom: 1em; overflow: auto;} .hidden { opacity: 0; position: absolute; pointer-events: none; } .checkboxes label {display: block; float: left;} input[type="radio"] + span { display: block; border: 1px solid black; border-left: 0; padding: 5px 10px; } label:first-child input[type="radio"] + span {border-left: 1px solid black;} input[type="radio"]:checked + span {background: silver;}

 <form> <div> <label for="name">Name (optional)</label> <input id="name" type="text" name="name"> </div> <fieldset> <legend>Gender</legend> <div class="checkboxes"> <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label> <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label> <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label> </div> </fieldset> <input type="submit" value="Send" /> </form>

尽管我非常喜欢使用原生 HTML5 验证的简约方法，但从长远来看，您可能希望将其替换为 Javascript 验证。 Javascript 验证使您可以更好地控制验证过程，并允许您设置真实的类（而不是伪类）以改进（无效）字段的样式。 如果 Javascript 损坏（或缺少），这种原生 HTML5 验证可以作为您的后备。 您可以在此处找到一个示例，以及其他一些关于如何制作Better 表单的建议，灵感来自Andrew Cole 。

Answer 5

如果您已自定义单选按钮，例如，单选按钮的原始图标已通过css display:none隐藏，那么您可以创建自己的单选按钮，则可能会收到错误消息。

解决此问题的方法是将display:none替换为opacity:0

Answer 6

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