戻る

BUTTON要素

ボタンを表示する。

開始タグ:省略不可 修了タグ:省略不可

属性

name: 入力欄の名前を指定する。フォームを提出する際に、このname属性とvalue属性の値がセットになって送られる。
value: ボタンの値を設定する。
disabled: この属性を指定すると、閲覧者はボタンを操作できなくなる。そして、この値はフォームで提出されない。
type: submitを指定すると、フォームの提出ボタンが表示される。このボタンを操作することによって、フォームが提出される。 resetを指定するとリセットボタンが表示される。これを操作すると、フォームに入力したものが全て初期値に戻る。 buttonを指定すると、ボタンが表示される。
id
class
lang
dir
title
style

説明

INPUT要素でも、submit属性、reset属性、button属性があったが、 BUTTON要素も機能的には同じである。しかし、INPUT要素にはできなくても、BUTTON要素にならできることもある。

    <INPUT type="image" src="moemoe.jpeg">

と

    <BUTTON type="submit"><IMG src="moemoe.jpeg"></BUTTON>

は機能的に同じである。何方も「moemoe.jpeg」という画像を表示させ、それを操作するとフォームが提出される。 INPUT要素を用いた場合ではフォームの提出ボタンにしか画像を用いることができないが、 BUTTON要素ではリセットボタンや、ボタンにも画像を用いることができる。

    <BUTTON type="reset"><IMG src="moemoe.jpeg"></BUTTON>
    <BUTTON type="button"><IMG src="moemoe.jpeg"></BUTTON>

例

1

<html>
<head>
<title>BUTTONの使用例</title>
</head>
<body>
<h1>BUTTONの使用例</h1>
<H1>へぇボタン。</H1>
<P>押てもなにも起こりません。タだ表示されているだけです。
JavaScriptとか使って、押した回数を数えてもいいかもしれませんね。
それをFORMでサーバに送って合計してみるとか。
</P>
<BUTTON type="button"><IMG src="hee.png" alt="へぇボタン" borser=0></BOTTON>
<address>
<a href="mailto:tadaomi@localhost.localdomain"></a>
</address>
</body>
</html>

例をHTMLにしてみました。

2

INPUT要素の例を少し変更してみました。BUTTON要素は最後の方に使われています。

<html>
<head>
<title>フォームの使用例</title>
</head>
<body>
<h1>フォームの使用例</h1>
<H1>あなたの自慢の猫耳メイド写真投稿フォーム</H1>
<P>あなたのお家にいる自慢の猫耳メイドの写真を投稿してください。</P>
<P><EM>画像の投稿は猫耳メイド協会の実施する試験に合格した人しか行なえません。</EM></P>
<FORM action="http://moox.minidns.net/cgi-bin/sample.cgi"
enctype="multipart/form-data"
accept-chaeset="euc-jp"
accept="image/jpeg, image/png"
method="post">
<P>
合格時にあなたが協会から与えられた名前を入力してください : 
<INPUT type="text" name="username" size="8" maxlength="32"><BR>
パスワード : <INPUT type="password" name="password" size="8" maxlength="32"><BR>
「(猫耳)メイド」以外のあなたの属性は?<BR>
<INPUT type="checkbox" name="zokusei" checked>猫耳全般<BR>
<INPUT type="checkbox" name="zokusei">めがね<BR>
<INPUT type="checkbox" name="zokusei">ほっぺぷにぷに<BR>
<INPUT type="checkbox" name="zokusei">制服<BR>
<INPUT type="checkbox" name="zokusei">幼なじみ<BR>
</P>
<P>
画像についての質問です。<BR>
<!-- ここからラジオボタン -->
この画像は<BR>
<INPUT type="radio" name="attribute1" checked>全年令対象<BR>
<INPUT type="radio" name="attribute1">18際未満閲覧禁止<BR>
<INPUT type="radio" name="attribute1">21際未満閲覧禁止<BR>
<!-- ここまで -->
<BR>
画像の選択 : 
<INPUT type="file" name="picture"><BR>
</P>
<P>
<INPUT type="text" name="tikai" value="私は教祖様に忠誠を誓います。" size="28" readonly><BR>
<INPUT type="text" name="waring" value="実際に画像は送れません。" size="28" disabled><BR>
<!-- ボタン -->
<BUTTON type="submit" value="画像送信">画像送信</BUTTON>
<BUTTON type="reset" value="リセット">リセット</BUTTON>
<BUTTON type="button" value="ほぇ?">ほぇ?</BUTTON>
<!-- ここまで -->
<INPUT type="hidden" name="from" value="gazoutoukou">
</P>
</FORM>
</body>
</html>

例をHTMLにしてみました。

戻る