让HTML5在Form中使用多个聚合物飞镖组件



我在阅读Seth Ladd的博客http://blog.sethladd.com/2013/09/forms-http-servers-and-polymer-with-dart.html

假设我重复步骤3和4添加另一个Form组件(Form2),然后在步骤5中导入Form2。因此,步骤5应该看起来像下面的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="parse_form_submit.css">
    <link rel="import" href="person_form.html">
    <script src="packages/polymer/boot.js"></script>
 </head>
 <body>
   <h1>Forms</h1>
<!-- Due to a bug in polymer, we can't use custom attributes.
     See https://code.google.com/p/dart/issues/detail?id=12262
     <person-form action="http://localhost:8888/submit"></person-form>
-->
<!-- in the meantime -->
    <person-form></person-form>
    <form-2><form-2>
  </body>
</html>

我现在应该把"提交"按钮放在哪里——放在其中一个表单中,还是放在导入表单的父表单中?在任何一种情况下,当点击提交按钮时,我如何通过htnl5获得自动验证等?对于在标记中包含自己的提交按钮的单个表单来说,一切都很好,但当提交按钮位于标记外部时,情况就不一样了。

感谢

假设person-formform-2都是封装的表单,则每个表单都有自己的提交按钮。

我认为<form>标记不会查看Shadow DOM来查找自定义元素内部的字段。所以最好这样想:

my-special-form extends form

也就是说,创建一个自定义元素,它本身就是一个完全封装的表单

最新更新