ボタンとinput type=buttonの違いと注意点

<ボタン>タグ
定義と使用方法
button>タグはボタンを定義します。
button要素の内部には、テキストや画像などのコンテンツを配置することができます。ここが input 要素で作成したボタンとの違いです。
button> コントロールは <inputtype="button" > よりも強力で豊かなコンテンツを提供します。button> と </button> タグの間のすべてがボタンのコンテンツで、テキストやマルチメディアコンテンツなど、許容されるあらゆるボディコンテンツが含まれます。例えば、ボタンの中に画像と関連するテキストを含めることができ、それらを使ってボタンの中に魅力的なマークアップ画像を作成することができます。
マウスやキーボードに反応する動作がフォームボタンの動作を妨害するため、使用が禁止されている要素はイメージマッピングのみです。
ボタンのtype属性は必ず指定してください。InternetExplorerのデフォルトは"button"、他のブラウザ（W3C仕様を含む）のデフォルトは"submit"です。
ブラウザ対応
ボタン(<button>)タグは、すべての主要なブラウザでサポートされています。
大切なこと : InternetExplorerは <button> と <button/> の間のテキストを送信し、他のブラウザはvalue属性の中身を送信します。HTMLフォームのinput要素を利用して、ボタンを作成してください。
注意事項
また、<button>タグは、<inputtype="button">として使うのが当然と考えがちですが、これは以下の点で誤用されやすいと言えます。
1. buttonid="customBtn"value="test">button</button>value の値を $('#customBtn').val() で取得する。
IE（IEカーネル）では、この方法で使われる値は "button" であって "test" ではないし、IE以外では "test" である。上の赤字の最初の文。
これは <inputtype="button"> と区別する必要があります。
どちらの方法でも $('#customBtn').val(), $('#customBtn').attr('value') はブラウザによって以下のように値が取得されます。
<テーブル

ブラウザ/値

$('#customBtn').val()

$('#customBtn').attr('value')

Firefox 13.0

テスト

テスト

クローム15.0

テスト

テスト

オペラ 11.61

テスト

テスト

サファリ 5.1.4

テスト

テスト

IE9.0

ボタン

ボタン

で以下のコードをテストすることで確認できます。

2. うっかり <form> タグに <button> タグを入れてしまうと、このボタンをクリックすると送信になり、 <inputtype="submit"/> と同じになってしまうことがわかります。
この意味は、上の赤で示した2番目の文章をご覧ください。
form>では、<button>タグを入力要素として扱わないようにしましょう。
で以下のコードをテストして、これを確認します。