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