推薦：網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--力場(chǎng)
美的形式原理存在于藝術(shù)各個(gè)門(mén)類，網(wǎng)站制作也不例外。好的網(wǎng)站制作必須遵守這些設(shè)計(jì)原理，將美融匯于網(wǎng)站制作中。網(wǎng)站制作中的頁(yè)面原理的講解雖然分十二節(jié)進(jìn)行

翻譯原文：
http://diger.cn/article.asp?id=359

英文原文：
http://particletree.com/features/rediscovering-the-button-element/

對(duì)每一個(gè)程序設(shè)計(jì)者來(lái)說(shuō)，為用戶創(chuàng)建一個(gè)統(tǒng)一的界面是一個(gè)不變的追求。網(wǎng)站中建立一致性是非凡困難的，根據(jù)瀏覽器和操作系統(tǒng)的嚴(yán)重不同，幾而且乎什么能做和不能做是任意的，所以視覺(jué)表現(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í)就要被迫于打開(kāi)Photoshop的單調(diào)乏味。我們需要的是一些更好的東西——一些對(duì)設(shè)計(jì)者更加靈活和有意義的東西。幸運(yùn)的是解決方案已經(jīng)有了而且它只需要一點(diǎn)愛(ài)，我的朋友們，請(qǐng)答應(yīng)我介紹我的小朋友給你吧：<button>元素。

Inputs VS Buttons

這里是你的標(biāo)準(zhǔn)提交按鈕標(biāo)記：

<input type="submit" value="Submit" />

它在三兄弟里看起來(lái)是這樣的：

嗯，這里是提交時(shí)通過(guò)創(chuàng)建一個(gè)按鈕元素時(shí)的標(biāo)記：

<button type="submit">Submit</button>

它看起來(lái)是這樣的：

這些按鈕就像上面我們的副本一樣工作和表現(xiàn)是一樣的。另外，為了提交表單，你可以使他們無(wú)效，添加一個(gè)accesskey或者指定一個(gè)tabindex。除了視覺(jué)冷淡以外Safari似乎擁有它們(并沒(méi)有使得我們能夠利用我們的優(yōu)勢(shì)來(lái)面對(duì)綠色的界面)，<button>標(biāo)簽最酷的地方在于你可以把有用的HTML標(biāo)簽放進(jìn)它們，比如圖片：

就像這樣：

非常好。(好了，他們有點(diǎn)丑陋,但是我說(shuō)過(guò)他們需要一點(diǎn)愛(ài)。)事實(shí)上，根據(jù)W3C，這些非凡的視覺(jué)差異正是為什么<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í)在這里我們的朋友寫(xiě)著一本偉大的互聯(lián)網(wǎng)手冊(cè)中有一部分標(biāo)記似乎正好在這個(gè)問(wèn)題上可以幫助我們。這是很方便的，然而不幸的是大部分設(shè)計(jì)師和開(kāi)發(fā)者甚至不知道這樣一個(gè)標(biāo)簽存在。現(xiàn)在，在我用按鈕標(biāo)簽取代image input之前，我確定這個(gè)標(biāo)簽和CSS必須滿足一些條件：

條件：

引用：
1、它們要看起來(lái)像按鈕。
2、它們?cè)诓煌�的瀏覽器里看起來(lái)要一樣。
3、我用在按鈕上的樣式需要同樣用在我可能會(huì)用的鏈接上。
4、標(biāo)簽應(yīng)該是靈活的，易用于許多不同的情況。
5、我將能夠有效地使用圖標(biāo)和色彩來(lái)傳遞將會(huì)發(fā)生的交互類型的信息。

帶著這些適當(dāng)?shù)奶魬?zhàn)，我在解決了夸瀏覽器的挑戰(zhàn)后鉆進(jìn)了CSS之中，得出了下面的結(jié)果：

結(jié)果：

沒(méi)有什么了不起的，簡(jiǎn)單，但有效�，F(xiàn)在，我喜歡用這種方式處理按鈕是因?yàn)槲铱梢允褂肍AMFAMFAM的1000個(gè)圖標(biāo)庫(kù)來(lái)舉例說(shuō)明大量可笑的想法和動(dòng)作而不用每一次我需要新東西的時(shí)候非得用Photoshop來(lái)做一些東西。假如我們快速看一下這些標(biāo)簽，你會(huì)注重到最后那兩個(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)頁(yè)程序中的許多動(dòng)作是依靠激發(fā)的，因而通過(guò)一個(gè)鏈接簡(jiǎn)單的發(fā)送一個(gè)用戶到一個(gè)非凡的URL將引發(fā)它們需要做的動(dòng)作。使用樣式可以為兩個(gè)元素（鏈接和按鈕）工作，無(wú)論是用于AJAX或者標(biāo)準(zhǔn)提交都能給我們保持交互方法的一致和適當(dāng)?shù)撵`活性。

只是一個(gè)短暫旁白，你可能想知道為什么在那些圖片中我讓ALT標(biāo)簽空白呢。可能會(huì)覺(jué)得驚異于alt屬性在每個(gè)圖片都是必須的，事實(shí)上不是這樣的�？盏腶lt屬性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，當(dāng)你的用戶努力尋找下一個(gè)目標(biāo)時(shí)節(jié)省他們的寶貴時(shí)間。由于這些圖標(biāo)確實(shí)是多余的，我寧愿不去浪費(fèi)用戶睞接收我使用的圖片而不是接著呈現(xiàn)出來(lái)。他們將只會(huì)收到“Submit”而不是“Checkmark Submit”，那確實(shí)會(huì)讓事情變的有點(diǎn)亂。

分享：網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--比例
美的形式原理存在于藝術(shù)各個(gè)門(mén)類，網(wǎng)站制作也不例外。好的網(wǎng)站制作必須遵守這些設(shè)計(jì)原理，將美融匯于網(wǎng)站制作中。網(wǎng)站制作中的頁(yè)面原理的講解雖然分十二節(jié)進(jìn)行