How to put polymer iron form inputs within html table - html

Question

am trying to develop a basic form using 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
but am not able to incorporate this with normal html table.
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>

Answer 1

I think you should avoid using tables for layout purposes and use the iron-flex-layout or flexboxes themselves.
This will also help you achieve a responsive layout, i.e. a layout that will change depending on screen size.
See this question: How do I use flexbox together with Polymer to make tables
Guides:
iron-flex-layout: https://elements.polymer-project.org/guides/flex-layout
flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Exerpt from 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.
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. I find bootstrap trickier than just using flexboxes myself so far.
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.