<BUTTON>自由にデザインできるボタンの作成

<BUTTON>では<INPUT>タグを指定した時と同様のボタンを作成することができます。 機能的には同じですが、このタグでは<BUTTON>~</BUTTON>内の内容(テキストや画像など)をボタンの上に(ラベルとして)表示する事ができます。

またボタン名を指定したり、ボタン上に画像を表示させたり、それらを組み合わせる事が可能となります。

ボタンにどの機能を持たせるかは、type属性に指定する値によってかわります。 値には送信ボタン(submit)、リセットボタン(reset)、汎用ボタン(button)などを指定して下さい。

name属性とvalue属性に指定する値は、別の処理をさせたい複数の送信ボタンを配置する場合に、どの送信ボタンが押されたのかを受信側で見分けるためなどに利用します。

なおこのボタンは、<FORM>内に配置しフォームの部品とする以外にも、javascriptなど、フォーム以外でも使用する事ができます。

使用した時の例

<button type="submit" name="submit" value="submit">
押すと<strong>送信</strong>
</button>

<button type="button" name="imgbutton">
<img src="sample.jpg" alt="" width="130" height="87"><br />
更新する
</button>

ブラウザ上の表示例

書式

  • <button type="タイプ" name="名前" value="送信値">~</button> ・・・・・・ ボタンを作る

タイプ:下記属性を参照、名前:ボタンの名前、送信値:ボタン名とセットで送信される値

属性

type="" ボタンの種類を指定
  • submit・・・送信ボタン(初期値)
  • reset・・・リセットボタン
  • button・・・汎用ボタン
name="" ボタンの名前(任意)。フォームのデータが送信される時に、ここで付けたボタン名とデータがセットで送信されてくる
value="" name属性の値とともにサーバーへ送られる値
disabled ボタンを押した時の動作を無効にする

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

形式 <button>~</button> カテゴリ フローコンテンツ / フレージングコンテンツ / パルパブルコンテンツ / インタラクティブコンテンツ / ラベラブル / リステッド / リアソシエイタブル / サブミッタブル / フォーム関連
親要素 子要素にフレージングコンテンツを含める要素 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
分類 インライン要素
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では、一部の属性が追加された