表單元素不會添加標籤

我想要在我的表單元素周圍有一個標籤，以便它可以訪問，但以這種方式編寫它不會傳遞Firefox的WAVE可訪問工具欄，有人可以看到它有什麼問題嗎？表單元素不會添加標籤

這裏是我的代碼：

<div style="width:895px; max-width:100%; text-align:right;"> 
<label for="select document type"> 
Select: 
<select id="view" onchange="toggleElement(this)"> 
<option value="All">All</option> 
<option value="Tenant">A</option> 
<option value="Landlord">B</option> 
</select> 
</label> 
</div>

來源

2014-03-24 user3219859

LABEL標籤不包裝控件。他們應該在他們旁邊。 –

所以它會包裝單詞選擇：？ – user3219859

正確。請參閱：http：//alistapart.com/article/prettyaccessibleforms –

WAVE驗證失敗，因爲您誤解了<label>元素的for屬性的用途。

如果在控件周圍包含<label>，則該控件將自動與該標籤相關聯，並且您不應輸入for屬性。此方法已過時，不應使用，但仍可完成。

如果您沒有將控件包裝在<label>中，那麼for屬性應該是與其關聯的控件的id。

例如...

<label> 
    Select: 
    <select id="view"> 
    ... 
    </select> 
</label>

或者......

<label for="view"> 
    Select: 
</label> 
<select id="view"> 
    ... 
</select>

你似乎是使用for彷彿它會成爲一個提示信息（如果這是你的意思，那麼改爲使用title屬性）。請注意，title屬性有時會被讀取而不是<label>，因此可能會導致混淆。

來源

2014-03-24 18:16:36 freefaller

我不明白爲什麼你會來包裝標籤的元素周圍，使之獲得。但是你可以做任何一種方式：環繞四周，或者有一個for=""匹配元素的id（你的select）。

所以，如果你環繞，你不需要for=，所以這樣的事情應該工作：

<div style="width:895px; max-width:100%; text-align:right;"> 
    <label> 
     Select: 
     <select id="view" onchange="toggleElement(this)"> 
      <option value="All">All</option> 
      <option value="Tenant">A</option> 
      <option value="Landlord">B</option> 
     </select> 
    </label> 
</div>

但你也可以使用一個正確for，而不是包裝的。該for必須在這種情況下，id匹配：

<div style="width:895px; max-width:100%; text-align:right;"> 
    <label for="view"> 
     Select: 
    </label> 
    <select id="view" onchange="toggleElement(this)"> 
     <option value="All">All</option> 
     <option value="Tenant">A</option> 
     <option value="Landlord">B</option> 
    </select> 
</div>

編輯：你可以看到通過驗證你的HTML什麼是錯的： http://validator.nu/

Error: Bad value select document type for attribute for on element label: An ID must not contain whitespace.

:right;">↩<label for="select document type">↩Selec

Error: Any select descendant of a label element with a for attribute must have an ID value that matches that for attribute.

↩Select: ↩<select id="view" onchange="toggleElement(this)">↩<opti

Error: The for attribute of the label element must refer to a form control.

:right;">↩<label for="select document type">↩Selec

上面提到的3個錯誤是糟糕的一切都是因爲for屬性。

來源

2014-03-24 18:10:45

表單元素不會添加標籤

回答

相關問題