Question

我的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>

由于

Answer 1

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

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

您需要编写（或查找）将执行搜索的服务器端程序。

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

Answer 2

正如您在评论中所说，您正在使用博主。在博客中使用此表单。它的工作原理

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

Answer 3

这只是html设计页面。你必须编写一些代码进行搜索。与 onchange 事件一样，您的代码也是如此。

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

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

3 个答案: