正試圖發展使用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>
感謝您的幫助。現在試圖按照您的建議以不同的方式做到這一點 –