html搜索框怎么弄

立即学习“前端免费学习笔记（深入）”；

2. 添加提交按钮

在创建搜索功能时，我们还需要一个提交按钮。当用户输入文本后，需要用鼠标或键盘回车来提交搜索请求。对于提交按钮，我们同样使用元素，类型为"submit"，如下所示：

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

在这段HTML代码中，我们添加了一个元素作为搜索表单的提交按钮，value属性指定了按钮显示在页面上的文字。

3. 实现搜索功能

上面我们定义了搜索框的基本结构和样式，接下来要实现搜索功能。最简单的方法是使用HTML的action属性，将搜索表单的请求传递给服务器进行处理。比如，下面的代码会将搜索表单的请求提交给“search.php”页面进行处理。

千博企业网站管理系统静态HTML2009 Build 0601

千博企业网站管理系统静态HTML搜索引擎优化单语言个人版介绍：系统内置五大模块：内容的创建和获取功能、存储和管理功能、权限管理功能、访问和查询功能及信息发布功能，安全强大灵活的新闻、产品、下载、视频等基础模块结构和灵活的框架结构，便捷的频道管理功能可无限扩展网站的分类需求，打造出专业的企业信息门户网站。周密的安全策略和攻击防护，全面防止各种攻击手段，有效保证网站的安全。系统在用户资料存储和传递中，

下载

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

不过，如果你还没有服务器或者还没有编写服务器端代码，那么可以在HTML中使用JavaScript实现搜索功能。我们使用JavaScript来监听提交按钮的点击事件，同时获取输入框中的文本信息。具体操作如下：

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

在这个示例中，我们首先给元素添加了一个id属性，以便在JavaScript代码中能够方便地获取该元素的引用。然后，我们定义了一个名为“search”的JavaScript函数，该函数被提交按钮的onclick事件调用。在“search”函数中，我们通过document.getElementById获取输入框的引用，取得输入框中所输入的搜索关键字，最后使用alert函数来显示正在搜索的关键字。在alert函数后面，我们可以编写自己的搜索代码。

4. 实现自动提示功能

搜索框中的自动提示功能，可以让用户在输入关键字时，自动弹出相关的搜索建议。这个功能非常有用，它可以帮助用户更快地找到自己想要的信息。在HTML中实现搜索框的自动提示功能，可以使用JavaScript来实现。比如，我们可以绑定输入框的onkeyup事件，在每次输入框中输入字符时，给用户自动弹出相关的搜索建议。

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

在上面的代码中，我们定义了一个名为“showHint”的函数，使用XMLHttpRequest对象向后台发送一个get请求，来获取与关键字相关的搜索建议。当获取到搜索建议后，我们将它们显示在已定义的id为“hintBox”的HTML元素中。

5. 添加样式

最后，我们可以通过CSS样式来美化搜索框的外观。比如，可以通过设置背景颜色、外边框、内边距等方式来实现搜索框的风格统一，代码如下：

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

在上面的代码中，我们设置了输入框的内边距、外边框、圆角等样式，使其外观更加美观。同时，我们还定义了一个:focus伪类，当输入框获得焦点时，会更改边框样式与盒子渲染的关系建立起联系。在提交按钮的样式中，我们设置了鼠标悬停时样式的变化。

总结

通过本篇文章的介绍，我们你学习了如何使用HTML和JavaScript来创建搜索框，并掌握了一些常见的技巧，如自动提示功能及美化样式等。搜索框的实现原理也就是超链接的实现原理，最简单的实现方式是利用HTML表单元素的提交功能，将表单数据发送到服务器进行处理。当然了，我们在前端也可以利用JavaScript钩子拦截数据进行局部处理，往往会更快、更安全、更好地实现业务需求，掌握好这些技巧后，相信你的网页就会更加丰富多彩。