<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双方向データバインディングの原理についての簡単な説明
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...
cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...
目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...
1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...
序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...
コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...
2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...
WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...
MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...
body{font-size:12px; font-family:"宋体";}...
Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...
参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...