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"> は、入力内容の初期化（リセット）の場合に使用されます。
HTML source
<input type="reset">
value属性とは、resetのボタンに表示されるテキスト（ボタン名）になります。
お問い合わせ内容の「内容をリセットする」、「内容をクリアする」、「リセットする」などのボタン名が使われます。
また、type属性が「image」、「submit」、「button」の場合はボタン名として表示されます。
HTML source
<input type="reset" value="内容をリセットする">
HTML source
<input type="reset" value="リセットする">
HTML source
<form>
<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>
:hoverした際に、「背景色、文字色」が変わるようになっています。
ユーザーが「送信する」、「リセットする」ボタンを間違わないように、背景色やボーダー色、文字色を変えることで、入力した内容を間違ってリセットすることがないようにひと工夫入れておきましょう。
HTML source
<form>
<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;
}