このタグは、Web ページ上の HTML フォーム内にクリック可能なボタンを作成するために使用されます。 .....タグ内にテキストや画像などのコンテンツを入れることができます。
タグには常に type 属性を指定する必要があります。ブラウザーが異なれば、ボタン要素に使用するデフォルトのタイプも異なります。
HTML Button タグはフォーム内外で使用できます。
使用する場合 フォーム内で 、送信ボタンとして機能します。リセットボタンとしても使えます。
使用する場合 フォームの外側 、JavaScript 関数を呼び出すことができます。
HTMLボタンタグの例
ボタンを表示するコードを見てみましょう。
Click Here今すぐテストしてください
出力:
ここをクリックHTML ボタンの例: JavaScript 関数の呼び出し
ボタンのクリック時に JavaScript 関数を呼び出すコードを見てみましょう。
Click Here function hello(){ alert('hello javatpoint user'); } 今すぐテストしてください 出力:
ここをクリックHTML ボタンの例: フォームの送信
ボタンのクリック時にフォームを送信するコードを見てみましょう。
Enter Name: <br> Submit今すぐテストしてください
出力:
名前を入力:提出する
HTML ボタンの例: フォームをリセット
ボタンのクリック時にフォームを送信するコードを見てみましょう。
Enter Name: <br> reset今すぐテストしてください
出力:
名前を入力:リセット
HTMLボタンタグの属性
タグは、すべてのグローバル属性といくつかの特定の追加属性をサポートします。
HTML ボタン タグ属性のリストが示されています。
| 属性 | 説明 |
|---|---|
| オートフォーカス | ページの読み込み中にボタンが自動的にフォーカスを取得するように指定します。 |
| 無効 | ボタンを無効にすることを指定します。 |
| 形状 | ボタンが属する 1 つ以上のフォームを指定します。 |
| 形成 | 送信タイプに使用されます。フォームが送信されるときにフォームデータを送信する場所を指定します。 |
| フォームメソッド | フォームデータの送信方法を指定します。 |
| 形状タイプ | フォームデータをサーバーに送信する前にどのようにエンコードするかを指定します。 |
| フォームノバリデート | これは、送信時にフォーム データを検証しないことを指定します。 |
| フォームターゲット | フォームの送信後に応答を表示する場所を指定します。 |
| 名前 | ボタンの名前を指定します。 |
| タイプ | ボタンの種類を指定します。 |
| 価値 | ボタンの値を指定します。 |
サポートするブラウザ
| 要素 | クロム | IE | Firefox | オペラ | サファリ |
| はい | はい | はい | はい | はい |
クロム
IE
Firefox
オペラ
サファリ