精品国产一二三区在线影院,八戒八戒神马影院在线观

主頁 > 知識(shí)庫 > 被遺忘掉的button標(biāo)簽

被遺忘掉的button標(biāo)簽

注：這篇文章已經(jīng)有人翻譯過重新認(rèn)識(shí)button 標(biāo)簽，但是感覺其中有很多地方值得推敲，不太好理解。因此本人結(jié)合個(gè)人學(xué)習(xí)體會(huì)重新翻譯而成此文。
英文原文：http://particletree.com/features/rediscovering-the-button-element/
對(duì)于每個(gè)程序設(shè)計(jì)者來說，為用戶提供一個(gè)風(fēng)格統(tǒng)一的界面是一項(xiàng)不變的要求。但是在網(wǎng)頁上實(shí)現(xiàn)這種風(fēng)格統(tǒng)一卻顯得格外困難，因?yàn)椴煌僮飨到y(tǒng)、不同瀏覽器對(duì)網(wǎng)頁內(nèi)容的表現(xiàn)方式存在著差異，而且這種差異幾乎毫無規(guī)律性。在處理表單元素過程中這個(gè)問題顯得格外突出，其中，讓很多人束手無策的就是“Submit”按鈕表現(xiàn)標(biāo)準(zhǔn)統(tǒng)一化的問題。
比如說，屬性為type="submit"的input標(biāo)簽在不同的瀏覽器中要么顯得非常丑陋（在Firefox中），要么就是存在這樣那樣的缺陷（在Internet Explorer），甚至表現(xiàn)得十分死板（在Safari中）。應(yīng)對(duì)這個(gè)問題的解決辦法通常是通過設(shè)置input的屬性為image然后自己動(dòng)手設(shè)計(jì)一個(gè)按鈕圖片出來。但我們卻因此而不得不在每次需要使用按鈕時(shí)增加大量額外煩人的工作。因此，我們需要一個(gè)更好的解決辦法，一個(gè)對(duì)設(shè)計(jì)者來說更具靈活性、更有意義的方法。幸運(yùn)的是，這種方法實(shí)際中已經(jīng)存在，需要的是我們?cè)僮鲆稽c(diǎn)點(diǎn)工作。朋友們，現(xiàn)在請(qǐng)?jiān)试S向大家介紹我們這位可愛的小盆友<button>同學(xué)！
Input VS Button
下面是你正在使用的提交按鈕標(biāo)簽：
<input type="submit" value="Submit" />
他們?cè)诓煌臑g覽器中的表現(xiàn)樣式分別如下：

而我們使用<button>創(chuàng)建如上按鈕時(shí)代碼：
<button type="submit">Submit</button>
他們表現(xiàn)樣式如下：

這些按鈕和我們上面創(chuàng)建的按鈕在運(yùn)行和表現(xiàn)行為中沒有任何區(qū)別。除了用他們來提交表單為，你還可以設(shè)置他們?yōu)椴豢捎?，添加快捷鍵或者設(shè)定一個(gè)tabindex等。還好，除了表現(xiàn)樣式不同外，Safari都支持這些功能（和input的按鈕相比，Safari中button按鈕缺少表面的液態(tài)效果）。<button>標(biāo)簽最酷的功能就是我們可以在其內(nèi)部放置一些有用的HTML元素，比如可以使用下面的代碼加入圖片：
<button type="submit"><img src="" alt="" /> Submit</button>
他們?cè)跒g覽器的外觀如下：

還不錯(cuò)哦。實(shí)際上，根據(jù)W3C的定義，<button>元素就是為了解決這些表現(xiàn)上的差異才應(yīng)運(yùn)而生的。
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
因此我們要為此尋找一個(gè)設(shè)計(jì)方案，好在擁有海量資料的互聯(lián)網(wǎng)可以為我們提供一些有用的幫助來解決這個(gè)問題。這的確很方便，但是不幸的是很設(shè)計(jì)者和網(wǎng)站開發(fā)者甚至都不知道這個(gè)元素的存在。在我決定用button元素替換掉Wufoo（本文作者的一款網(wǎng)絡(luò)產(chǎn)品，dudo注）前，我得肯定這個(gè)標(biāo)簽和CSS能滿足以下的需求：
需求條件：
1、他們必須具有按鈕的外觀
2、在不同瀏覽器中有相同的表現(xiàn)樣式
3、button中所應(yīng)用的樣式同樣可以在超級(jí)鏈接上使用（因?yàn)閃ufoo中的交互總是使用表單提交的方式和鏈接觸發(fā)Ajax的方式中的某一個(gè)實(shí)現(xiàn)的，他們可能經(jīng)常會(huì)緊挨在一起，因此我需要他們具有相同的表現(xiàn)樣式）
4、在不同的情況下標(biāo)簽?zāi)軌虮憩F(xiàn)靈活，易于修改
5、對(duì)于信息傳遞過程中發(fā)生的事件能夠用圖標(biāo)和顏色有效地區(qū)分
面對(duì)上面的問題，我首先寫出一些CSS來，然后再解決跨瀏覽器的問題。接下來我們就會(huì)看到：
最終結(jié)果

