以列布局形式 - 輸入和標籤的意外行爲

編輯：錯誤已被解釋。我將研究其他方式來構建帶有輸入元素的多列表單，希望能夠以2016年的風格。以列布局形式 - 輸入和標籤的意外行爲

我是新來的HTML/JS/CSS。我做了w3school的教程，對so.com也不陌生 - 但儘管這是一個很好的一面，但對於初學者來說，將已發佈的解決方案應用於我的問題對於初學者來說是相當棘手的。

任務：構建基本數據庫訪問的簡單網站（想想Access中的VBA-Forms，如果沒有其他方法可用）。 IE11將在受保護的公司環境中用作瀏覽器。在佈局方面，Col1中有多行標籤，Col2中有X個輸入元素 - ColX + 1。

問題：奇怪的是，標籤和輸入行爲不同，即使分配給同一個類。「追加」標籤以預期的方式工作（新標籤在新列/新單元中右側「附加」）。「追加」輸入元素將它們顯示在與最後一行相同的行和列中（例如，請參閱代碼。基本上：column1中標籤單元格的高度現在跨越第2列中的2個單元格）。

我知道在CSS表中設置表單是不好的做法。
我還不確定這是否也適用，如果我需要一個多行，多列（3+）佈局。我認爲非表格解決方案變得相當麻煩。我在w3school和stackoverflow-comments上找到的示例最多使用兩列，一列用於標籤，另一列用於輸入元素。
對於我不甚瞭解的，「display：table-columns」只能用於格式化每行中某個位置的單元格（如電子表格），而不是實際添加可填充的空列。

https://jsfiddle.net/9cjf1465/

的CSS：除了某些格式，創建用於表單（表），段落（行），和單獨的標籤/輸入（細胞）的類。拿出了大部分格式化的東西。

<style type="text/css">  
    div.mydiv { 
     background-color: #f2f2f2; 
     padding: 20px; 
    } 
    form.myform { 
     display: table; 
    } 
    p.myrow { 
     display: table-row; 
    } 
    /* class can used for both label and input? */ 
    .mycell { 
     display: table-cell; 
    } 
    label { 
     text-align: left; 
     vertical-align:middle; 
     padding: 5px; 
    } 
    input{ 
     vertical-align:middle; 
     width: 100%; 
     padding: 8px; 
     margin: 5px; 
     border: 1px solid #ccc; 
     border-radius: 2px; 
     box-sizing: border-box; 
    } 
</style>

的實施例-HTML，簡化：注意輸入和標籤如何表現不同如上所述 - 儘管被分配給相同的類。

<div class="mydiv"> 
    <form class="myform" id="form1" onsubmit="event.preventDefault();getPnr()"> 
     <p class="myrow"> 
      <label class="mycell" for="pnr">Label 1</label> 
      <input class="mycell" type="number" id="pnr" placeholder="Pnr" required > 
      <input class="mycell myimp1" type="submit" id="btn1"> 
     </p> 
     <p class="myrow"> 
      <label class="mycell" for="pnr">Label 2</label> 
      <label class="mycell" for="pnr">Label 3</label> 
      <input class="mycell" type="number" id="pnr" placeholder="Pnr" required > 
     </p> 
    </form> 
</div>

我希望我的問題遇到了權利，我讓自己足夠短 - 已經找誰期待得到一些建議！

乾杯，

馬丁

來源

2016-02-25 Martin Dreher

據我所知標籤&輸入不能同等對待。

標籤是一個容器元素（more info）。

元件，其自靠近，如輸入，圖像等不是容器，因此不能表現得像一個<td>或具有display:table-cell;

這question覆蓋相同區域，說明與輸入在使用的display:table-cell;將根據W3.org

來源

2016-02-25 13:52:17 Ben

實驗根據W3.org嗨Ben.Thanks指出，明顯的錯誤！我以某種方式認爲這只是一個定位問題。讓我困惑的是，Firefox的檢查元素視圖向我展示了不同輸入的不同單元格，所以我以某種方式假定單元格...容器（？）本身是正確創建的。引用的問題[鏈接]（http://stackoverflow.com/questions/15625878/displaytable-cell-not-working-on-anputin-element）_italic_明顯覆蓋了我的問題。感謝您的幫助！對於多餘的問題也很抱歉問題 –

@MartinDreher作爲Ben答案的補充，表格本身並不是邪惡的。他們只是過度使用佈局的目的。如果你的表單允許用戶輸入表格數據，你仍然可以使用表格，並在「2016時尚」範圍內。不需要使用其他標籤並使它們像表格一樣工作。 – Paul

如果您使用表格進行佈局，請務必添加['role =「presentation」']（http://juicystudio.com/article/layout_tables_repair_techniques.php），以便屏幕閱讀器不會嘗試將其解釋爲數據表。 – steveax

以列布局形式 - 輸入和標籤的意外行爲

回答

相關問題