reset（リセットボタン）

<input>タグの属性で、type="reset"を指定すると、リセットボタンを作成できます。リセットボタンがクリックされると、そのフォームで定義されているフォーム要素が初期化されます。

例えば、テキストボックスに何らかのテキストが入力されていて、リセットボタンがクリックされた場合、テキストボックスは何も入力されていない状態に戻ります。初期値（value属性）が指定してある場合は、その値に戻ります。

type="reset"を指定した場合に使用できる属性は以下のようになります。

リセットボタンの属性
属性	イベントフォーカス value disabled

value属性

value属性を指定すると、リセットボタンに表示される値を変更することができます。このvalue属性を指定しない場合は、ブラウザの初期値（「リセット」や「reset」となっていることが多い）が設定されます。

disabled属性

disabled属性を指定すると、リセットボタンを使用不可にします。ブラウザには表示されるが、クリックはできないリセットボタンとなります。

入力例

実際にテキストボックスに入力したりしてリセットボタンの役割と、各属性の役割を確認してみてください。

input_reset.html


<html>
    <head>
        <title>&lt;input type="reset" /&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <div>名前：<input type="text" name="name" /></div>
            <div>性別：
                <input type="radio" name="sex" value="man" checked="checked"/>男性
                <input type="radio" name="sex" value="woman" />女性
            </div>
            <div><input type="reset" /></div>
            <div><input type="reset" value="初期値に戻す" /></div>
            <div><input type="reset" value="リセットしてみる" disabled="disabled" /></div>
        </form>
    </body>
</html>

submit

ページの先頭

file

2010 Webデザインレッスンプライバシーポリシーサイト管理者に連絡