HTML表單標籤有兩種選擇

我通常樣式我的表格格式HTML表單標籤有兩種選擇

<label for="CompanyNameTextBox"> 
    <span>Company</span> 
    <input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" /> 
</label>

這樣我可以樣式的CSS像這樣：

.input[type=text] span 
{ 
    display: inline-block; 
    width: 200px; 
}

和我並排佈置一個漂亮的側我的標籤位於表單元素的左側。這適用於我應該添加的所有元素。

現在，我有一個字段：信用卡到期日。

這是特殊的，我有一個標籤兩個選擇列表：

<label> 
    <span>Expiry Date</span> 
    <select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList"> 
     ... 
    </select> 
    <select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList"> 
     ... 
    </select> 
</label>

如果我儘量選擇後者（年）則默認回選擇第一（月），即使我的天堂未在標籤上指定for屬性。

所以問題是，我該怎麼辦？我不能工作了，如果我做的形式錯誤（我不應該在事實上把input的label內），或者，如果我必須做一些愚蠢的解決辦法像棍子第二select裏面自己label。

來源

2013-07-17 Chris

爲什麼不移動標籤之外的元素？我不明白... 這樣做的正常方法是使用'label'元素的'for'屬性。您將仍然具有相同的視覺輸出，並且如果您單擊標籤上指定的元素將被聚焦。 – ikromm

@JohnKrommidas我認爲在過去，我發現了我目前使用的技術，並堅持下去，直到現在從未成爲問題。正如其他一些答案所述，它似乎是一種有效的技術，直到我嘗試做一些與標準稍有不同的事情。 – Chris

MDN on <label> says:

HTML元素表示在用戶界面一個項目的標題。它可以通過使用屬性或通過將控制元素放置在標籤元素內與控件相關聯。這種控件稱爲標籤元素的標籤控件。

和

比標記的對照其他未貼標籤的元件是允許的。

所以，如果你把一個控制元件標籤裏面是一樣的寫標籤for這個元素，所以你看，當你把一個標籤內的兩個輸入字段，其中出現的問題。

您可以將第二個控件放置在標籤的外部或兩者之外，併爲第一個輸入元素製作for，或者您可以爲兩個輸入字段製作兩個單獨的標籤，任何這些組合都應該適用於您指定for屬性。

來源

2013-07-17 08:43:18

也許如果表單元素在標籤中，它默認選擇第一個元素。但是你可以指定第二個字段作爲屬性（可能是瀏覽器特定的，在firefox 22中工作）。

來源

2013-07-17 08:43:15

前面已經說過在Should I put input tags inside a label tag?這是根據W3完全有效的，但可能會產生與WCAG和一些瀏覽器實現的問題。

在這種情況下，你只有一個標籤，這是不好的，因爲應爲每個輸入元素一個標籤內的兩個輸入元素。所以我的建議是添加另一個標籤，並在每個標籤中放入一個元素。

來源

2013-07-17 08:45:17 Michael

該頁面的引用：'我喜歡使用第一個或第二個示例，因爲它可以給你更多的風格控制。我想我可能已經按照我現在做過的那種方式來支持自己進入角落（在這篇文章中提到的第三種技術）。 – Chris

對HTML5的規範「w3.org: 4.10.6 The label element」說：

如果沒有指定的屬性，但標籤元素有一個貼標籤的元素後裔，然後在樹順序的第一個此類後代是標籤元素的標記的控制。

對於HTML 4「w3.org: 17.9.1 The LABEL element它更嚴格：

的label元件可以被用於附加信息，以控制各label元件正好與一個形式控制相關聯

。

因此，您可能必須將兩者都包裝在容器中以獲得相同的視覺輸出：

<div class="multiple_inputs"> 
    <label> 
     <span>Expiry Date</span> 
     <select name="ExpiryDateMonthDropDownList"></select> 
    </label> 
    <select name="ExpiryDateYearDropDownList"></select> 
</div>

當然，您還可以在第二個字段中添加另一個<label>。

來源

2013-07-17 08:45:26 insertusernamehere

HTML表單標籤有兩種選擇

回答

相關問題