Question

我正在尝试使用polymerjs开发基本形式。单独使用铁形式元素我能够使用以下链接参考中的第二个示例： https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form

但我无法将其与普通的html表合并。

我想要创建的是分别在表格单元格中进行每个输入，类似如下：

<head>
<style>

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>

<button id="myBtn">Click here for video!</button>

<div id="myModal" class="modal">

<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>

</div>

<script>

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

脚本代码：

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

Answer 1

我认为你应该避免使用表格进行布局，并使用iron-flex-layout或flexboxes本身。

这也有助于您实现自适应布局，即根据屏幕尺寸而改变的布局。

请参阅此问题：How do I use flexbox together with Polymer to make tables

指南：

iron-flex-layout：https://elements.polymer-project.org/guides/flex-layout
flexboxes：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来自http://www.w3schools.com/html/html_layout.asp

＆＃34; HTML表格该元素并非设计为布局工具！   元素的目的是显示表格数据。所以，做   不要使用表格进行页面布局！它们会给你带来一团糟   码。并想象一下在重新设计网站后会有多难   几个月。

提示：请勿使用表格进行页面布局！＆＃34;

w3schools.com有一些关于如何使用bootstrap的指南，这对你也有帮助。到目前为止，我发现bootstrap比仅仅使用flexbox更棘手。

因此，我建议您阅读替代方案并编辑您的问题或在遇到问题时提交新问题！

希望它有所帮助。

如何在html表中放置聚合物铁形式输入

1 个答案: