是否可以在表單的標簽內使用標簽？

Question

我正在構建一個使用標簽定義輸入值的表單（許多這樣做）。

這種形式的樣本可以在這里看到。

但是，我的問題是使用復選框和單選按鈕之類的東西。 雖然我想定義一組輸入選項（例如Gender之類的東西），然后使用它們將我的實際輸入內容用“ male”和“ female”包圍，但這似乎會引起沖突，特別是考慮到它采用了原始css屬性，在樣式上是明智的。

在標簽內使用標簽的最佳/正確方法是什么，其中第一個標簽將定義整個區域，而后續標簽僅用於定義特定輸入？

編輯

我上面演示的表單是我面臨的一個問題的示例，但是為了保持一致性，我計划在幾（50+）頁的表單集合中使用此表單樣式，因此，在可能的情況下，我嘗試不針對特定的問題，而是解決我網站上許多頁面上的問題。

Answer 1

我認為您應該改用fieldset和legend標簽，例如

<fieldset>
   <legend>Gender</legend>

   <label for="male"><input type="radio" ... />male</label>
   <label for="female"><input type="radio" ... />female</label>
</fieldset>

fieldset是用於對相關輸入進行分組的邏輯容器， legend表示該字段集本身的介紹性標題。 您的提琴已更新： http : //jsfiddle.net/zrqnT/4/

也可以看看：
http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element
http://dev.w3.org/html5/spec/single-page.html#the-legend-element

Answer 2

這是規格：

http://www.w3.org/TR/html5/forms.html#the-label-element

那里說：

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

如果未指定for屬性，但label元素具有可貼標簽的與表單相關的元素后代，則樹順序中的第一個此類后代是label元素的帶標簽的控件。

因此，您必須提供一個for屬性。 但是，如果您有一個具有相同ID的表單控件，可能就是這種情況。 這里不是這樣。
否則，您可以在代碼周圍加上標簽，但是元素必須是可標簽的。

可標記元素是：

可標記元素
表示可以與標簽元素關聯的元素。

按鈕輸入（如果type屬性未處於隱藏狀態）keygen meter輸出進度選擇textarea

因此，根據您的情況，標簽沒有機會具有這種特定行為

使用字段集和圖例代替

<fieldset>
    <legend>Gender: <em>*</em></legend>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
    <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</fieldset>

Answer 3

只需使用此CSS

#formWrapper label[for=male], #formWrapper label[for=female] { color: red; } 

這將允許您通過直接CSS更改那些標簽。 另一種選擇是僅使用包含div。

<div class="form-item">
    <label>Gender</label>
    <div class="radios">
         <label for="male">Male</label><input type="radio" for="male"/>
         <label for="female">Female</label><input type="radio" for="female"/>
    </div>
</div>

Answer 4

Fabrizio所說的可能有用，但我個人僅使用標題。 您不必一定要為表單使用表單元素。 另外，使用常規的標題元素會給您更大的靈活性。

<div class="stage clear">
    <h3>Gender: <em>*</em></h3>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
     <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</div>