html搜索框怎么做-猿码集

HTML搜索框怎么做

在现代的网页界面中，搜索框是每个网页必须具备的功能之一。搜索框可以对网站的内容进行检索和搜索，帮助用户更快地找到需要的信息。在HTML中，可以很容易地创建一个搜索框。

创建一个简单的HTML搜索框

我们可以使用HTML表单来创建一个搜索框。表单是一种HTML元素，可以接受用户输入并将其传递给服务器。下面是一个简单的HTML搜索框代码示例：


<form action="search.php" method="get">
  Search: <input type="text" name="q">
  <input type="submit" value="Search">
</form>

上面的代码创建了一个包含一个输入框和一个提交按钮的表单。用户可以在输入框中输入搜索关键字，并单击“搜索”按钮以查找相关内容。在代码中，`action`属性指定表单将发送到`search.php`页面，`name`属性指定输入框的名称为“q”。

为搜索框添加样式

在默认情况下，HTML搜索框可能看起来相当普通。我们可以使用CSS样式来使其看起来更具吸引力。下面是一个为搜索框添加样式的示例：


<style>
  input[type=text] {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
  }
  
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
</style>
<form action="search.php" method="get">
  Search: <input type="text" name="q">
  <input type="submit" value="Search">
</form>

上面的代码将搜索框样式设置为一个具有可自定义颜色和形状的具有基本居中对齐的文本域和背景颜色的提交按钮。

使用JavaScript实现实时搜索

一些网站使用JavaScript技术来在用户键入搜索关键字时自动显示搜索结果。这种技术通常称为“实时搜索”或“自动完成”。下面是一个使用JavaScript实现实时搜索的示例代码：


<style>
  input[type=text] {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
  }
  
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  #searchResults {
    display: none;
    position: absolute;
    width: 50%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 2px solid #ccc;
    z-index: 1;
  }
  
  #searchResults a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    color: #000;
    text-decoration: none;
  }
  
  #searchResults a:hover {
    background-color: #f5f5f5;
  }
</style>
<form action="search.php" method="get">
  Search: <input type="text" name="q" onkeyup="showResults(this.value)">
  <input type="submit" value="Search">
</form>
<div id="searchResults"></div>
<script>
function showResults(str) {
  if (str.length == 0) {
    document.getElementById("searchResults").style.display = "none";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("searchResults").innerHTML = this.responseText;
        document.getElementById("searchResults").style.display = "block";
      }
    };
    xmlhttp.open("GET", "search.php?q="+str, true);
    xmlhttp.send();
  }
}
</script>

上面的代码将搜索框样式设置为一个具有可自定义颜色和形状的具有基本居中对齐的文本域和背景颜色的提交按钮。当用户在搜索框中输入文本时，它会自动在下面显示一个搜索结果列表。

总结

在本文中，我们介绍了如何使用HTML表单来创建搜索框，并介绍了如何使用CSS样式将其美化。此外，我们还使用了JavaScript技术实现了实时搜索的功能。无论您正在创建哪种类型的Web应用程序，都应该向其添加搜索框，以提高用户体验并增强系统的可用性。

html搜索框怎么做