Question

我理解如何在文本字段中放置一个图标以向用户表明它是必需的，并且在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>

Answer 1

此问题的简单解决方案是默认选择一个单选按钮。这样，用户可以使用默认值，也可以选择其他选项。实际上，这需要一组单选按钮。

Answer 2

从html的角度来看，您可以将“required”属性添加到组中的某个无线电输入，并且需要选择其中一个选项。

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

请参阅此小提琴演示：http://jsfiddle.net/lickmydesign/5y4Lv6gc/

如何指示需要一组单选按钮

2 个答案: