気の向くままに辿るIT/ICT/IoT
HTML/XHTMLタグ・要素・属性・属性値

RESET リセット・キャンセルボタン/formタグinput要素type属性reset属性値

ホーム前へ次へ
フォームでリセット・キャンセル・やり直しボタン機能を使う『INPUTタグのRESETオプション編』

RESET リセット・キャンセル・やり直しボタン

RESETとは

 FORM要素内で利用するINPUT要素のTYPE属性としてRESETという属性値・オプションを設定する事ができます。

 RESETは開いた時の「元の状態」に戻す、「初期設定」に戻す機能があり、<form></form>内に設定したRESETボタンは同じく<form></form>タグ内にあるテキストボックスやチェックボックスなどのコントロール(FORMの部品・パーツ・タグ)の内容を元に戻してくれます。

 たとえば新規登録画面と修正画面という2つの画面があるとすると、前者では、入力を期待する項目が空欄の場合、入力後RESETボタンをクリックすれば空欄に、後者では、既に入力を期待する項目が入っていてその内容を変更した場合にRESETボタンをクリックすると変更前の値(画面を開いた時の状態)に戻してくれます。

 htmlファイルの<body><form>~</form></body>タグの内側に<input type="reset" value="キャンセル">のように記述できます。

◆サンプル


 リセット、キャンセルボタンはFORMタグのINPUT要素のRESETオプションを使って以下のように記述します。


     <form>
         <input type="reset" value="キャンセル">
     </form>


VALUE値を変更するとボタンのラベル表示を変える事ができます。

htmlファイルの<body>~</body>タグの内側に記述できます。

<input>タグは他でも使用しますので覚えておいて下さいね。

FORMタグで利用できるタグ

 FORMタグ内で利用する要素の内、セレクトボックスとテキストエリア以外はこのINPUT要素のTYPE属性の属性値・オプションとして利用します。

各種HTMLとHTMLタグ/要素・属性・属性値

ホーム前へ次へ