在前面幾篇文曾經提到，因為不是前端出身
很多小概念往往是在開發過程中遇到了錯誤才知道。
(但走到哪裡都會遇到這些錯誤，看來大家都有不明白的小概念XD)
今天再來篇輕鬆小品，讓我們看看人生處處皆Bug ，不是，我是說網頁處處皆Button XD
***表單資料送出***
在開始介紹Button小概念陷阱之前，我們先來看看關於表單資料送出這件事
上圖是一個簡單的模擬表單
在一個頁面中，通常使用者輸入的區塊，我們會用form標籤包住，而form 的 action屬性是 指定提交表單時資料要送至的(後台)位置
然後透過 form 的 submit method，觸發將資料送出的動作，這些處在form標籤中的資訊，就是要送到後台進一步處理的資料
這邊我們先隨便設定送出時會連到Google XD ( 儲存提交時，會跑到Google頁面 )
**作法一 : 表單Submit**
前面講到的submit method，你可以透過選取form本身做觸發
使用 JavaScript 或 jQuery 選取 form element 之後，呼叫 submit method
**作法二 : 按鈕Submit**
透過 按鈕 submit 的作法有兩種，這部分算是跟UI的設計比較有關
在原本的作法中，因為 button 也包在 form 中，此時點按按鈕，就會觸發 form submit，頁面連至Google
但如果把 button 搬到 form 之外呢?
此時點按按鈕，則不會觸發
這種狀況下，因為 button 跟 form 已經沒有關聯了(相隔太遠XD)，所以要透過增加一點關聯性，來讓他知道說點按按鈕要觸發的表單為何
所以替 button 增加設定 form attribute
此時再去點按鈕，就會有反應啦~
以上是就基本的部分介紹概念應用，實際的狀況還是要考量專案架構跟需求啦~
***回歸正題:Button的小陷阱***
好吧，所以前面講了那麼多，button很正常啊? 哪有什麼陷阱?
因為現在的頁面總是包含許多設計
除了"確認"或"儲存"外，也會有許多其他的按鈕，像是"查詢"、"展開"等等
參考以下的例子，在地址後加入一個"查詢"按鈕，點下按鈕後，想想看會發生什麼事?
如果你猜對的話，是的沒錯，她又會連到Google網頁去了!!
此時就會有人想要仰天長嘯問說 : 為什麼??這明明就不是 submit 啊!! XD
這就是今天要講的小概念 : 請記得，在Html中當妳沒有指定時，Button的預設就是Submit
「Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".」 ( 引用自w3schools )
所以如上所言 : 開發時，請養成隨手替 button 指定 type 的好習慣。
通常沒有指定的結果就是 : 點按某個按鈕後，會超乎預料的連到其他某個異空間，查東查西，最後卻一無所獲的懷疑人參。
直到哪天驀然回首，你才發現在燈火闌珊處...一切都是因為沒有幫 button 設定 type。
所以這邊如果查詢時，不希望資料被送出(submit)，就需要替 button 加 type 如下
就曾經遇過美編沒有幫 button 加 type 的習慣，一時不察，測試後才好一陣手忙腳亂，從此成為心中深深的痛 XD
參考資料 :
留言列表
{{ article.title }}