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

ボタンと入力タイプの違いと注意点
<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双方向データバインディングの原理についての簡単な説明

推薦する

Mysql を 5.7 にアップグレードした後のグループ クエリの問題を解決する

問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...

Cronジョブを使用してCpanelでPHPを定期的に実行する方法

cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...

Js の継承とプロトタイプチェーンを理解するのに役立つ記事

目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。

序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

JS配列インデックス検出におけるデータ型の問題の詳細な説明

WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...

mysql8.0.19 winx64バージョンのインストール問題を解決する

MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...

HTML ウェブページの段落レイアウトと改行

Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

シンプルな計算機を実装する JavaScript コード

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...