2013-12-20 4 views
0

Я понимаю, как разместить значок в текстовом поле, чтобы указать пользователю, что это необходимо, и в форме 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> 
+0

Для меня это просто HTML5 вопроса, который не имеет почти ничего общего с Дартом. Поэтому я собираюсь изменить теги. –

ответ

0

Простым решением этой проблемы является выбор переключателя по умолчанию. Таким образом, пользователь может либо оставаться по умолчанию, либо выбрать другой вариант. Это, по сути, «требует» группы переключателей.

0

С точки зрения html вы можете добавить атрибут 'required' к одному из радиовходов в группе, и для этого потребуется один из параметров.

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

Смотрите эту скрипку демо: http://jsfiddle.net/lickmydesign/5y4Lv6gc/

Смежные вопросы