摘要: 和 的差別
最大的差別在於 <button> 有開始與結束標籤，因此你可以在 <button></button> 之間放置各種內容，而 <input> 就會比較受限制。除了這點，各種瀏覽器在 submit 表單時，行為也會有所不同，為了釐清，我用 apache + mod_python 做個實驗。
實驗 1，<button> 不指定 type 屬性與 <input type="button"> 的差別：
建立兩個檔案，內容如下：
index.html
<HTML>
<BODY>
<FORM action="py/test.py" method="post">
<BUTTON name="btn" value="AAAA">BBBB</BUTTON>
<INPUT name="ipt" type="button" value="CCCC">
</FORM>
</HTML>
/py/test.py
def index(req):
form = req.form
btn = form['btn'] if form.has_key('btn') else None
ipt = form['ipt'] if form.has_key('ipt') else None
return (btn, ipt)
瀏覽器畫面顯示如下：
按下 BBBB (<button> 不指定 type 屬性)的結果：
IE6，IE8：無反應
Chrome 26：送出表單，回應 (Field('btn', 'AAAA'), None)
Firefox 19：送出表單，回應 (Field('btn', 'AAAA'), None)
Safari：送出表單，回應 (Field('btn', 'AAAA'), None)
會有這樣的差別是因為 IE 的 <button> 預設 type="button"，而其他瀏覽器預設 type="submit"。
按下 CCCC (<input type="button">)的結果：
IE6，IE8：無反應
Chrome 26：無反應
Firefox 19：無反應
Safari：無反應
<input type="button"> 則只是產生一個按鈕外觀，當然按下也不會有任何動作(可參考第一篇回應提供的資料)。
實驗 2，<button type="submit"></button> 與 <input type="submit"> 比較：
index.html
<HTML>
<BODY>
<FORM action="py/test.py" method="post">
<BUTTON name="btn1" type="submit" value="AAAA">BBBB</BUTTON>
<BUTTON name="btn2" type="button" value="CCCC">DDDD</BUTTON>
<INPUT name="ipt" type="submit" value="EEEE">
<INPUT name="txt" value="FFFF">
</FORM>
</HTML>
/py/test.py
def index(req):
form = req.form
btn1 = form['btn1'] if form.has_key('btn1') else None
btn2 = form['btn2'] if form.has_key('btn2') else None
ipt = form['ipt'] if form.has_key('ipt') else None
txt = form['txt'] if form.has_key('txt') else None
return (btn1, btn2, ipt, txt)
瀏覽器畫面顯示如下：
先來看按下 BBBB (<button type="submit">) 的結果：
IE6，IE8：(Field('btn1', 'BBBB'), Field('btn2', 'DDDD'), None, Field('txt', 'FFFF'))
Chrome 26：(Field('btn1', 'AAAA'), None, None, Field('txt', 'FFFF'))
Firefox 19：(Field('btn1', 'AAAA'), None, None, Field('txt', 'FFFF'))
Safari 5：(Field('btn1', 'AAAA'), None, None, Field('txt', 'FFFF'))
實驗觀察：
1. IE 送出 <button></button> 之間的內容，其他瀏覽器則是送出 <button> 的 value 屬性。
2. IE 忽略 <input type="sumbit"> 其他表單資料都送出，包含不同 type 的 <button>。
3. 其他瀏覽器則送出被按下的 <button>，其他 <button> 與 <input type="submit"> 不會被送出。
再來看按下 CCCC (<input type="submit">) 的結果：
IE6：(Field('btn1', 'BBBB'), Field('btn2', 'DDDD'), Field('ipt', 'EEEE'), Field('txt', 'FFFF'))
IE8：(None, Field('btn2', 'DDDD'), Field('ipt', 'EEEE'), Field('txt', 'FFFF'))
Chrome 26：(None, None, Field('ipt', 'EEEE'), Field('txt', 'FFFF'))
Firefox 19：(None, None, Field('ipt', 'EEEE'), Field('txt', 'FFFF'))
Safari 5：(None, None, Field('ipt', 'EEEE'), Field('txt', 'FFFF'))
實驗觀察：
1. IE6 送出表單所有資料。
2. IE8 忽略 <button type="submit"> 其他表單資料都送出，包含 <button type="button">。
3. 其他瀏覽器忽略所有 <button> ，送出表單資料。
<button type="button" onclick="document.form.submit();"></button> 其行為跟 <input type="submit"> 相似，即使你按下該 <button> ，它的值也不會被送出。參考：
[1] HTML <input> Tag