类型= 表单中"submit"的纸质按钮不提交？

Question

我试图使用type属性设置为submit的paper-button(就像button元素一样)来提交封闭的form，但由于某种原因它无法提交表单。这是bug还是特性?

如何让paper-button提交表单?

PS: I am in dart land (not js).

Answer 1

正如Gunter所注意到的，你可以创建一个自定义元素，它可以用你想要的语义扩展一些本地元素。

我也遇到了你的问题，我已经创建了一个简单的元素，可以提交到paper-button

<polymer-element name="paper-button-submit" extends="button" noscript>
  <template>
    <style>
      :host {
        border: 0;
        background: transparent;
        padding: 0;
        font-size: inherit;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</polymer-element>

那么你可以这样写

<button type="submit" is="paper-button-submit">Add</button>

并且会得到一个类似纸张的按钮

Answer 2

您可以通过在paper-button元素中放置一个本地按钮来实现表单提交:

<paper-button>
  <button>Sign Up</button>
</paper-button>

然后使用下面的CSS来隐藏原生按钮，同时确保它的hitzone填充整个paper-button元素:

<style shim-shadowdom>
  paper-button {
    padding:0;
  }
  paper-button::shadow .button-content {
    padding:0;
  }
  paper-button button {
    padding:1em;
    background-color: transparent;
    border-color: transparent;
  }
  paper-button button::-moz-focus-inner {
    border: 0;
  }
</style>

Answer 3

在Polymer Google组中已经有关于在表单中使用包含表单元素的Polymer元素的讨论，据我所知，我在SO上回答了一个类似的问题(之后我会做一些研究)。

1)可以扩展输入元素

<polymer-element name="my-element" extends="input">
   ...
</polymer-element>

，像

一样使用

<input is="my-element">

2)您可以在自定义代码中执行表单处理
(从表单元素中读取值并创建AJAX调用以将数据发送到服务器)

3)创建自定义表单元素(扩展第二个)
它执行表单处理和AJAX调用

第一个选项不适用于core- elements/paper-elements，因为它们不扩展<input>(或任何其他表单元素)，而是嵌入它。这适用于表单输入元素，也适用于表单提交按钮。

一些或多或少相关的话题

• 聚合物谷歌组-聚合物元素作为表单输入元素
• 让HTML5在表单中工作与多个聚合物-dart组件
• Seth Ladd的博客-表单，HTTP服务器和聚合物与Dart
• Dart Polymer表单字段未显示验证错误
• 你如何得到HTML5输入来验证，如果他们是在聚合物Web组件?

如果只有提交按钮是一个聚合物元素，您可以做的是在<paper-button>的单击处理程序中的一个不可见的(非聚合物)提交按钮上调用click()方法有关详细信息，请参阅
-聚合物:手动提交表单

Answer 4

不需要创建自定义元素。根据文档，建议使用以下方法:

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

因此，您只需将onclick事件绑定到手动提交表单的函数。

虽然前面的iron-form示例使用了onclick事件，但建议使用on-tap而不是on-click:

提示:对于触发的事件使用on-tap而不是on-click在触摸(移动)和点击(桌面)设备上保持一致。

使用Polymers自己的DOM API也是一个好主意:

function submitForm(e) {
  Polymer.dom(e).localTarget.parentElement.submit();
}