我一直在學習 HTML 中的“for”屬性及其作用，但我偶然發現了一個我尚未理解的奇怪示例
代碼1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>代碼2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>我理解為什么在第一個代碼塊中使用“for”，但我不明白為什么第二個代碼在沒有它們的情況下可以正常作業時隱式使用“for”和“id”。有什么幫助嗎？
uj5u.com熱心網友回復：
這是正確的，沒有它它也能作業。但是將標簽與輸入欄位連接起來很有用。這對于可訪問性也很重要（例如，對于盲人，閱讀文本）。
瀏覽器還允許您單擊標簽并自動聚焦輸入欄位。
對于復選框，這也很有用。但是對于這些，您也可以像這樣圍繞復選框輸入：
<label>
<input type="checkbox"> I agree with the answer above.
</label>
在這種情況下，單擊文本時會自動選中復選框。
帶有標簽的輸入周圍適用于每個輸入欄位。但是描述輸入欄位的文本應該始終在其中。那是什么for：當您的 HTML 不允許標簽環繞時，您可以使用for-attribute。
以下兩個例子：
結構簡單：
<label>
Your Name:<br>
<input type="text"/>
</label>
輸入欄位周圍的復雜結構：
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
uj5u.com熱心網友回復：
根據docs ，它可以在沒有“for”屬性的情況下使用，它會很好。這只是如何使用“for”來省略令人困惑的開發人員的一種選擇。無論如何，如果在標簽內放置復選框，您可以跳過“for”，就可以了。
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
如果您想對其進行樣式設定，則“for”方法更可取，fe使用Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
uj5u.com熱心網友回復：
為了能夠使用帶有復選框的標簽。例如，在渲染時，單擊標簽，它將切換復選框勾選狀態。
編輯：除此之外，它允許將標簽放在頁面上的任何位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/428743.html