How to put polymer iron form inputs within html table

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, ie 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.