2016-10-13 98 views
0

正試圖發展使用polymerjs的基本形式。 使用鐵形式單獨元件我能夠創建使用在下面鏈路參考 第二示例的形式: https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form如何將聚合物鐵形式輸入內html表

但我不能夠與正常的HTML表合併於此。

我想創造什麼是使表格單元格中的每個輸入seperately,類似如下:

<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>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> 

回答

1

我想你應該避免使用表格排版目的和使用iron-flex-layout或flexboxes本身。

這也將幫助您實現響應式佈局,即根據屏幕大小而變化的佈局。

看到這個問題:How do I use flexbox together with Polymer to make tables

指南:

Exerpt從http://www.w3schools.com/html/html_layout.asp

「HTML表格該元素並非設計爲佈局工具! 元素的用途是顯示錶格數據。所以, 不使用表格來進行頁面佈局!他們會把你的 代碼弄得一團糟。想象一下在幾個月後重新設計你的網站會有多難。

!提示:不要使用表格的頁面佈局」

w3schools.com已經得到了關於如何使用引導一些導遊,這將有助於你還有我覺得引導不是僅僅使用flexboxes自己麻煩到目前爲止,

因此,我建議你讀了關於替代品,當你遇到你已經走了替代問題,編輯您的問題或提出新的問題!

希望它能幫助。

+0

感謝您的幫助。現在試圖按照您的建議以不同的方式做到這一點 –