搜索按钮在我的搜索表单中不起作用。我仅使用html和纯CSS来制作搜索表单，以实践JS重要或不适合在下拉过滤器中使用搜索表单！我需要使用一些JS代码还是可以使其工作？我喜欢分享我的知识，任何人都可以使用我的代码。
关于：Xan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
#DIV_1 {
box-sizing: border-box;
float: left;
height: 40px;
letter-spacing: 0.7px;
text-size-adjust: 100%;
width: 500px;
perspective-origin: 250px 20px;
transform-origin: 250px 20px;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
margin: 2px 0px 0px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_1:before*/
#DIV_2 {
bottom: 0px;
box-sizing: border-box;
float: left;
height: 40px;
left: 0px;
letter-spacing: 0.7px;
min-height: 1px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 405px;
perspective-origin: 202.5px 20px;
transform-origin: 202.5px 20px;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_2*/
#DIV_2:after {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_2:after*/
#DIV_2:before {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_2:before*/
#DIV_3 {
bottom: 0px;
box-sizing: border-box;
display: table;
float: left;
height: 40px;
left: 0px;
letter-spacing: 0.7px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 352px;
perspective-origin: 250px 20px;
transform-origin: 250px 20px;
border: 1px solid rgb(255, 255, 255);
border-radius: 5px 5px 5px 5px;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_3*/
#DIV_3:after {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_3:after*/
#DIV_3:before {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_3:before*/
#DIV_4 {
bottom: 0px;
box-sizing: border-box;
float: left;
height: 38px;
left: 0px;
letter-spacing: 0.7px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 149.391px;
perspective-origin: 74.6875px 19px;
transform-origin: 74.6953px 19px;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_4*/
#DIV_4:after {
bottom: 0px;
box-sizing: border-box;
content: '""';
display: block;
height: 22px;
left: 168.391px;
letter-spacing: 0.7px;
position: absolute;
right: -20px;
text-size-adjust: 100%;
top: 10px;
width: 1px;
perspective-origin: 0.5px 11px;
transform-origin: 0.5px 11px;
background: rgb(233, 233, 233) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_4:after*/
#DIV_4:before {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#DIV_4:before*/
#SELECT_5 {
background-position: 150px 18px;
bottom: 0px;
cursor: pointer;
height: 38px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 137px;
perspective-origin: 68.5px 19px;
transform-origin: 68.5px 19px;
background: rgb(255, 255, 255) url("http://opencart.templatemela.com/OPC10/OPC100235/OPC4/catalog/view/theme/OPC100235_4/image/megnor/select-arrow-down.gif") no-repeat scroll 150px 18px / auto padding-box border-box;
border: 0px none rgb(0, 0, 0);
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
padding: 8px 15px;
}/*#SELECT_5*/
#SELECT_5:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#SELECT_5:after*/
#SELECT_5:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#SELECT_5:before*/
#OPTION_6, #OPTION_7, #OPTION_9, #OPTION_11, #OPTION_13, #OPTION_15, #OPTION_17, #OPTION_19, #OPTION_21, #OPTION_23, #OPTION_25, #OPTION_27, #OPTION_29, #OPTION_31, #OPTION_33, #OPTION_35, #OPTION_37, #OPTION_39, #OPTION_41, #OPTION_43 {
box-sizing: border-box;
cursor: pointer;
min-height: 14.4px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_6, #OPTION_7, #OPTION_9, #OPTION_11, #OPTION_13, #OPTION_15, #OPTION_17, #OPTION_19, #OPTION_21, #OPTION_23, #OPTION_25, #OPTION_27, #OPTION_29, #OPTION_31, #OPTION_33, #OPTION_35, #OPTION_37, #OPTION_39, #OPTION_41, #OPTION_43*/
#OPTION_6:after, #OPTION_7:after, #OPTION_9:after, #OPTION_11:after, #OPTION_13:after, #OPTION_15:after, #OPTION_17:after, #OPTION_19:after, #OPTION_21:after, #OPTION_23:after, #OPTION_25:after, #OPTION_27:after, #OPTION_29:after, #OPTION_31:after, #OPTION_33:after, #OPTION_35:after, #OPTION_37:after, #OPTION_39:after, #OPTION_41:after, #OPTION_43:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_6:after, #OPTION_7:after, #OPTION_9:after, #OPTION_11:after, #OPTION_13:after, #OPTION_15:after, #OPTION_17:after, #OPTION_19:after, #OPTION_21:after, #OPTION_23:after, #OPTION_25:after, #OPTION_27:after, #OPTION_29:after, #OPTION_31:after, #OPTION_33:after, #OPTION_35:after, #OPTION_37:after, #OPTION_39:after, #OPTION_41:after, #OPTION_43:after*/
#OPTION_6:before, #OPTION_7:before, #OPTION_9:before, #OPTION_11:before, #OPTION_13:before, #OPTION_15:before, #OPTION_17:before, #OPTION_19:before, #OPTION_21:before, #OPTION_23:before, #OPTION_25:before, #OPTION_27:before, #OPTION_29:before, #OPTION_31:before, #OPTION_33:before, #OPTION_35:before, #OPTION_37:before, #OPTION_39:before, #OPTION_41:before, #OPTION_43:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_6:before, #OPTION_7:before, #OPTION_9:before, #OPTION_11:before, #OPTION_13:before, #OPTION_15:before, #OPTION_17:before, #OPTION_19:before, #OPTION_21:before, #OPTION_23:before, #OPTION_25:before, #OPTION_27:before, #OPTION_29:before, #OPTION_31:before, #OPTION_33:before, #OPTION_35:before, #OPTION_37:before, #OPTION_39:before, #OPTION_41:before, #OPTION_43:before*/
#OPTION_8, #OPTION_10, #OPTION_14, #OPTION_18, #OPTION_22, #OPTION_26, #OPTION_30, #OPTION_34, #OPTION_38, #OPTION_42 {
box-sizing: border-box;
cursor: pointer;
min-height: 14.4px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_8, #OPTION_10, #OPTION_14, #OPTION_18, #OPTION_22, #OPTION_26, #OPTION_30, #OPTION_34, #OPTION_38, #OPTION_42*/
#OPTION_8:after, #OPTION_10:after, #OPTION_14:after, #OPTION_18:after, #OPTION_22:after, #OPTION_26:after, #OPTION_30:after, #OPTION_34:after, #OPTION_38:after, #OPTION_42:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_8:after, #OPTION_10:after, #OPTION_14:after, #OPTION_18:after, #OPTION_22:after, #OPTION_26:after, #OPTION_30:after, #OPTION_34:after, #OPTION_38:after, #OPTION_42:after*/
#OPTION_8:before, #OPTION_10:before, #OPTION_14:before, #OPTION_18:before, #OPTION_22:before, #OPTION_26:before, #OPTION_30:before, #OPTION_34:before, #OPTION_38:before, #OPTION_42:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_8:before, #OPTION_10:before, #OPTION_14:before, #OPTION_18:before, #OPTION_22:before, #OPTION_26:before, #OPTION_30:before, #OPTION_34:before, #OPTION_38:before, #OPTION_42:before*/
#OPTION_12, #OPTION_16, #OPTION_24, #OPTION_32, #OPTION_40 {
box-sizing: border-box;
cursor: pointer;
min-height: 14.4px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_12, #OPTION_16, #OPTION_24, #OPTION_32, #OPTION_40*/
#OPTION_12:after, #OPTION_16:after, #OPTION_24:after, #OPTION_32:after, #OPTION_40:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_12:after, #OPTION_16:after, #OPTION_24:after, #OPTION_32:after, #OPTION_40:after*/
#OPTION_12:before, #OPTION_16:before, #OPTION_24:before, #OPTION_32:before, #OPTION_40:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_12:before, #OPTION_16:before, #OPTION_24:before, #OPTION_32:before, #OPTION_40:before*/
#OPTION_20, #OPTION_28 {
box-sizing: border-box;
cursor: pointer;
min-height: 14.4px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_20, #OPTION_28*/
#OPTION_20:after, #OPTION_28:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_20:after, #OPTION_28:after*/
#OPTION_20:before, #OPTION_28:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_20:before, #OPTION_28:before*/
#OPTION_36 {
box-sizing: border-box;
cursor: pointer;
min-height: 14.4px;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_36*/
#OPTION_36:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_36:after*/
#OPTION_36:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#OPTION_36:before*/
#INPUT_44 {
color: rgb(85, 85, 85);
display: block;
float: left;
height: 38px;
text-decoration: none solid rgb(85, 85, 85);
text-size-adjust: 100%;
width: 348.594px;
column-rule-color: rgb(85, 85, 85);
perspective-origin: 174.297px 19px;
transform-origin: 174.297px 19px;
caret-color: rgb(85, 85, 85);
border: 0px none rgb(85, 85, 85);
font: normal normal 400 normal 12px / 15.96px Poppins, sans-serif;
outline: rgb(85, 85, 85) none 0px;
padding: 10px 30px;
}/*#INPUT_44*/
#INPUT_44:after {
box-sizing: border-box;
color: rgb(85, 85, 85);
text-decoration: none solid rgb(85, 85, 85);
text-size-adjust: 100%;
column-rule-color: rgb(85, 85, 85);
caret-color: rgb(85, 85, 85);
border: 0px none rgb(85, 85, 85);
font: normal normal 400 normal 12px / 15.96px Poppins, sans-serif;
outline: rgb(85, 85, 85) none 0px;
}/*#INPUT_44:after*/
#INPUT_44:before {
box-sizing: border-box;
color: rgb(85, 85, 85);
text-decoration: none solid rgb(85, 85, 85);
text-size-adjust: 100%;
column-rule-color: rgb(85, 85, 85);
caret-color: rgb(85, 85, 85);
border: 0px none rgb(85, 85, 85);
font: normal normal 400 normal 12px / 15.96px Poppins, sans-serif;
outline: rgb(85, 85, 85) none 0px;
}/*#INPUT_44:before*/
#SPAN_45 {
bottom: 0px;
box-sizing: border-box;
display: table-cell;
height: 38px;
left: 0px;
letter-spacing: 0.7px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
vertical-align: middle;
white-space: nowrap;
width: 0px;
perspective-origin: 0px 19px;
transform-origin: 0px 19px;
font: normal normal 400 normal 0px / 24px Poppins, sans-serif;
}/*#SPAN_45*/
#SPAN_45:after {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
white-space: nowrap;
font: normal normal 400 normal 0px / 24px Poppins, sans-serif;
}/*#SPAN_45:after*/
#SPAN_45:before {
box-sizing: border-box;
letter-spacing: 0.7px;
text-size-adjust: 100%;
white-space: nowrap;
font: normal normal 400 normal 0px / 24px Poppins, sans-serif;
}/*#SPAN_45:before*/
#BUTTON_46 {
background-position: 50% 50%;
bottom: 10px;
cursor: pointer;
display: block;
height: 16px;
left: -36px;
position: absolute;
right: 20px;
text-size-adjust: 100%;
text-transform: capitalize;
top: 12px;
vertical-align: middle;
white-space: nowrap;
width: 17px;
perspective-origin: 8.5px 8px;
transform-origin: 8.5px 8px;
background: rgba(0, 0, 0, 0) url("http://opencart.templatemela.com/OPC10/OPC100235/OPC4/catalog/view/theme/OPC100235_4/image/megnor/search.png") no-repeat scroll 50% 50% / auto padding-box border-box;
border: 0px none rgb(0, 0, 0);
border-radius: 0 5px 5px 0;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
margin: 0px 0px 0px -1px;
padding: 0px;
transition: all 0.3s ease-in-out 0s;
}/*#BUTTON_46*/
#BUTTON_46:after {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
text-transform: capitalize;
white-space: nowrap;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#BUTTON_46:after*/
#BUTTON_46:before {
box-sizing: border-box;
cursor: pointer;
text-size-adjust: 100%;
text-transform: capitalize;
white-space: nowrap;
font: normal normal 400 normal 12px / 24px Poppins, sans-serif;
}/*#BUTTON_46:before*/ <div id="DIV_1" style="padding-right:10%; margin-top:12px; display:inline; overflow:hidden; height:40px; width: 390px">
<div id="DIV_2">
<div id="DIV_3">
<div id="DIV_4">
<select name="category_id" id="SELECT_5">
<option value="0" id="OPTION_6">
All Categories
</option>
<option value="18" id="OPTION_7">
Fruits
</option>
<option value="20" id="OPTION_8">
Citrus
</option>
<option value="59" id="OPTION_9">
oranges
</option>
<option value="61" id="OPTION_10">
mandarins
</option>
<option value="62" id="OPTION_11">
limes
</option>
<option value="78" id="OPTION_12">
Amanatsu
</option>
<option value="79" id="OPTION_13">
Lemon
</option>
<option value="80" id="OPTION_14">
Papeda
</option>
<option value="81" id="OPTION_15">
Grapefruit
</option>
<option value="46" id="OPTION_16">
Stone fruit
</option>
<option value="63" id="OPTION_17">
nectarines
</option>
<option value="64" id="OPTION_18">
apricots
</option>
<option value="65" id="OPTION_19">
peaches
</option>
<option value="66" id="OPTION_20">
plums
</option>
<option value="82" id="OPTION_21">
Peach
</option>
<option value="83" id="OPTION_22">
Apricot
</option>
<option value="84" id="OPTION_23">
cherry
</option>
<option value="45" id="OPTION_24">
Berries
</option>
<option value="67" id="OPTION_25">
strawberries
</option>
<option value="68" id="OPTION_26">
raspberries
</option>
<option value="69" id="OPTION_27">
blueberries
</option>
<option value="70" id="OPTION_28">
kiwifruit
</option>
<option value="71" id="OPTION_29">
passionfruit
</option>
<option value="85" id="OPTION_30">
Cranberries
</option>
<option value="86" id="OPTION_31">
Bilberries
</option>
<option value="25" id="OPTION_32">
Fresh Fruits
</option>
<option value="57" id="OPTION_33">
Beverages
</option>
<option value="17" id="OPTION_34">
Cookies & Biscuits
</option>
<option value="24" id="OPTION_35">
Dairy
</option>
<option value="33" id="OPTION_36">
Exotic Fruits
</option>
<option value="34" id="OPTION_37">
vegetables
</option>
<option value="72" id="OPTION_38">
watermelons
</option>
<option value="73" id="OPTION_39">
apricots
</option>
<option value="74" id="OPTION_40">
Leafy green
</option>
<option value="75" id="OPTION_41">
Cruciferous
</option>
<option value="76" id="OPTION_42">
Marrow
</option>
<option value="77" id="OPTION_43">
Allium
</option>
</select>
</div>
<input type="text" name="search" placeholder="Search Product Here..." style="width: 200px" id="INPUT_44" /> <span id="SPAN_45"><button type="submit" id="BUTTON_46">
</button></span>
</div>
</div>
</div>
答案 0 :(得分：1)
如果您希望搜索按钮提交表单，则不应使用<button type="button"></button>，因为这假定您将使用Javascript处理点击。
只需丢弃type="button"或将其设置为type="submit"，它就会发布<form>（您的代码中丢失了该代码，但我认为它在那里）。
答案 1 :(得分：-1)
到目前为止，我知道选择框仅允许您选择项目，除非您使用jQuery添加功能，但可以使用数据列表实现简单的搜索框。确保像示例1一样将数据列表包装在一个表单元素中。否则，请使用输入列表属性将它们链接起来，并像示例2一样链接到数据列表的ID。
示例1：
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Click Me">
</form>
示例2：
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
<input type="text" list="languages">
<input type="submit" value="submit" name="languages" id="languages">