<INPUT type="button">汎用的なボタンを作る

<INPUT>タグのtype属性の値に「button」を指定すると、汎用的に利用できる、送信リセットもしないボタンを作成します。 例えば、onclickなどのイベント属性を使用し、JavaScriptスクリプトなどと組み合わせることで、オリジナルのボタンを作成することができます。

なおこのボタン自体には、特に機能はありません。 実際のボタンの機能は、JavaScriptなどを使って用意する必要があります。

ボタンに表示する文字はvalue属性で指定して下さい。 またname属性を使用する事でボタンに名前を付けることができ、フォームのデータが送信される際に、このボタン名とデータが一緒に送信されてきます。

ちなみにサンプルソースで使用している「onclick」は、イベントハンドラです。 これはボタンがクリックされた際に発生する「イベント」に反応して処理を行います。

イベントハンドラでは、イベント発生時に処理を行う内容を指定する事で、色々な動作を実行させることができます。 例えばサンプルソースでは、一つ前のページに戻る「history.back()」という動作を指定しています。 他にも一つ先のページへ進む「history.forward()」など色々あります。

使用した時の例

<p>ボタンを押すと前のページへ戻ります<br />
<input type="button" value="1つ前のページへ戻る" onclick="history.back()">
</p>

ブラウザ上の表示例

ボタンを押すと前のページへ戻ります

書式

  • <input type="button" name="名前" value="ラベル"> ・・・・・・ 汎用的なボタンを作る

ラベル:ボタンに表示する名前

属性

type="button" 規定の動作を持たないボタンを作成
name="" ボタンに任意の名前を付ける
value="" ボタン上に表示するテキストを指定

対応ブラウザなどのデータ

形式 <INPUT type="button" value=""> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~