這并沒有什么大驚小怪的，他很簡(jiǎn)單，但是卻非常的有效。我之所以喜歡用這種方式和處理按鈕是因?yàn)槲也槐貫閯?chuàng)建10000個(gè)圖標(biāo)而去啟動(dòng)Photoshop一一創(chuàng)建。如果我們仔細(xì)觀察一下代碼，你就會(huì)發(fā)現(xiàn)后面兩個(gè)按鈕其實(shí)是兩個(gè)鏈接。
<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>
這樣做的目的是因?yàn)樵诰W(wǎng)頁應(yīng)用程序中很多動(dòng)作都是事件（REST）驅(qū)動(dòng)的，因此通過一個(gè)特定的URL發(fā)送用戶請(qǐng)求可以把這些動(dòng)作初始化。使用在兩種元素上都可以應(yīng)用的樣式，使我們?cè)诰S持Ajax和標(biāo)準(zhǔn)提交按鈕引起的交互時(shí)的樣式統(tǒng)一手段更加靈活。
現(xiàn)在你可能會(huì)問，為什么我要把圖像元素的alt屬性留成空白呢？alt是img元素的必要屬性，它用于解釋圖像的內(nèi)容，而這里卻沒有圖像的相關(guān)說明，這的確有點(diǎn)費(fèi)解。不過，與“缺少”屬性不同，屬性值“為空”是完全符合標(biāo)準(zhǔn)的，他告訴瀏覽器這些圖像代表了一些完全可以忽略的信息，這也使瀏覽者不用因?yàn)樘崾拘畔⒌恼趽醵也坏较乱粋€(gè)按鈕。由于此處的圖標(biāo)完全是多余的，因此我們寧愿不去浪費(fèi)用戶的時(shí)間去查看這個(gè)完全是為了實(shí)現(xiàn)界面風(fēng)格統(tǒng)一而使用的圖標(biāo)。
CSS樣式表
用于控制這些按鈕樣式的CSS大部分內(nèi)容都很直觀，不同瀏覽器中的稍許差別，就會(huì)導(dǎo)致我們下面的代碼中要分別為他們應(yīng)用不同的padding值，還好，這一切都是完全可以實(shí)現(xiàn)的。
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
還有一個(gè)問題就是，Internet Explorer在呈現(xiàn)長(zhǎng)按鈕時(shí)存在一些bug。有關(guān)這方面的信息你可以在Jehiah.cz上找到，不過在上面的CSS代碼中我們通過聲明width和overflow的值會(huì)在一定程度上避免問題的出現(xiàn)。
為按鈕添加一點(diǎn)色彩
在Wufoo中，我們?yōu)橹行詣?dòng)作（這里，作者把change password一類的動(dòng)作叫作中性動(dòng)作，把“確定”、“提交”一類的動(dòng)作叫作正向動(dòng)作，而把“放棄”、“取消”一類的動(dòng)作叫作負(fù)向動(dòng)作）的hover值設(shè)為藍(lán)色，而把正向動(dòng)作和負(fù)向動(dòng)作分別設(shè)為綠色和紅色。下面的樣式代碼中就是我們用不同的顏色區(qū)分“添加”、“保存”一類的正向動(dòng)作和“取消”、“刪除”一類的負(fù)向動(dòng)作的。感覺還不錯(cuò)，當(dāng)然你也可以選擇你喜歡的他顏色來使用。
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
總結(jié)
最后要說的是，這僅僅是我們應(yīng)對(duì)Wufoo中需求而設(shè)計(jì)的解決方案，不過在我們的努力下它表現(xiàn)還不錯(cuò)。但是這并不是唯一方法，你可以找到更多有趣的辦法把按鈕變成圓角甚至更加豐富多彩。由于<button>標(biāo)簽之間幾乎可以放置任意其他元素，因此你還可以通過插入<span>標(biāo)簽然后按照Alex Griffioen最新提供的方法來創(chuàng)建一個(gè)真正好看的圓角立體按鈕。說實(shí)話，我希望對(duì)于所有為程序的界面重復(fù)使用而努力的設(shè)計(jì)者來說這僅僅是一個(gè)開始。不管怎么說，我希望你能夠在打開Photoshop制作input按鈕前多思考一下，多看一眼這個(gè)幾乎被遺忘的<button>標(biāo)簽，也許他會(huì)給你驚喜。
附錄：
HTML4.0/xhmtl1.0中的<button>元素
定義和用法
定義一個(gè)按鈕。在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。
<button> 控件與 <input type="button"> 相比，提供了更為強(qiáng)大的功能和更豐富的內(nèi)容。<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。例如，我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本，用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像。
唯一禁止使用的元素是圖像映射，因?yàn)樗鼘?duì)鼠標(biāo)和鍵盤敏感的動(dòng)作會(huì)干擾表單按鈕的行為。
可選擇的屬性
屬性值描述DTD
disabled disabled 禁用此按鈕。 STF
namebutton_name 規(guī)定此按鈕的唯一名稱。 STF
type* button
* reset定義按鈕的類型。 STF
* submit
value some_value 規(guī)定按鈕的初始值。此值可被腳本修改。 STF
標(biāo)準(zhǔn)屬性：
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
事件屬性：
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

標(biāo)簽：黃山湘潭煙臺(tái) 湖北通遼懷化賀州山南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《被遺忘掉的button標(biāo)簽》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。