<input>要素の"button"型

<input>要素の”button”型

フォーム内に「既定の動作」を特に持たないボタンを配置する際に使います。
フォーム内にボタンを配置する型としては、submit型 や reset型 もありますが、それらと違い、フォームを送信したり、初期化するなどの規定の動作を持たないため、独自の機能を実行する際に使用されます。
通常は、JavaScriptでイベントハンドラー関数（ clickイベント ）を割り当てて独自の処理を実行させます。
なお、<input> 要素の button型 では、基本的にボタン内にはテキストしか表示できませんので、デザイン的な自由度が必要であれば、<button> 要素を使うことも出来ます。（ <button> 要素は子要素を持つことができるため）

属性

<input> 要素の button型 では、以下の属性が使用できます。

value

button型 の場合は、ボタンのテキストとして使用する文字列をvalue属性で指定します。

disabled

この属性を指定した場合、ボタンが無効化されます。

accesskey

このグローバル属性を設定することで、ショートカットキーを割り当てます。

formaction

データの送信先のURLを示します。<form> 要素のaction属性よりも優先されます。

formenctype

フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。<form> 要素のaction属性よりも優先されます。

• application/x-www-form-urlencoded
  （デフォルト）URL エンコーディングした後で送信します。
• multipart/form-data
  複数のファイルをサーバーに送信することができます。file型 の項目を含む場合、この値を指定する必要があります。
• text/plain
  エンコーディングを行わずに送信します。

formmethod

フォームのデータを送信するときに使用する HTTP メソッドを文字列で指定します。

• get
• post
• dialog

formnovalidate

この属性を指定した場合、ブラウザによるフォームの検証は行われません。

formtarget

フォームの送信後に表示されるページをどの画面に表示するかを指定します。
以下のキーワードは特別な意味を持ちます。

• _self: 現在と同じ閲覧コンテキストに URL を読み込みます。これは既定の動作です。
• _blank: 新しい閲覧コンテキストに URL を読み込みます。通常はタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
• _parent: 現在の閲覧コンテキストの親コンテキストに URL を読み込みます。親がない場合は、_self と同じ振る舞いをします。
• _top: トップレベルの閲覧コンテキスト (現在のコンテキストの祖先で “最上位” の閲覧コンテキストであり、親を持たない) に URL を読み込みます。親閲覧コンテキストがない場合は、_self と同じ振る舞いをします。

サンプル

以下のサンプルでは、ボタンを押すと現在の日時を表示する、シンプルなプログラムを紹介します。

See the Pen rNBKaar by Masahiko Iwakiri (@m-iwakiri) on CodePen.