ボタンと入力タイプの違いと注意点=button_HTML/Xhtml_Webページ制作

タグ
定義と使用法
タグはボタンを定義します。
ボタン要素内に、テキストや画像などのコンテンツを配置できます。これが、この要素と input 要素を使用して作成されたボタンの違いです。
コントロールは、 よりも強力な機能と豊富なコンテンツを提供します。 タグと タグの間にあるものはすべて、テキストやマルチメディア コンテンツなどの許容可能な本文コンテンツを含むボタンのコンテンツです。たとえば、ボタンに画像と関連テキストを含めて、それらを使用してボタン内に魅力的なマークアップ画像を作成できます。
唯一禁止されている要素は画像マッピングです。これは、マウスとキーボードに依存する操作がフォーム ボタンの動作を妨げるためです。
ボタンには常に type 属性を指定します。 Internet Explorer のデフォルトのタイプは「ボタン」です​​が、他のブラウザ (W3C 仕様を含む) のデフォルトは「送信」です。
ブラウザのサポート
すべての主要なブラウザは タグをサポートしています。
重要 : HTML フォームで button 要素を使用する場合、ブラウザーごとに異なる値が送信されます。 Internet Explorer は と の間のテキストを送信しますが、他のブラウザは value 属性のコンテンツを送信します。ボタンを作成するには、HTML フォームの input 要素を使用してください。
注意事項
タグを使用する場合、それを当然のことと考えて として使用する傾向があり、以下の誤った使用法:
1. $('#customBtn').val() を通じてボタン値の値を取得します
これは、IE (IE カーネル) でどのように動作するかです。これを使用すると、「test」ではなく「button」になります。IE 以外で取得される値は「test」です。上の赤​​でマークされた最初の文に注目してください。
これは とは区別する必要があります。
これら 2 つのメソッドを通じて、$('#customBtn').val()、$('#customBtn').attr('value') は、次のようにさまざまなブラウザーで値を取得します。

Browser/Value	$('#customBtn').val()	$('#customBtn').attr('value')
Firefox13.0	test	test
Chrome15.0	test	test
Opera11.61	test	test
Safari5.1.4	test	test
IE9.0	按钮	按钮

以下のコードをテストしてこれを確認します

コードをコピーします

コードは次のとおりです:

{
$('#test1').click(function(){
alert($('#customBtn').attr('value'));
}); '# test2').click(function(){
alert($('#customBtn').val());
})
});

按钮

inputtype= "button"id="test1"value="getattr"/>
🎜>


2. このボタンをクリックすると、

タグが送信されることになります。 inputtype= "submit"/>
その意味を理解するには、上の赤でマークされた 2 番目の文を参照してください。
タグを の入力要素として扱わないでください。
以下のコードをテストしてこれを確認します