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

4 回答

• 0

  Set the required attribute for at least one input of the radio group.

  ---

  为所有输入设置 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

  回复于 2024-04-27T22:09:49+08:00
• 12

  试试这个......

  <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

  回复于 2024-04-27T22:09:49+08:00
• 510

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

  修复它的方法是用 opacity:0 替换 display:none

  回复于 2024-04-27T22:09:49+08:00
• 2

  这是一个非常基本但现代的必需radiobuttons实现，具有原生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 .

  回复于 2024-04-27T22:09:49+08:00