为什么我的搜索框没有搜索任何内容？答案

【问题标题】：Why my search box is not searching anything?为什么我的搜索框没有搜索任何内容？
【发布时间】：2016-11-18 13:32:55
【问题描述】：

我的 HTML 和 CSS 在这里。我从流行的网站 w3schools.com 获得了此代码。我必须在哪里写什么？

<html>

<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<p>Animated search form:</p>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

谢谢

【问题讨论】：

您的<form> 标签需要知道要搜索什么，通过使用method 和action 属性。
The HTML5 placeholder attribute is not a substitute for the label element
@Lee — 这是一个搜索表单，所以一个 GET 请求就可以了，所以不需要方法属性，因为 GET 是默认的。
@Lee — action 属性也是可选的，如果省略，它将默认为当前页面的 URL，这通常是可取的。
需要添加功能码

标签： html css search box

【解决方案1】：

guide you appear to have followed 被称为“如何创建动画搜索表单”，不幸的是，它是一个完全关于“动画”页面的指南，与搜索没有任何关系。

表单的目的不是执行搜索。它是从用户那里收集数据并将其发送到服务器端程序。

您需要编写（或查找）一个服务器端程序来为您执行搜索。

首先为服务器端代码选择一种您的服务器支持的编程语言。

【讨论】：

@SumairAli — 不，这是一项非常广泛的任务。

【解决方案2】：

正如您在 cmets 中所说，您正在使用博主。在博客中使用此表格。有效

<form action='/search' class='search-form' method='get' role='search'>
    <input class='form-control' name='q' placeholder='search' type='text'/>
</form>

【讨论】：

【解决方案3】：

这只是 html 设计页面。您必须编写一些代码进行搜索。喜欢 onchange 事件你的代码做什么。

创建一个 javascript 函数并在 onchange 事件上调用该函数。

【讨论】：

我在用博主，请你帮我写个js代码