[英]How to put polymer iron form inputs within html table
am trying to develop a basic form using polymerjs. 我正在尝试使用Polymerjs开发基本表格。 using iron-forms element alone i was able to create a form using the second example in the following link reference : https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form 单独使用iron-forms元素,我可以使用以下链接参考中的第二个示例创建表单: https : //elements.polymer-project.org/elements/iron-form?view=demo : demo/index.html&active =铁形式
but am not able to incorporate this with normal html table. 但无法将其与普通的html表合并。
what i want to create is to make each input within the table cells seperately, similar as follows: 我要创建的是分别使表格单元格中的每个输入,如下所示:
<form is="iron-form" method="get" action="/" id="submitOptions">
<table style="width: 95%;" align= "center">
<tr>
<td style="width: 50%;text-align: left;">
<paper-input name="User Name" label="User Name" required auto-validate autofocus style="width: 70%;" error-message="Username is required"> </paper-input>
</td>
<td style="width: 50%;c">
<paper-input label="Employer (Optional)" style="width: 70%;">
</paper-input>
</td>
</tr>
<tr>
<td style="width: 50%;text-align: left;">
<paper-input name="password" label="Password" type="password" required char-counter maxlength="10" style="width: 70%;" auto-validate allowed-char-counter minlength="6" error-message="Must be at least 6 characters."></paper-input>
</td>
</tr>
<div class="card-actions">
<tr>
<td colspan="2" align="center"
</br> <paper-button raised onclick="_submit(event)">Submit</paper-button>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<paper-button raised onclick="_reset(event)">Reset</paper-button>
</td>
</tr>
</div>
<tr>
<td colspan="2" align="center">
<div class="output"></div>
</td>
</tr>
</table>
</form>
script code: 脚本代码:
<script>function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit(); }function _reset(event) {
var form = Polymer.dom(event).localTarget.parentElement
form.reset();
form.querySelector('.output').innerHTML = ''; }submitOptions.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);}); </script>
I think you should avoid using tables for layout purposes and use the iron-flex-layout or flexboxes themselves. 我认为您应该避免使用表格进行布局,而应使用iron-flex-layout或flexboxs本身。
This will also help you achieve a responsive layout, ie a layout that will change depending on screen size. 这也将帮助您获得响应式布局,即根据屏幕尺寸而变化的布局。
See this question: How do I use flexbox together with Polymer to make tables 看到这个问题: 如何将flexbox与Polymer一起使用来制作表格
Guides: 指南:
Exerpt from http://www.w3schools.com/html/html_layout.asp 摘录自http://www.w3schools.com/html/html_layout.asp
"HTML Tables The element was not designed to be a layout tool! The purpose of the element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months. “ HTML Tables元素并非旨在用作布局工具!该元素的目的是显示表格数据。因此,请勿在表的布局中使用表!它们会给您的代码带来混乱。请想象一下它有多难几个月后将重新设计您的网站。
Tip: Do NOT use tables for your page layout!" 提示:请勿在表格布局中使用表格!”
w3schools.com has got some guides on how to use bootstrap which will help you as well. w3schools.com上有一些有关如何使用引导程序的指南,这也会对您有所帮助。 I find bootstrap trickier than just using flexboxes myself so far. 到目前为止,我发现引导程序比我自己仅使用flexboxes更棘手。
So I suggest you have a read up on the alternatives and edit your question or submit a new question when you run into problems with the alternative you have gone for! 因此,我建议您先阅读替代方案,然后在遇到替代方案的问题时编辑问题或提交新问题!
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.