|
翻譯原文：
http://diger.cn/article.asp?id=359
英文原文：
http://particletree.com/features/rediscovering-the-button-element/
對每一個(gè)程序設(shè)計(jì)者來說，為用戶創(chuàng)建一個(gè)統(tǒng)一的界面是一個(gè)不變的追求。網(wǎng)站中建立一致性是特別困難的，根據(jù)瀏覽器和操作系統(tǒng)的嚴(yán)重不同，幾而且乎什么能做和不能做是任意的，所以視覺表現(xiàn)也很不一樣。在任何地方比你處理表單元素時(shí)和建立標(biāo)準(zhǔn)的外觀的戰(zhàn)斗中最大的失敗變得更加顯然的就是最有名的提交按鈕。
照現(xiàn)在這個(gè)樣子，用Type="submit"輸入即丑陋(Firefox)，還有點(diǎn)神病(Internet Explorer)或者十分玩固(Safari)。用的最多的辦法是使用圖片輸入和我們自己創(chuàng)建這個(gè)該死的東西。這是很不幸的，因?yàn)槊看挝覀冃枰粋�(gè)新的按鈕時(shí)就要被迫于打開Photoshop的單調(diào)乏味。我們需要的是一些更好的東西——一些對設(shè)計(jì)者更加靈活和有意義的東西。幸運(yùn)的是解決方案已經(jīng)有了而且它只需要一點(diǎn)愛，我的朋友們，請?jiān)试S我介紹我的小朋友給你吧：<button>元素。
Inputs VS Buttons
這里是你的標(biāo)準(zhǔn)提交按鈕標(biāo)記：
<input type="submit" value="Submit" />
它在三兄弟里看起來是這樣的：
嗯，這里是提交時(shí)通過創(chuàng)建一個(gè)按鈕元素時(shí)的標(biāo)記：
<button type="submit">Submit</button>
它看起來是這樣的：
這些按鈕就像上面我們的副本一樣工作和表現(xiàn)是一樣的。另外，為了提交表單，你可以使他們無效，添加一個(gè)accesskey或者指定一個(gè)tabindex。除了視覺冷淡以外Safari好像擁有它們(并沒有使得我們能夠利用我們的優(yōu)勢來面對綠色的界面)，<button>標(biāo)簽最酷的地方在于你可以把有用的HTML標(biāo)簽放進(jìn)它們，比如圖片：
就像這樣：
非常好。(好了，他們有點(diǎn)丑陋,但是我說過他們需要一點(diǎn)愛。)事實(shí)上，根據(jù)W3C，這些特殊的視覺差異正是為什么<button>元素被創(chuàng)建的原因。
引用：
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
The Button Element - W3C
因此，我們正在尋找一種設(shè)計(jì)方案同時(shí)在這里我們的朋友寫著一本偉大的互聯(lián)網(wǎng)手冊中有一部分標(biāo)記好像正好在這個(gè)問題上可以幫助我們。這是很方便的，然而不幸的是大部分設(shè)計(jì)師和開發(fā)者甚至不知道這樣一個(gè)標(biāo)簽存在�，F(xiàn)在，在我用按鈕標(biāo)簽取代image input之前，我確定這個(gè)標(biāo)簽和CSS必須滿足一些條件：
條件：
引用：
1、它們要看起來像按鈕。
2、它們在不同的瀏覽器里看起來要一樣。
3、我用在按鈕上的樣式需要同樣用在我可能會用的鏈接上。
4、標(biāo)簽應(yīng)該是靈活的，易用于許多不同的情況。
5、我將能夠有效地使用圖標(biāo)和色彩來傳遞將會發(fā)生的交互類型的信息。
帶著這些適當(dāng)?shù)奶魬?zhàn)，我在解決了夸瀏覽器的挑戰(zhàn)后鉆進(jìn)了CSS之中，得出了下面的結(jié)果：
結(jié)果：
沒有什么了不起的，簡單，但有效�，F(xiàn)在，我喜歡用這種方式處理按鈕是因?yàn)槲铱梢允褂肍AMFAMFAM的1000個(gè)圖標(biāo)庫來舉例說明大量可笑的想法和動作而不用每一次我需要新東西的時(shí)候非得用Photoshop來做一些東西。如果我們快速看一下這些標(biāo)簽，你會注意到最后那兩個(gè)按鈕實(shí)際上就像：
<div class="buttons">
<button type="submit" class="positive">
<img src="/images/icons/tick.png" alt=""/>
Save
</button>
<a href="/password/reset/">
<img src="/images/icons/textfield_key.png" alt=""/>
Change Password
</a>
<a href="#" class="negative">
<img src="/images/icons/cross.png" alt=""/>
Cancel
</a>
</div>
這個(gè)有用的原因是網(wǎng)頁程序中的許多動作是依靠激發(fā)的，因而通過一個(gè)鏈接簡單的發(fā)送一個(gè)用戶到一個(gè)特殊的URL將引發(fā)它們需要做的動作。使用樣式可以為兩個(gè)元素（鏈接和按鈕）工作，無論是用于AJAX或者標(biāo)準(zhǔn)提交都能給我們保持交互方法的一致和適當(dāng)?shù)撵`活性。
只是一個(gè)短暫旁白，你可能想知道為什么在那些圖片中我讓ALT標(biāo)簽空白呢�？赡軙X得驚奇于alt屬性在每個(gè)圖片都是必須的，事實(shí)上不是這樣的�？盏腶lt屬性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，當(dāng)你的用戶努力尋找下一個(gè)目標(biāo)時(shí)節(jié)省他們的寶貴時(shí)間。由于這些圖標(biāo)確實(shí)是多余的，我寧愿不去浪費(fèi)用戶睞接收我使用的圖片而不是接著呈現(xiàn)出來。他們將只會收到“Submit”而不是“Checkmark Submit”，那確實(shí)會讓事情變的有點(diǎn)亂。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 重新認(rèn)識 button 標(biāo)簽 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 重新認(rèn)識 button 標(biāo)簽 [1]
第 2 頁 
