表單標籤的語義

Question

我傾向於試圖避免在功能之外使用ID。這給我帶來了我的問題，當在表單中標記項目時有多種方法。我一直這樣做是爲了避免ID的具體方式;但是，替代方法的專業和客戶是什麼？一種方式對瀏覽器的語義意義是否比其他語義更重要？無障礙如何在其中發揮作用？

我實現的常用方法：

<form role="form" action="#" method="post" name="form" novalidate> 
    <label> 
    <span>Search</span> 
    <input role="search" type="search" placeholder="Search" name="s"> 
    </label> 
    <button role="button" type="submit" name="s-btn">Search</button> 
</form> 

但是，您也可以使用for=""和標籤的ID爲相應的字段。這對type="radio"和type="checkbox"來說明顯更好，但它是否具有比上述更好的語義值？

<form role="form" action="#" method="post" name="form" novalidate> 
    <label for="s">Search</label> 
    <input role="search" type="search" id="s" placeholder="Search" name="s"> 
    <button role="button" type="submit" name="s-btn">Search</button> 
</form> 

而且你甚至可以使用WAI-ARIA與ID的標記爲好，應該在這個凝聚用於與for=""或者是一個獨立的標記方法？

<form role="form" action="#" method="post" id="Form" novalidate> 
    <label id="s" for="sf">Search</label> 
    <input role="search" aria-labelledby="s form" id="sf" type="search" placeholder="Search" name="s"> 
    <button role="button" aria-labelledby="form" type="submit" name="s-btn">Search</button> 
</form> 

我想這個問題是帶來由於無休止的追求均衡維護，優化，語義和可訪問性。

Answer 1

將控件嵌套到標籤（隱式）和使用id以及屬性（顯式）中有兩種方法有不同的積極和消極方面，但是我從專業人士看到的當前趨勢是遠離隱式和更多。

顯式允許您的文檔具有更大的靈活性，並且html5允許表單控件放置在文檔中的任何位置，因此它們在這種情況下攜手並進。

隱式不能用於複選框和無線電，因爲標籤元素必須位於輸入表單控件之後，所以存在一個限制。幾年前隱含的瀏覽器支持也很差，並且seems to still have trouble with screen readers。隱式增加了可訪問性和可用性，因爲標籤的大小增加了表單控件的可點擊表面積。

wai-aria仍然沒有完成，並且在瀏覽器/屏幕閱讀器支持方面也存在問題，但是這當然不應該阻止您在可能的情況下實施它。理想情況下，如果不支持，它只會簡單地失敗（就像使用非HTML5支持瀏覽器的html5輸入一樣），但我會在這裏謹慎並謹慎測試。不同的支持也可以有一個屏幕閱讀器/瀏覽器/用戶代理閱讀，而不是尋求外界和默認imp/exp標籤。

語義：meh。問10個開發者，你會得到10個答案。但正確的答案是您正確使用該窗體控件？它是否正確標記？正確和正確的含義是否會驗證並通過無障礙測試？在您的個人情況下，在這種用例中，正確且正確地表示您是否正在使用正確的控件/標籤來提供用戶所進行的交互？只有你可以回答後者...如果你使用豪華校長，你不應該有任何問題。

備註：關於避免ids，在這種情況下，ids是最佳的，他們正在用於功能...我假設表單控件正在處理提交？我可能在功能方面與你的預期用途有關，但如果你避免使用它們，你可以使用ID，但不要將它們定位在樣式表中。