IT専科TOP>HTML/スタイルシート>HTMLタグ(ABC順)> <button>

<button>

ボタンを作成することができます。種別として3種類「button・reset・submit」あります。<input>もボタンを作成できますが、違いとして<input>はボタンの表示内容をvalue属性で指定するのに対し、<button>は要素の内容が表示されます。従って<button>ではボタン上にイメージなども表示することが可能となります。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
インライン 省略不可 flow から<a>要素,formctrl,<form>要素,<fieldset>要素を除いたものが何回か出現、もしくは出現しない。

・属性
属性名 必須 意味
name 識別名 任意のテキスト
type 役割
submit
送信(規定値)
※ブラウザによってはbuttonが規定値になっているものもあります。(IE6ではbuttonでした。)
reset
初期化
button
汎用
value プログラム等により送信される値
disabled 選択・変更不可 disabled
tabindex Tabボタンで選択できる順番 数値
accesskey 指定したキーがショートカットとして機能 例:k
class class名 スタイルシートを設定したclass名
id id名 スタイルシートを設定したid名もしくは、任意のテキスト
title 説明文 任意のテキスト
style スタイル 任意のスタイル
lang 言語コード 例(日本語):ja
dir 読む方向
rtl
右から左に読む
ltr
左から右に読む

・イベント
イベント 仕様
onclick クリック時に発生
ondblclick ダブルクリック時に発生
onmousedown 要素上でマウスボタンを押したときに発生
onmouseup 要素上でマウスボタンを離したときに発生
onmouseover ポインティングデバイスが要素上を通過したときに発生
onmousemove ポインティングデバイスが要素上で動くと発生
onmouseout 要素の領域から出るときに発生
onkeypress 要素上でキーが押されて、要素から離れたとき発生
onkeydown 要素上でキーが押されたとき発生
onkeyup 要素上で押されたキーを離したとき発生

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
  </head>
  <body>
    <form name="frm1">
      <p><textarea cols="100" rows="4"></textarea><br>
      <button name="button1">type:指定無し</button><br>
      <button type="submit" name="button2">type:submit</button>
      <button type="reset" name="button3">type:reset</button>
      <button type="button" name="button4">type:button</button></p>
    </form>
  </body>
</html>

表示結果


▲PageTop

関連項目

HTML

<input> / <textarea> / <form>

▲PageTop