當輸入框獲得焦點時顯示提示
復雜的表單一般具有很多不同的輸入框,如果顯示一些幫助文字,可以讓用戶填起來更容易.當然，你不想讓用戶被一個或更多的解釋表單文字所湮沒。
通過簡單的改變，你可以寫個JavaScript腳本(或者使用可定制的插件),用類似傳統(tǒng)提示的樣式顯示一個消息,來解釋可能產生疑惑的表單元素,或者那種需要要求輸入的內容是特殊格式的輸入框(比如,只允許用字母和數(shù)字組成,并且至少6個字符的用戶名)
jQuery Input Floating Hint Box是一個簡單的插件,可以在輸入框獲得焦點時,顯示完全可以自定義的浮出提示窗.
DHTML Goodies Form Field Tooltip是另一個對表單中輸入內容的交驗工具.它會根據(jù)表單輸入框中的title屬性來顯示一段幫助文字.
充分的留白
正像前面提到過的,如果表單的元素沒有顯示以很清晰,友好的方式顯示,那么會看上去很丑而且混亂.通常我們認為在網(wǎng)站設計中對留白的使用原則,同樣適用于表單,甚至可以一直應用到最小的細節(jié)中.
你可以通過以下的方式來改進表單的設計: 在輸入框周圍增加適當?shù)牧舭?給元素更大或者更好用的尺寸,或者也可以通過調整CSS中的padding屬性來實現(xiàn)輸入框內的留白.例如,試著在下面的兩個輸入框輸入些文字.
只是通過調整padding的和尺寸,第二個輸入框就有更好用的感覺.當多個文字輸入框出現(xiàn)在同一個表單中,這樣會讓人在整體感覺上產生很大的不同,即使從技術上講在用戶填寫表單花費的時間長度上,它并沒有產生很大的不同.
同時,這樣也能讓你在輸入框中看到更多字符.尤其是名字輸入框,應該為了那些較長的名字提供更大的可見空間.超出的字符,會開始將其他的字符擠出視線,所以最好是有足夠的空間來滿足那些較長名字的用戶,讓他們可以更容易的認出錯誤.通過下面的輸入框可以看到較長的名字是如何被截斷的.
讓你的表單更友好
關于易理解的表單的這個主題可以很容易構成一整篇文章或者更多,但是這有一些小貼士可以確保你的表單更友好并且對于不同的用戶來說都可用.
- 在輸入框中都使用title屬性,來幫助那些使用屏幕閱讀器的用戶
- 如果標簽沒有圍繞在所關聯(lián)的輸入框時,使用for屬性來匹配關聯(lián)的輸入框的id.(這樣當用戶點擊label時,焦點也會置入到輸入框內.譯者注)
- 通過給每個元素使用tabindex屬性來組成一個tab隊列(這樣鍵盤使用tab鍵可以依次切換,譯者注)
- 對于tab隊列,使用更大”步長”來增加數(shù)字(如使用”10,20,30…”來替代”1,2,3…”),這樣將來需要增加時不需要重寫所有的tabindex屬性
- 對于復選框和單選框,將標簽(label)放到關聯(lián)元素的后面這樣屏幕閱讀者訪問時,會先讀到標簽,然后是”復選框”或者”單選框”
- 使用<optgroup>來組織<select>
- 使用accesskey屬性來支持鍵盤快捷鍵
延伸閱讀
本文鏈接：http://m.95time.cn/design/doc/2010/7453.asp 
出處：豬窩
責任編輯：bluehearts
上一頁 如何設計具可用性的網(wǎng)頁表單? [5] 下一頁
|
第 1 頁 
第 6 頁 如何設計具可用性的網(wǎng)頁表單? [6]
