適當的標籤/輸入格式的好處

我把我的html5/css3灰塵，並遇到了讓我想知道的東西。以下是來自競爭性文檔的兩個例子。適當的標籤/輸入格式的好處

在這兩種形成輸入/標籤組的方式之間進行可維護性/設計等有什麼好處，特別是在HTML5中的Windows應用商店應用中？請讓我知道，如果這不能簡潔地回答，可能只是由意見辯論，所以我可以解決這個問題，如果是這樣的話。

所以從MS Docs;

<label class="a-label-class"> 
    <input id="option1" type="checkbox" class="a-input-class" /> 
    Option 1 
</label>

來自其他文檔;

<div> 
    <input id="option1" class="a-input-class" name="option1" type="checkbox"/> 
    <label for="option1" class="a-label-class">Option 1</label> 
</div>

第一個例子是少一點的標記。除了他們似乎完成同樣的事情。然而，第二個例子使用for，似乎給了使用div容器更多的設計選項。

所以我的問題是，是一種技術上更好的做法，出於某種原因？如果有更好的方法有什麼好處？謝謝！

來源

2015-07-21 Chris W.

IE曾經是所需的輸入標籤裏面爲了工作，除非https://css-tricks.com/snippets/jquery/click-input-when-label-clicked/ –

正如你所說的一個可能會有基於意見的論點。但一個實際的區別是，非嵌套方法允許您在頁面上的不同位置上有標籤和輸入。根據您的設計，您可能希望讓我們通過單擊頁面頂部的標籤來將輸入內容聚焦在頁面中間。 – Arbel

這兩種方法都被承認，並且在語義角色上實際上是等價的。第一層次的方式與第二層DOM的元素的組織是一致的，更加表達和簡潔。無論如何，如果有用的這下面是從最權威的來源之一

從 HTML 生活標準 - 最後更新7月20日

標籤元素代表在用戶界面的標題。標題可以使用for屬性或通過將表單控件放置在標籤元素本身內部的特定表單控件（稱爲標籤元素的標籤控件）關聯。

除了以下規則另有規定外，標籤元素沒有標籤控件。

可以指定for屬性來指示要與標題關聯的的表單控件。如果指定了屬性，則該屬性的值必須是與標籤元素相同的文檔中的一個可插入元素的ID。如果指定了屬性，並且在Document中有一個元素的ID等於值 for屬性，並且第一個這樣的元素是可標記元素那麼該元素是標籤元素的標籤控件。

如果未指定for屬性，但標籤元素具有可描述元素後代，則樹順序中的第一個這樣的後代是標籤元素的標記控制。

來源

2015-07-21 18:02:57 scaisEdge

適用於我，謝謝+1 –

適當的標籤/輸入格式的好處

回答

相關問題