表格中带有type ="submit"的纸质按钮不提交？

Question

我试图使用paper-button与type属性设置为submit(作为一个将与做button元素)提交封闭form,但由于某种原因,无法提交表单.这是一个错误或功能吗？

如何paper-button提交表格？

PS:我在飞镖地(不是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填充整个纸质按钮元素:

<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-elments/paper-elements,因为它不扩展<input>(或任何其他表单元素)但嵌入它.这适用于表单输入元素以及表单提交按钮.

一些或多或少的相关主题

• Polymer Google Group - 聚合物元素作为形式输入元素
• 让HTML5在Form中使用多个聚合物 - 飞镖组件
• Seth Ladd的博客 - 表格,HTTP服务器和带Dart的聚合物
• Dart Polymer表单字段未显示验证错误
• 如何获取HTML5输入以验证它们是否在Polymer Web Components中？

如果只提交按钮是Polymer元素,你可以做的是调用click()单击处理程序中不可见(非聚合物)提交按钮的方法<paper-button> ,详情请参阅
- 聚合物:手动提交表单