cman.jpWEBページ作成
広告
<input type="reset"> 「リセットボタン」
<input type="reset">は、、入力内容の初期化（リセット）の場合に使用されます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input type="reset">の属性
【構文】
ページTOP
<input type="reset" name="bt01" value="リセット" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| name="固有名" | 入力に付ける固有名 | "text1" | ||||||||
| value="値" | サーバに送信する値・ボタンの表示する文字 | "ボタン" | ||||||||
| disabled | 入力の無効化 | "disabled" | ||||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5以降にグローバル属性に変更 | "autofocus" | ||||||||
| popovertarget | 関連付けするポップオーバー要素を指定 ※HTML5以降に追加 | "id名" ポップオーバー要素のidを指定 | ||||||||
| popovertargetaction="toggle","show","hide" | 関連付けしたポップオーバー要素の切り替え ※HTML5以降に追加 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="reset">のサンプル
<form>
<p>購入商品：
<input type="checkbox" name="ck01" value="1" checked>商品Ａ
<input type="checkbox" name="ck01" value="2">商品Ｂ
</p>
<p>氏名：
<input type="text" name="in01" size="15" maxlength="20">
</p>
<p>性別：
<input type="radio" name="ra01" value="1">男性
<input type="radio" name="ra01" value="2">女性
</p>
<p>
<input type="submit" name="bt01" value="送信する">
<input type="reset" name="bt01" value="入力内容を初期化">
</p>
</form>
<p>購入商品：
<input type="checkbox" name="ck01" value="1" checked>商品Ａ
<input type="checkbox" name="ck01" value="2">商品Ｂ
</p>
<p>氏名：
<input type="text" name="in01" size="15" maxlength="20">
</p>
<p>性別：
<input type="radio" name="ra01" value="1">男性
<input type="radio" name="ra01" value="2">女性
</p>
<p>
<input type="submit" name="bt01" value="送信する">
<input type="reset" name="bt01" value="入力内容を初期化">
</p>
</form>
入力の無効化【disabled】
<input type="reset" name="bt01" value="リセットボタン" disabled>
フォーカスの初期設定【autofocus】
<input type="reset" name="bt01" value="リセットボタン" autofocus>
<input type="reset">のスタイルシートサンプル
<style type="text/css">
<!--
.chk1 {border: 3px outset #0000cc;background-color:#99ffff;}
-->
</style>
～
<input type="reset" name="bt01" value="リセット" class="chk1" id="chkid1">
<!--
.chk1 {border: 3px outset #0000cc;background-color:#99ffff;}
-->
</style>
～
<input type="reset" name="bt01" value="リセット" class="chk1" id="chkid1">
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- 入力内容のクリアではなく、初期表示（Value等の指定が有効となった状態）の状態でリセットされます。
広告