a , input, button 的差別

早先被 <a> <button> <input> 這三種標簽給混淆了許久,
現在有了  bootstrap 等共通樣式,
加了個 class="btn" 三個標簽完全一個樣,
<input> 跟  <button>  又一樣有 type="button" 跟 “type="submit" 可以選,
最後連點下去的行為都可以用 JavaScript 來改變和操作,
那這樣到底要怎麼選標簽?

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

從 W3C 的說明上可以很清楚地看到 <button> 最大的優勢與差別是可以有更豐富的編排,在內容中放上圖或是其他東西。
比起  <input> ,<button></button> 中間的彈性高許多,而且可以有更好的語義。
<a> 雖然也可以用 href 屬性用 get 傳入變數,不過整體上功用相差蠻多,最好是純當超連結用

<input type="button" value="Page" onclick="location.href='http://www.domain.com';">

用上面這種加入點擊的 JavaScript 事件 <input> 跟 <button> 也可以簡單做到超連結,不過沒有特殊的理由的話這見識還是讓給 <a>來做,保持語義正確。

有一些 bug 讓網路上激起了用 <input> 跟 <button> 的爭論,例如:
在 firefox 上 input 無法設定行高的bug,
button 在 ie 傳值不同的問題…等等

Important: If you use the <button> element in an HTML form, Internet Explorer, prior version 8, will submit the text between the <button> and </button> tags, while the other browsers will submit the content of the value attribute.
http://www.w3cschool.com

如果是 ie 8 以前的版本,submit 的 value 會是 <button></button> 中間的文字而不是 value 的值。

可以加入下面這段 JavaScript 程式碼讓 ie 6 / 7 行為也跟一般瀏覽器一致


$(function () {
   // IE 7 and below <button> fix 
   // See: http://www.peterbe.com/plog/button-tag-in-IE 
   if ($.browser.msie) { 
      if ($.browser.version === "7.0" || 
          $.browser.version === "6.0") { 
          $("button[name][value]").live('click', function () {
             var $this = $(this), 
             name = $this.attr("name"), 
             value = $this.attr("value"); 

   // Assemble replacement hidden field, same name, same value         
             $("<input type='hidden' />") 
                .attr("name", name) 
                .val(value) 
                .insertAfter($this); 

   // Rename this field so IE doesn't overwrite value           
             $this.attr("name", "ie_" + name); 

   // TODO: Do we need to rename any other buttons with the same name? 
   // As far as I know, it doesn't seem necessary 
      }); 
     } 
   } 
});

所幸過了幾年下來,漸漸的一些問題都被排除,剩下的問題現在的現代瀏覽器大多差異不大, ie6 / 7 也在漸漸被淘汰中,大部份的人都開始建議在 type="submit" , type="button"的情況用 <button>, bootstrap 3.0 也建議用 <button> 確保跨瀏覽器編排的一致

有點慶幸活在瀏覽器要開始標準化的年代哈哈

a , input, button 的差別” 有 1 則迴響

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s