ボタンと入力タイプの違いと注意点

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

ブラウザ/値	$('#customBtn').val()	$('#customBtn').attr('値')
ファイアフォックス13.0	テスト	テスト
クローム 15.0	テスト	テスト
オペラ11.61	テスト	テスト
サファリ5.1.4	テスト	テスト
IE9.0	ボタン	ボタン

これは次のコードをテストすることで確認できます。

コードをコピー

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

<html>
<ヘッド>
<metahttp-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
<scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
<scripttype="text/javascript">
$(関数(){
$('#test1').click(function(){
アラート($('#customBtn').attr('値'));
});
$('#test2').click(function(){
アラート($('#customBtn').val());
});
});
</スクリプト>
</head>
<本文>
<buttonid="customBtn"value="test">按钮</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</本文>
</html>

2. 誤って<button>タグを<form>タグ内に入れた場合、このボタンをクリックすると送信となり、<inputtype="submit"/>と同等になります。
意味を理解するには、上記の赤で強調表示された 2 番目の文を参照してください。
<button> タグを <form> 内の入力要素として扱わないでください。
これは次のコードをテストすることで確認できます。

コードをコピー

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

<<: ユーザーエクスペリエンスの構築

>>: React双方向データバインディングの原理についての簡単な説明