HTML

The <input type="reset"> defines a reset button which resets all form values to its initial values.

Tip: Avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.

この記事では、フォームの入力内容を初期値へ戻す<input type="reset">の基本と、意図しないリセットを防ぐための注意点を説明します。

この記事でわかること

リセットで戻る「初期値」の意味
送信ボタンとの違い
誤操作を防ぐフォーム設計

<input type="reset">

　<input type="reset"> は、入力内容の初期化（リセット）の場合に使用されます。

HTML source


<form>
	<label for="reset-basic">入力内容:</label>
	<input id="reset-basic" type="text" value="初期値">
	<input type="reset" value="初期値に戻す">
</form>

属性

type=""（部品のタイプ）: reset（リセットボタン）
name=""（部品の名前）: 文字列（部品を識別するための名前（リセットボタンでは不要））
value=""（ボタンのテキスト）: 文字列（ボタンに表示されるテキスト）
disabled（部品の無効化）: disabled（値は省略可能）
form=""（フォームとの関連付け）: ID名（関連付ける form要素に指定した ID名）

value属性（ボタンのテキスト）について

　value属性とは、resetのボタンに表示されるテキスト（ボタン名）になります。

　お問い合わせ内容の「内容をリセットする」、「内容をクリアする」、「リセットする」などのボタン名が使われます。

　また、type属性が「image」、「submit」、「button」の場合はボタン名として表示されます。

HTML source


<form>
	<label for="reset-content">入力内容:</label>
	<input id="reset-content" type="text" value="入力例">
	<input type="reset" value="内容をリセットする">
</form>

HTML source


<form>
	<label for="reset-simple">入力内容:</label>
	<input id="reset-simple" type="text" value="入力例">
	<input type="reset" value="リセットする">
</form>

Sample

HTML source


<form onsubmit="return false;">
	<p>お名前：<input type="text" name="name1"></p>
	<p>フリガナ：<input type="text" name="name2"></p>
	
	<p>
		<input type="submit" value="送信する">
		<input type="reset" value="リセット">
	</p>
</form>

Sample + CSS

　:hoverした際に、「背景色、文字色」が変わるようになっています。

　ユーザーが「送信する」、「リセットする」ボタンを間違わないように、背景色やボーダー色、文字色を変えることで、入力した内容を間違ってリセットすることがないようにひと工夫入れておきましょう。

この後半のフォームは送信先を持たないデモのため、送信ボタンを押してもページを再読み込みしないようにしています。実際に送信する場合は、actionやJavaScriptの送信処理を設定してください。

HTML source


<form onsubmit="return false;">
	<p>お名前：<input type="text" name="name1"></p>
	<p>フリガナ：<input type="text" name="name2"></p>
	
	<p>
		<input type="submit" value="送信する">
		<input type="reset" value="リセット">
	</p>
</form>

CSS source


/*-- 共通 --*/
input[type="submit"],
input[type="reset"] {
	width: 20%;
	font-size: 15px;
	color: #fff;
	display: inline-block;
	padding: 15px 0px;
	text-align: center;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 1s;
}

/*-- 「送信する」ボタン色・ボーダーの色 --*/
input[type="submit"] {
	background-color: #5c87a6;
	border: 1px solid #5c87a6;
}

/*-- 「リセットする」ボタン色・ボーダー色 --*/
input[type="reset"] {
	background-color: #fd6158;
	border: 1px solid #fd6158;
}

/*-- 共通 --*/
input[type="submit"]:hover,
input[type="reset"]:hover {
	background-color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 1s;
}

/*-- 「送信する」ボタン色・ボーダー色 :hover時 --*/
input[type="submit"]:hover {
	color: #5c87a6;
	border: 1px solid #5c87a6;
}

/*-- 「リセットする」ボタン色・ボーダー色 :hover時 --*/
input[type="reset"]:hover {
	color: #fd6158;
	border: 1px solid #fd6158;
}