HTML Reset Button
The HTML reset button is used to reset all values in the form. It clears all input fields.
Reset is the value of the type attribute of the button element. The HTML reset button resets all inputs in the form to initial values.
Syntax:
<button type="reset" value="submit">Reset</button>
Examples of the HTML Reset Button:
Example 1:
Following is the code of the form with submit button and reset buttons. We are using CSS to make the form attractive.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example 1 of Reset Button
</title>
<style>
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: rgb(163, 34, 152);
color: white ;
}
input[type=text] {
width: 100%;
display: inline-block;
margin: 3px 0 20px 0;
padding: 9px;
background: #e7cece;
border: none;
}
input[type=text]:focus {
background-color: rgb(242, 225, 192);
outline: none;
}
div {
padding: 10px 0;
}
button {
background-color: #0c344c;
margin: 5px 0;
color: white;
cursor: pointer;
width: 100%;
padding: 14px 18px;
border: none;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Form </h1> </center>
<label for="fn"> First Name </label>
<input type="text" id="fn" name="First Name" placeholder= "First Name" size="15" required />
<label for="mn"> Middle Name: </label>
<input type="text" id="mn" name="Middle Name" placeholder="Middle Name" size="15" required />
<label for="ln"> Last Name: </label>
<input type="text" id="ln" name="Last Name" placeholder="Last Name" size="15"required />
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
<br> <br>
<label for="phone">
Phone :
</label>
<input type="text" name="Phone Number" placeholder="Country Code" value="+91" size="2"/>
<label for="email">
Email
</label>
<input type="text" id="email" placeholder="Enter Email" name="email" required>
<button type="submit" value="submit"> Submit </button>
<button type="reset" value="reset"> Reset </button>
</form>
</body>
</html>
Output:
The output displays a form with a submit button and a reset button; when you click the reset button, all the values in the form are cleared.
Example 2:
We are building a responsive registration form using HTML and CSS with submit and reset buttons.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Example 2 of Reset Button</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif,sans-serif;
box-sizing: border-box;
}
body{
height: 100vh;
justify-content: center;
display: flex;
align-items: center;
padding: 9px;
background: linear-gradient(135deg, #f8e621, #e64a08);
}
.container{
max-width: 650px;
width: 100%;
background-color: rgb(252, 233, 233);
border-radius: 3px;
padding: 22px 48px;
box-shadow: 0 3px 9px rgba(64, 59, 59, 0.15);
}
.container .title{
font-weight: 450;
font-size: 22px;
position: relative;
}
.content form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box{
width: calc(100% / 2 - 20px);
margin-bottom: 14px;
}
form .input-box span.details{
display: block;
margin-bottom: 4px;
font-weight: 450;
}
.user-details .input-box input{
height: 44px;
width: 100%;
font-size: 14px;
padding-left: 14px;
border-radius: 4px;
border-bottom-width: 2px;
border: 1px solid rgb(218, 214, 214);
outline: none;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #e64a08;
}
form .gender-details .gender-title{
font-size: 18px;
font-weight: 450;
}
form .category{
display: flex;
margin: 12px 0 ;
width: 85%;
justify-content: space-between;
}
form .category label{
display: flex;
cursor: pointer;
align-items: center;
}
form .category label .dot{
width: 17px;
height: 17px;
border-radius: 50%;
background: #f09191;
border: 4px solid transparent;
margin-right: 10px;
transition: all 0.3s ease;
}
#gender1:checked ~ .category label .one,
#gender2:checked ~ .category label .two,
#gender3-:checked ~ .category label .three{
background:#ea6523;
border-color: #8a8484;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 35px 0
}
form .button input{
width: 100%;
height: 65%;
border: none;
border-radius: 4px;
color: rgb(244, 232, 232);
font-weight: 450;
font-size: 15px;
cursor: pointer;
letter-spacing: 1px;
background: linear-gradient(135deg, #f8e621, #e64a08);
transition: all 0.3s ease;
}
form .button input:hover{
background: linear-gradient(-135deg, #f8e621, #e64a08);
}
@media(max-width: 550px){
.container{
max-width: 100%;
}
form .user-details .input-box{
width: 100%;
margin-bottom: 12px;
}
form .category{
width: 100%;
}
.content form .user-details{
overflow-y: scroll;
max-height: 300px;
}
.user-details::-webkit-scrollbar{
width: 4px;
}
}
@media(max-width: 459px){
.container .content .category{
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="title"> Registration Form </div>
<div class="content">
<form action="#">
<div class="user-details">
<div class="input-box">
<span class="details"> Full Name </span>
<input type="text" placeholder="Enter Your Name" required>
</div>
<div class="input-box">
<span class="details"> User Name </span>
<input type="text" placeholder="Enter Username" required>
</div>
<div class="input-box">
<span class="details"> Email </span>
<input type="text" placeholder="Enter Your Email" required>
</div>
<div class="input-box">
<span class="details"> Phone Number </span>
<input type="text" placeholder="Enter Your Phone Number" required>
</div>
<div class="input-box">
<span class="details"> Password </span>
<input type="text" placeholder="Enter Your Password" required>
</div>
<div class="input-box">
<span class="details"> Confirm Password </span>
<input type="text" placeholder="Confirm Password" required>
</div>
</div>
<div class="gender-details">
<input type="radio" name="gender" id="gender1">
<input type="radio" name="gender" id="gender2">
<input type="radio" name="gender" id="gender3">
<span class="gender-title"> Gender </span>
<div class="category">
<label for="gender1">
<span class="dot one"></span>
<span class="gender"> Male </span>
</label>
<label for="gender2">
<span class="dot two"></span>
<span class="gender"> Female </span>
</label>
<label for="gender3">
<span class="dot three"></span>
<span class="gender"> Prefer not to say </span>
</label>
</div>
</div>
<div class="button">
<input type="submit" value="Register"> <br> <br>
<input type="reset" value="Reset">
</div>
</form>
</div>
</div>
</body>
</html>The output shows the responsive registration form. When you click the reset button, all the input fields become empty.
You can see the responsiveness of the form in the output. When you change screen size from max to min, all the input fields in the form are stacked on each other, as shown below:
The above examples show how to add the reset button in the form. It is recommended to avoid using the reset button because if the user accidentally clicks on the reset button, all the data is deleted, and the user will get frustrated.
Browser Support:
It supports the following browsers:
- Google Chrome
- Internet Explorer
- Opera
- Mozilla Firefox
- Safari