|
技巧延伸
在這個(gè)單元中,我們會(huì)先討論tabindex和accesskey屬性,看看它們?nèi)绾问贡韱巫兊酶尤菀诪g覽.我們也會(huì)研究能幫助組織表單區(qū)域的<fieldset>標(biāo)簽,最后,我們會(huì)看一些CSS,因?yàn)樗馨驯韱瓮庥^修飾得更漂亮.
神奇的tabindex：
我們能輕易加上的功能之一是tabindex屬性.加上tabindex,為它指定一個(gè)數(shù)值之后,使用者就能以鍵盤切換正在使用的表單元素(通常是Tab鍵).按下Tab就會(huì)依照我們所制定的順序跳到下一個(gè)表單元素.根據(jù)預(yù)設(shè)值,每個(gè)能互動(dòng)的元素都隱含有tabindex,但使用tabindex能收回瀏覽器指派的順序,讓你完全掌握控制權(quán).
舉例來(lái)說,讓我們?yōu)橄惹暗氖纠?方法C)里面的表單元素加上tabindex屬性:
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>
現(xiàn)在,當(dāng)使用者在表單內(nèi)切換輸入框的時(shí)候,我們能確定切換的順序與我們期望的順序完全相同:Name,Email,Remenber this info與submit按鈕.
在設(shè)計(jì)復(fù)雜,單一行有許多輸入框或者其他表單元素的表單時(shí),使用tabindex設(shè)定切換順序的優(yōu)點(diǎn)就顯而易見了.
為何指定切換順序?
除了在我們表單上實(shí)施非常簡(jiǎn)單之外,還能再次幫助到行動(dòng)受限的使用者,使其能完全以鍵盤瀏覽表單內(nèi)容.他們不需要抓起鼠標(biāo)點(diǎn)擊每個(gè)部分,只需要用Tab鍵就能依照正確的順序遍歷每個(gè)表單元素.請(qǐng)為那些無(wú)法同時(shí)使用雙手瀏覽網(wǎng)頁(yè)的人想想,這真的很有幫助.
為頻繁使用的表單指定快捷鍵
與tabindex類似的.accesskey屬性是另一個(gè)容易加上的功能,不僅能幫助行動(dòng)受限的使用者,對(duì)其他人來(lái)說也是方便極了.
舉例來(lái)說,如果為表單內(nèi)包圍著Name:的<label>標(biāo)簽上加上accesskey屬性,那么在使用者按下指定的按鍵時(shí),光標(biāo)就會(huì)自動(dòng)跳到與說明文字相關(guān)的輸入框.
我們來(lái)看看達(dá)成這個(gè)效果所需要的代碼:
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name" accesskey="9" >Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>
使用者必須在按下9這個(gè)按鍵的時(shí)候同時(shí)按下Alt或Ctrl鍵,根據(jù)系統(tǒng)而定,之后光標(biāo)就會(huì)立刻移到Name:的輸入框里頭.
容易使用的搜索框
在設(shè)計(jì)會(huì)經(jīng)常使用的表單時(shí)(比如搜索框,用戶登錄等等),加上accesskey屬性格外有用,使用者不必伸手去拿鼠標(biāo),就能使用鍵盤立刻切換到適合的位置,開始進(jìn)行輸入.
有件事必須留意,雖然不是所有瀏覽器都支持accesskey,但是加上這個(gè)屬性對(duì)支持的瀏覽器使用這很有幫助,舉例來(lái)說,要是我們加上accesskey="9"的搜索位置時(shí),windows使用者可以按Alt+9,而Mac使用者則能以Command+9直接切換到搜索輸入框內(nèi)了.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——表單 [3] 下一頁(yè) 標(biāo)記語(yǔ)言——表單 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——表單 [4]
