Search
  1. button〔汎用ボタン〕

button
汎用ボタン

2008/3/26

構文

<button> ~ </button>

説明

button要素は、汎用ボタンを表すインライン要素です。

type属性には、"button"(通常のボタン)、"submit"(送信ボタン)、"reset"(リセットボタン)の値を指定可能です。 デフォルトは、"submit"(送信ボタン)です。

それぞれ、input要素のtype属性にbutton、submit、resetを指定した時と動作は同じですが、button要素内に画像やHTMLタグを使用できる点が異なります。 ただし、button要素内に、input要素、select要素、textarea要素、label要素、button要素、form要素、fieldset要素、iframe要素、isindex要素を含めることはできませんので注意してください。

属性

button要素の属性
属性="値"説明サポート状況必須・任意代替
XHTML 1.0XHTML 1.1
name="%CDATA"ボタン要素の名前を指定。STFS任意 
value="%CDATA"ボタンに表示するテキストを指定。STFS任意 
type="button | submit | reset"ボタン要素のタイプを指定。通常のボタンの場合は"button"、送信ボタンの場合は"submit"(デフォルト値)、リセットボタンの場合は"reset"を指定。STFS"submit" 
disabled="disabled"入力要素の無効化の有無を指定。デフォルトは有効。STFS任意 

サンプル

シンプルなボタン

<form action="#" 
	onsubmit="alert('テストのため送信しません');return false;" 
	onreset="alert('フォームをリセットします')">
	<p>
		<input type="text" value="" />
	</p>
	<p>
		<button type="button">通常のボタン</button>

		<button>送信ボタン</button>
		<button type="submit">送信ボタン</button>

		<button type="reset">リセットボタン</button>
	</p>
</form>

画像を使ったボタン

<style type="text/css">
	p.btn1 button { margin:0; padding:5px; }
	p.btn1 button img { vertical-align:middle; }

	p.btn2 button { margin:0; padding:0; background-color:#fff; border:0; }
	p.btn2 button img { vertical-align:middle; }

</style>
<form action="#">
	<p class="btn1">
		<button type="button" onclick="location.href='/content/demo/sample.zip'"><img src="/content/img/icon/color/download.gif" alt="zip" /> Download ZIP(1KB)</button>
		<button type="button" onclick="window.open('/?t=mail&p=mail','w');"><img src="/content/img/icon/color/letter.gif" alt="contact" /> お問合せ</button>
		<button type="button"><img src="/content/img/icon/color/action_delete.gif" alt="閉じる" /> 閉じる</button>
	</p>
	<p class="btn2">
		<button type="button" onclick="window.open('http://phpjavascriptroom.com/','w');"><img src="/content/img/banner/banner.gif" alt="PHP & JavaScript Room" /></button>
	</p>
</form>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women