ボタンと入力の違い[type='button']_html/css_WEB-ITnose

button と input[type="button"] の違い

HTML では、HTML ページにボタンを表示する方法が 2 つあります。

1. buttonタグを使用します
2. inputを使用し、typeの値をbuttonに設定します

しかし、実際に使用してみると、現在の使用方法に関する限り、両者にはまだ大きな違いがあることがわかりました。個人的には 2 番目の入力方法 [type="button"] を使用することをお勧めします。使用中に発生する問題については、以下で詳しく説明します。

1. ボタンに表示されるテキストの制御

1.input[type="button"] このメソッドでボタンの表示テキストを制御するには、 value 属性を設定するだけです。 input. 、value 属性の値はボタンに表示されるテキストです

2. ボタン タグ メソッド、value 値の設定はボタンに表示されるテキストには影響しません。 以下はコードのテスト結果です。テストされたブラウザは Chrome、IE11、Edge です。このコードをテストした後、ボタンのラベルで表されるボタンのテキストは値の値ではなく、ラベル間のテキストによって制御されることがわかります

onclick イベントを追加した後、値 value を設定し、2 つのボタンを順番にクリックすると、結果は次のようになります

onclick イベントを変更し、今回は innerText 属性を設定し、クリックに応じて onclick イベントをトリガーします。テスト結果はこんな感じです

上記のテスト結果をまとめると、 input[type="button"] この種のボタンは、ボタンのラベルで表示されるボタンのテキストを制御する値を制御することをお勧めします。表示されるテキストを制御するには、コントロール要素の innerText 属性を使用することをお勧めします

2. フォーム内の onclick イベントの 2 つの方法

テスト コードを変更し、フォームに両方のボタンを配置し、onclick イベントを追加します。テスト結果は上記のブラウザで同じなので、Edge ブラウザでの表示効果のスクリーンショットのみを撮りました

ボタンをクリックすると表示されるボタン その後の効果は次のとおりです。ダイアログボックスが表示され、Bing のホームページ

input[type="button"] ボタンをクリックすると、ポップアップが表示されます。ウィンドウの後にページジャンプはなく、ページは元のページのままです

input[type="button"] ボタンで [OK] をクリックした後も、まだこのページにいて、ページジャンプはありません。フォームを説明できます。送信されていませんでしたが、ボタン ラベルが付いたボタンにはページ ジャンプ、つまりフォーム送信が表示されました。さらに、ボタンによって「入力済み」プロンプト ウィンドウもポップアップ表示され、onclick イベントもトリガーされたことが示されます。ただし、イベントはフォームを送信しませんでしたが、ボタンの onclick イベントは、input[type="submit"] 要素と同様にフォームを送信します。

3. 結論

まとめると、ボタンはフォームのあるページに直接フォームを送信し、制御できないため、個人的には、input[type="button"] メソッドを使用してボタンを表示することをお勧めします。 [type="button"] で表されるボタンのテキストを表示する場合、value 属性の値を設定する必要があります