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

ボタンと入力タイプの違いと注意点
<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">&#x6309;&#x94AE;</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</本文>
</html>

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

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

<html>
<本文>
<formaction="">
<button>ボタン</button>
<inputtype="送信"value="入力送信"/>
<inputtype="ボタン"値="入力ボタン"/>
</フォーム>
</本文>
</html>

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

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

推薦する

Vue el-date-picker 動的制限時間範囲ケースの詳細な説明

2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

OR キーワードを使用した MySql 複数条件クエリ ステートメント

前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...

Windows で Graphviz をインストールして開始する方法のチュートリアル

ダウンロードとインストール環境変数の設定インストール環境変数の設定確認基本的な描画の紹介グラフディグ...

IE ブラウザの HTML ハック タグの概要

コードをコピーコードは次のとおりです。 <!--[if !IE]><!-->...

JS の compose 関数と pipe 関数の使い方の詳細な説明

目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...

Node.js を使用してパスワード ジェネレータを作成するための完全な手順

目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

TypeScript 名前空間のマージの説明

目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...