實施範例4

4.使用文字標籤來聯繫表單控件

這項技巧的目的是利用label元素把文字標籤與表單控件項目聯繫起來,以確保輔助軟件能正確讀出這些控件的相關文字內容。透過使用for屬性,把標籤附加在特定的表單控件上。而該屬性的值必須與控件元素的id屬性的值互相配合。

id和name屬性的值可以相同,但它們必須同時使用。而在網頁中,該id屬性的值必須是獨特的。請注意,對於複選框和單選鈕控件(type="checkbox" 和 type="radio"),標籤的位置需要放到input元素後面。

註一︰以下是使用顯式標籤作聯繫的元素項目。
input type="text
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select

註二︰以下各項均不使用label元素,因為它們各自的屬性均可提供其標籤訊息。例如提交或重置按鈕的value屬性,圖像按鈕的alt屬性,或是按鈕元素本身的內容。

提交或重置按鈕(input type="submit" 或 input type="reset")
圖像按鈕(input type="image")
隱藏式輸入欄位(input type="hidden")
腳本按鈕(使用 button 元素或 <input type="button">)

範例︰

範例一︰文字輸入欄位

以下的文字欄所使用的顯式標籤是"名字︰"。而label元素的for屬性與 input 元素的id屬性互相配合。

範例代碼︰

<label for="firstname">名字︰:</label>
<input type="text" name="firstname" id="firstname" />

範例二︰複選框

範例代碼︰

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

範例三︰單選鈕

以下是一組相聯的單選鈕控件,在每一個元素上都有清晰的說明和標籤。

範例代碼︰

<h1>選擇炸麵包圈</h1>
<p>選擇你喜愛的柞麵包圈種類,然後點選"購買"按鈕。</p>

<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">巧克力</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">奶油</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">蜜糖</label><br/>
<input type="submit" value="購買"/>
</p>
</form>