Polymerjs iron表单iron-form _表单

【Polymerjs iron表单iron-form】Polymeriron表单是HTML表单元素, 用于验证和提交任何自定义元素和本机元素。 GET和POST方法都受支持, 并且ironajax元素用于将数据提交到操作URL。
默认情况下, 本机button元素提交以下表单：

< form is = "iron-form" id = "form" method = "post" action = "/form/handler"> < paper-input name = "password" label = "Password"> < /paper-input> < input name = "address"> ...< /form>

如果要通过自定义元素的单击处理程序提交表单, 则需要显式调用表单的Submit方法。即

< paper-button raised onclick = "submitForm()"> Submit< /paper-button> function submitForm() {document.getElementById('form').submit(); }

例子

< !DOCTYPE html> < html> < head> < title> iron-form< /title> < base href = "https://polygit.org/polymer+1.5.0/components/"> < script src = "http://www.srcmini.com/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/iron-form/iron-form.html"> < link rel = "import" href = "http://www.srcmini.com/paper-input/paper-input.html"> < link rel = "import" href = "http://www.srcmini.com/paper-button/paper-button.html"> < link rel = "import" href = "http://www.srcmini.com/paper-dropdown-menu/paper-dropdown-menu.html"> < link rel = "import" href = "http://www.srcmini.com/paper-menu/paper-menu.html"> < link rel = "import" href = "http://www.srcmini.com/paper-item/paper-item.html"> < style> .paperbtn {background: #4682B4; color: white; }.paperinput{width: 25%; }.menu{width:25%; }< /style> < /head> < body> < form is = "iron-form" method = "get" action = "/" id = "basic"> < paper-input class = "paperinput" name = "name" label = "Enter your name" required< < /paper-input> < br> < input type = "checkbox" name = "vehicle" value = "http://www.srcmini.com/bike"> I have a bike< br> < input type = "checkbox" name = "vehicle" value = "http://www.srcmini.com/car"> I have a car< br> < paper-dropdown-menu class = "menu" label = "Icecream Flavours" name = "Flavours"> < paper-menu class = "dropdown-content"> < paper-item value = "http://www.srcmini.com/vanilla"> Vanilla< /paper-item> < paper-item value = "http://www.srcmini.com/strawberry"> Strawberry< /paper-item> < paper-item value = "http://www.srcmini.com/caramel"> Caramel< /paper-item> < /paper-menu> < /paper-dropdown-menu> < br> < paper-button class = "paperbtn" raised onclick = "_submit(event)"> Submit< /paper-button> < paper-button class = "paperbtn" raised onclick = "_reset(event)"> Reset< /paper-button> < h4> You entered the details:< /h4> < div class = "output"> < /div> < /form> < script> function _submit(event) {Polymer.dom(event).localTarget.parentElement.submit(); }function _reset(event) {var form=Polymer.dom(event).localTarget.parentElementform.reset(); form.querySelector('.output').innerHTML=''; }basic.addEventListener('iron-form-submit', function(event) {this.querySelector('.output').innerHTML=JSON.stringify(event.detail); }); < /script> < /body> < /html>