html輸入內的標籤或外部？

這個網站： http://proto.io/freebies/onoff/html輸入內的標籤或外部？

<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
    <div class="onoffswitch-inner"></div> 
    <div class="onoffswitch-switch"></div> 
    </label> 
</div>

的問題與此是標籤似乎需要屬性的使用和複選框需要一個ID。很明顯，通過許多複選框的形式，這可能會令人討厭必須始終創建unqiue id。我稍微改變了它（css在小提琴上），但有人知道是否有一個原因，複選框最初放在標籤之外，而不是在？它似乎工作的很好..

http://jsfiddle.net/UJw4F/

<div class="onoffswitch"> 
    <label class="onoffswitch-label"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/> 
    <div class="onoffswitch-inner"></div> 
    <div class="onoffswitch-switch"></div> 
    </label> 
</div>

這個其他人也做了同樣的使用將複選框標籤外： http://cssdeck.com/labs/radio-buttons-clean

來源

2014-01-27 John

-1

w3.org - 的任何輸入元素後裔具有for屬性的標籤元素的ID值必須與屬性的ID值匹配

沒有'for'屬性

你可以做

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/> 
<label class="onoffswitch-label">My Label</label>

和標籤將與複選框

相關跟着我#mickjguy

來源

2014-01-28 00:00:08 user12481

是因爲我在我的崗位說明。但是，爲什麼？它似乎工作正常，沒有額外的好處，標籤和輸入不需要一個for和id屬性，這會減少你的應用程序musr生成的html，並減少邏輯，因爲應用程序不需要爲它們計算唯一的id。如果唯一的原因是w3.org，但它在任何地方都可以工作，那麼我認爲沒有意義。 – John

嗨，約翰，最好的理由是無障礙。如果你曾經嘗試過屏幕閱讀器，你會知道瀏覽頁面有多困難。我建議您通過wave.webaim.org將您的網站/應用程序置於可訪問性問題的理念之中。這是一個很好的資源。 – user12481

html輸入內的標籤或外部？

回答

相關問題