For some reason I have the buttons here all labeled correctly and I've done countless methods of clearing the fields on this form utilizing this, what seems to be simple, button that is supposed to clear the fields when you click on it. I know it's probably something dumb that I'm missing but it'd be great to have a few fresh eyes here.
body {
background-color: #f18c8e;
}
.container {
width: 600px;
height: 600px;
box-shadow: 0px 10px 35px 5px rgba(0, 0, 0, 0.2);
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-bottom: auto;
background-color:rgb(234, 234, 234);
}
.pid, .cid, .qmin, .qmax, .pmin, .pmax {
width: 76%;
font-size: 14px;
letter-spacing: 1px;
background-color: white;
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.02);
text-align: center;
font-family: 'Ubuntu', sans-serif;
margin-top: 2%;
}
.title {
font-family: 'Ubuntu', sans-serif;
color: rgb(153, 153, 153);
padding-top: 1em;
font-size: 100;
letter-spacing: 2px;
}
.subtitle {
font-family: 'Ubuntu', sans-serif;
color: rgb(153, 153, 153);
letter-spacing: 2px;
}
.search, .clear {
padding-top: 10px;
padding-bottom: 10px;
color: rgb(255, 255, 255);
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: 13px;
letter-spacing: 2px;
margin-top: 6%;
padding-left: 1em;
padding-right: 1em;
width: 30%;
background-color:cadetblue;
border: 2px solid rgba(255, 255, 255, 0.02);
border-radius: 20px;
}
.clear:hover {
cursor: pointer;
background-color: rgb(81, 139, 141);
}
.search:hover {
cursor: pointer;
background-color: rgb(81, 139, 141);
}
.search {
margin-right: 45px;
} <!DOCTYPE html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"></meta>
<html lang="en">
<link rel="stylesheet" href="Contact.css"></link>
<head>
<title>Wholesale Portal</title>
<body>
<div >
<center>
<h1 >Wholesale Portal</h1>
<p >Please enter in values below to begin product search.</p>
<input type="text" placeholder="Product Name"></input>
<input type="text" placeholder="Warehouse City"></input>
<input type="number" placeholder="Minimum Quantity"></input>
<input type="number" placeholder="Maximum Quantity"></input>
<input type="number" placeholder="Minimum Price"></input>
<input type="number" placeholder="Maximum Price"></input>
<button type="submit" >Search</button>
<button type="reset" >Clear Form</button>
</center>
</div>
</body>
</head>
</html>CodePudding user response：
Before Your Answer,, input elements are self-closed tags so </input> is not correct(also link and meta tags)
@iłya-bursov is right, you need a form to group your inputs
Or You can use js to clear all inputs when your button is clicked
body {
background-color: #f18c8e;
}
.container {
width: 600px;
height: 600px;
box-shadow: 0px 10px 35px 5px rgba(0, 0, 0, 0.2);
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-bottom: auto;
background-color:rgb(234, 234, 234);
}
.pid, .cid, .qmin, .qmax, .pmin, .pmax {
width: 76%;
font-size: 14px;
letter-spacing: 1px;
background-color: white;
padding: 10px 20px;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.02);
text-align: center;
font-family: 'Ubuntu', sans-serif;
margin-top: 2%;
}
.title {
font-family: 'Ubuntu', sans-serif;
color: rgb(153, 153, 153);
padding-top: 1em;
font-size: 100;
letter-spacing: 2px;
}
.subtitle {
font-family: 'Ubuntu', sans-serif;
color: rgb(153, 153, 153);
letter-spacing: 2px;
}
.search, .clear {
padding-top: 10px;
padding-bottom: 10px;
color: rgb(255, 255, 255);
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: 13px;
letter-spacing: 2px;
margin-top: 6%;
padding-left: 1em;
padding-right: 1em;
width: 30%;
background-color:cadetblue;
border: 2px solid rgba(255, 255, 255, 0.02);
border-radius: 20px;
}
.clear:hover {
cursor: pointer;
background-color: rgb(81, 139, 141);
}
.search:hover {
cursor: pointer;
background-color: rgb(81, 139, 141);
}
.search {
margin-right: 45px;
} <!DOCTYPE html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"></meta>
<html lang="en">
<link rel="stylesheet" href="Contact.css"></link>
<head>
<title>Wholesale Portal</title>
<body>
<div >
<form action="#">
<center>
<h1 >Wholesale Portal</h1>
<p >Please enter in values below to begin product search.</p>
<input type="text" placeholder="Product Name"></input>
<input type="text" placeholder="Warehouse City"></input>
<input type="number" placeholder="Minimum Quantity"></input>
<input type="number" placeholder="Maximum Quantity"></input>
<input type="number" placeholder="Minimum Price"></input>
<input type="number" placeholder="Maximum Price"></input>
<button type="submit" >Search</button>
<button type="reset" >Clear Form</button>
</center>
</form>
</div>
</body>
</head>
</html>Here is the js to do that
<script>
document.querySelector("[type=reset]").addEventListener('click' , ev => {
document.querySelectorAll('input').forEach( item => item.value = '')
})
</script>
you can see it's functionality here