如何指示需要一组单选按钮[重复]

Posted

技术标签:

【中文标题】如何指示需要一组单选按钮[重复]【英文标题】:How to indicate that a group of radio buttons are required [duplicate] 【发布时间】:2014-01-08 20:30:49 【问题描述】:

我了解如何在文本字段中放置一个图标以向用户指示它是必需的,并在 html5 表单中获得提示应填写该字段的提示。

单选按钮和复选框是否有类似的机制?

下面是我正在使用的一组简单的单选按钮。

  <!DOCTYPE html>

  <polymer-element name='marital-status-form'>
    <template>
    <style">

      #col1  order:1; 
      #col2  order:2; align-self:flex-start; 
      #hr  order:3; 

    </style>
      <form id='form'
            name='form'
            on-change='updateModel'>

        <section 
          <label for='marriedRdo' id='marriedLbl' >Married</label>
          <label for='divorcedRdo' id='divorcedLbl' >Divorced</label>
          <label for='singleRdo' id='singleLbl' >Single</label>
          <label for='visitingRdo' id='visitingLbl' >Visiting</label>

        </section>

        <section >
          <input id='marriedRdo'
                 name='status'
                 type="radio"
                 value='Married'
                 on-click='submit'>
          <input id=divorcedRdo name='status' type='radio' value='Divorced'>
          <input id='singleRdo' name='status' type="radio" value='Single' >
          <input id=visitingRdo name='status' type='radio' value='Visiting'>
        </section>

        <hr id='hr'>
        <delete-dispatch-form id='delete-dispatch-form'></delete-dispatch-form>

        <button id='submit-btn'
          type='submit'></button>

        </form>
      </template>

     <script type="application/dart">

      import 'package:polymer/polymer.dart' show CustomTag, observable, PolymerElement;

      import 'dart:html' show Event, Node, InputElement;


      @CustomTag( 'marital-status-form')
      class MaritalStatusForm extends RooleElement
      
        @observable String choice= '';

        MaritalStatusForm.created() : super.created();

        void updateModel(Event e, var detail, Node target)
        
          //maritalStatus.status = (e.target as InputElement).value;

          //print( encode( maritalStatus ) );

        


        void submit ( Event e, var detail, Node target )
        
          $['form'].onSubmit.listen( ( e )
              
                e.preventDefault();
               );
        

      

    </script>
  </polymer-element>

【问题讨论】:

对我来说,这只是一个与 Dart 几乎无关的 HTML5 问题。所以我要更改标签。 【参考方案1】:

此问题的一个简单解决方案是默认选择一个单选按钮。这样,用户既可以保持默认设置,也可以选择不同的选项。这实际上“需要”一组单选按钮。

【讨论】:

【参考方案2】:

从 html 的角度来看,您可以将 'required' 属性添加到组中的单选输入之一,这将需要选择其中一个选项。

<input id='marriedRdo'
             name='status'
             type="radio"
             value='Married'
             on-click='submit'
             required="required">

查看这个小提琴的演示:http://jsfiddle.net/lickmydesign/5y4Lv6gc/

【讨论】:

以上是关于如何指示需要一组单选按钮[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中只选择一组单选按钮的值?

如何居中对齐测验标题中心下方的一组单选按钮并保持响应?

如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮?

制作一组单选按钮 [VB.NET]

在一组单选按钮中怎样设置默认选项呢/在哪里设置呢?

在 WinForms 中对一组单选按钮进行数据绑定的最佳方法