出于某种原因，我这里的按钮都被正确地标记了，我已经做了无数的方法来清除这个表单上的字段，利用这个看起来很简单的按钮，当你点击它时应该清除字段。我知道这可能是我遗漏的一些愚蠢的东西，但在这里有几个新鲜的眼睛是很好的。
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 class="container">
<center>
<h1 class="title">Wholesale Portal</h1>
<p class="subtitle">Please enter in values below to begin product search.</p>
<input type="text" class="pid" placeholder="Product Name"></input>
<input type="text" class="cid" placeholder="Warehouse City"></input>
<input type="number" class="qmin" placeholder="Minimum Quantity"></input>
<input type="number" class="qmax" placeholder="Maximum Quantity"></input>
<input type="number" class="pmin" placeholder="Minimum Price"></input>
<input type="number" class="pmax" placeholder="Maximum Price"></input>
<button type="submit" class="search">Search</button>
<button type="reset" class="clear">Clear Form</button>
</center>
</div>
</body>
</head>
</html>在您的回答之前，input元素是自闭标签，因此</input>是不正确的(link和meta标签)
@iłya-bursov是正确的，您需要一个form来分组您的输入
或者你可以使用js在点击按钮时清除所有输入
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 class="container">
<form action="#">
<center>
<h1 class="title">Wholesale Portal</h1>
<p class="subtitle">Please enter in values below to begin product search.</p>
<input type="text" class="pid" placeholder="Product Name"></input>
<input type="text" class="cid" placeholder="Warehouse City"></input>
<input type="number" class="qmin" placeholder="Minimum Quantity"></input>
<input type="number" class="qmax" placeholder="Maximum Quantity"></input>
<input type="number" class="pmin" placeholder="Minimum Price"></input>
<input type="number" class="pmax" placeholder="Maximum Price"></input>
<button type="submit" class="search">Search</button>
<button type="reset" class="clear">Clear Form</button>
</center>
</form>
</div>
</body>
</head>
</html>这是要做的js
<script>
document.querySelector("[type=reset]").addEventListener('click' , ev => {
document.querySelectorAll('input').forEach( item => item.value = '')
})
</script>
可以看到它的功能
https://jsfiddle.net/mahdiar_mansouri/4cm69e7d/2/