被遺忘掉的button標籤_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:45:45
原創
1286 人瀏覽過
註:這篇文章已經有人翻譯過重新認識button 標籤,但覺得其中有很多地方值得推敲,不太好理解。因此本人結合個人學習體會重新翻譯而成此文。
英文原文:http://particletree.com/features/rediscovering-the-button-element/
對於每個程式設計者來說,為使用者提供一個風格統一的介面是一項不變的要求。但在網頁上實現這種風格統一卻顯得格外困難,因為不同作業系統、不同瀏覽器對網頁內容的表現方式存在著差異,而且這種差異幾乎毫無規律性。在處理表單元素過程中這個問題顯得格外突出,其中,讓許多人束手無策的就是「Submit」按鈕表現標準統一化的問題。
比如說,屬性為type="submit"的input標籤在不同的瀏覽器中要么顯得非常醜陋(在Firefox中),要么就是存在這樣那樣的缺陷(在Internet Explorer),甚至表現得十分死板(在Safari中)。應對這個問題的解決方法通常是透過設定input的屬性為image然後自己動手設計一個按鈕圖片出來。但我們卻因此而不得不在每次需要使用按鈕時增加大量額外煩人的工作。因此,我們需要一個更好的解決方案,一個對設計者來說更具彈性、更有意義的方法。幸運的是,這種方法實際上已經存在,需要的是我們再做一點點工作。朋友們,現在請允許向大家介紹我們這位可愛的小盆友
他們表現樣式如下:

這些按鈕和我們上面創建的按鈕在運行和表現行為中沒有任何區別。除了用他們來提交表單為,你還可以設定他們為不可用,添加快捷鍵或設定一個tabindex等。還好,除了表現樣式不同外,Safari都支援這些功能(和input的按鈕相比,Safari中button按鈕缺少表面的液態效果)。
他們在瀏覽器的外觀如下:

還不錯哦。實際上,根據W3C的定義,


更改密碼

更改密碼



>取消
這樣做的目的是因為在網頁應用程式中很多動作都是事件(REST)驅動的,因此透過一個特定的URL發送使用者請求可以把這些動作初始化。使用在兩種元素上都可以應用的樣式,使我們在維持Ajax和標準提交按鈕引起的交互時的樣式統一手段更加靈活。
現在你可能會問,為什麼我要把圖像元素的alt屬性留成空白呢? alt是img元素的必要屬性,它用來解釋圖像的內容,而這裡卻沒有圖像的相關說明,這的確有點費解。不過,與「缺少」屬性不同,屬性值「為空」是完全符合標準的,他告訴瀏覽器這些圖像代表了一些完全可以忽略的信息,這也使瀏覽者不用因為提示信息的遮擋而找不到下一個按鈕。由於此處的圖示完全是多餘的,因此我們寧願不去浪費用戶的時間去查看這個完全是為了實現介面風格統一而使用的圖示。
CSS樣式表
用來控制這些按鈕樣式的CSS大部分內容都很直觀,不同瀏覽器中的稍許差別,就會導致我們下面的程式碼中要分別為他們應用不同的padding值,還好,這一切都是完全可以實現的。
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5f;
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:au 🎜>padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px;{
padding:5px 10px 5px 7px; 17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
border:none;
width:16px;
height:16p;}
還有一個問題就是,Internet Explorer在呈現長按鈕時存在一些bug。有關這方面的資訊你可以在Jehiah.cz上找到,不過在上面的CSS程式碼中我們透過聲明width和overflow的值會在一定程度上避免問題的出現​​。

為按鈕加一點色彩
在Wufoo中,我們為中性動作(這裡,作者把change password一類的動作叫作中性動作,把「確定」、「提交「一類的動作叫做正向動作,而把「放棄」、「取消」一類的動作叫作負向動作)的hover值設為藍色,而把正向動作和負向動作分別設為綠色和紅色。下面的樣式程式碼中就是我們用不同的顏色區分「新增」、「儲存」一類的正向動作和「取消」、「刪除」一類的負向動作的。感覺還不錯,當然你也可以選擇你喜歡的他顏色來使用。 /* 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;
}
/*
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; 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;
}

總結

最後要說的是,這僅僅是我們應對Wufoo中需求而設計的解決方案,不過在我們的努力下它表現還不錯。但這並不是唯一方法,你可以找到更多有趣的方法把按鈕變成圓角甚至更加豐富多彩。由於標籤之間幾乎可以放置任何其他元素,因此你也可以透過插入標籤然後按照Alex Griffioen最新提供的方法來創建一個真正好看的圓角立體按鈕。說實話,我希望對於所有為程式的介面重複使用而努力的設計者來說這只是一個開始。不管怎麼說,我希望你能夠在打開Photoshop製作input按鈕前多思考一下,多看一眼這個幾乎被遺忘的
標籤,也許他會給你驚喜。 標籤之間的所有內容都是按鈕的內容,其中包括任何可接受的正文內容,例如文字或多媒體內容。例如,我們可以在按鈕中包括一個圖像和相關的文本,用它們在按鈕中創建一個吸引人的標記圖像。
唯一禁止使用的元素是影像映射,因為它對滑鼠和鍵盤敏感的動作會幹擾表單按鈕的行為。
可選擇的屬性
屬性值描述DTD
disabled disabled 停用此按鈕。 STF
namebutton_name 規定此按鈕的唯一名稱。 STF
type* button
* reset定義按鈕的類型。 STF
* submit
value some_value 規定按鈕的初始值。此值可被腳本修改。 STF
標準屬性:
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
事件屬性:
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!