このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

button”要素~“type”属性

記事Sep.14th, 2020
ボタンをクリックしたときの動作を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

type”属性について

type”属性はbutton”要素をクリックしたときの動作を指定します。

submit”と“reset”を指定したbutton”要素form”要素と関連付けられているときにそのフォームを操作するボタンとなります。この場合、type="submit"type="reset"を指定したinput”要素と同じ機能を持ちます。

button”を指定したbutton”要素はクリックしたときの既定の動作を持たず、スクリプトを実行するためのボタンとして使用することができます。この場合、type="button"を指定したinput”要素と同じ機能を持ちます。

type”属性を指定しない場合や値が無効な場合は“submit”とみなされます。

指定できる値

属性値 説明
submit 送信ボタン
reset リセットボタン
button 既定の動作がない
menu注意 コンテキストメニューを表示する

サンプルコード

type="submit"”と“type="reset"

<form method="post" action="sample-formtag2.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域:<input type="text" name="area"></label></p>
<p><label>年齢:<input type="number" name="age"></label></p>
</fieldset>
<p>
<button type="submit">送信する</button>
<button type="reset">やり直す</button>
</p>
</form>
好きな果物

一番好きな果物

あなたの情報

居住地域:

年齢:

*送信すると入力内容が表示されます。

type="button"

<p>
<button type="button" onclick="alert('Hvordan har du det?')">クリックしてください</button>
</p>

type="menu"

<button type="menu" menu="sample-menu">メニューを開く</button>
<menu type="context" id="sample-menu">
<menuitem onclick="alert('God dag!')">こんにちは</menuitem>
<menuitem onclick="alert('Hvordan har du det?')">お元気ですか?</menuitem>
<menuitem onclick="alert('Jeg liker vin.')">私はワインが好きです</menuitem>
<menuitem onclick="alert('Ha det bra!')">さようなら</menuitem>
</menu>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク