Question

我只是想知道如何在radiobuttons上正确使用新的HTML5输入属性“required”。每个radiobutton字段是否都需要如下所示的属性？或者只有一个领域得到它就足够了吗？

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

Answer 1

为广播组的至少一个输入设置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>

另请注意：

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

Source

Answer 2

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

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

Answer 3

我必须使用<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" />以及相同的名称和类型，然后验证工作正常。

    <script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").addClass('btn w3-teal');
        $(".add-row").append("<i class='fas fa-plus'></i>");
        $(".delete-row").addClass('btn w3-teal float-right');
        $(".delete-row").append("<i class='fas fa-minus' id = no></i>");
    });
</script>
<script type="text/javascript">
    $(".add-row").click(function(){
        $(".delete-row").addClass('btn w3-teal float-right').append("<i class='fas fa-minus' id = hi></i>");
        $(".select2-selection").css({"width":"100%"});
        $(".modelselect2").css({"width":"100%"});
        $(".delete-row").append("<i class='fas fa-minus' id = hi></i>");
    });
</script>
<script type="text/javascript">
    $(".delete-row").click(function(){
        console.log($(".modelselect2"));
        $(".modelselect2").css({"width":"100%"});
    });
</script>

Answer 4

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

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>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

尽管我非常支持使用原生HTML5验证的简约方法，但从长远来看，您可能希望将其替换为Javascript验证。 Javascript验证使您可以更好地控制验证过程，并允许您设置真实的类（而不是伪类）来改善（有效）字段的样式。如果Javascript损坏（或缺少），则可以使用本机HTML5验证。在here的启发下，您可以找到该Better forms的示例以及有关如何制作Andrew Cole的其他建议。

Answer 5

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

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

在选择的语句之一中指定“ 必需”关键字。如果要更改其外观的默认方式。您可以按照以下步骤。如果您有意修改默认行为，这只是为了提供更多信息。

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

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

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

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

如何将“required”属性与“radio”输入字段一起使用

5 个答案: