<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') を通じて、次のように異なるブラウザーで値を取得します。
これは次のコードをテストすることで確認できます。 コードをコピー コードは次のとおりです。<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> 内の入力要素として扱わないでください。 これは次のコードをテストすることで確認できます。 コードをコピー コードは次のとおりです。<html> <本文> <formaction=""> <button>ボタン</button> <inputtype="送信"value="入力送信"/> <inputtype="ボタン"値="入力ボタン"/> </フォーム> </本文> </html> |
>>: React双方向データバインディングの原理についての簡単な説明
2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...
状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...
前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...
ダウンロードとインストール環境変数の設定インストール環境変数の設定確認基本的な描画の紹介グラフディグ...
コードをコピーコードは次のとおりです。 <!--[if !IE]><!-->...
目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...
目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...
この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...
なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...
iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...
MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...
目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...