button
汎用ボタン

2008/3/26

構文

説明

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

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

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

属性

サンプル

シンプルなボタン

<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>