How to create html search box

How to create HTML search box? Teach you how to quickly implement

Modern websites are inseparable from the search function, which has become one of the basic elements of the website. When users need to find some specific information, especially when the website content is huge, the search function is particularly important. In HTML, implementing a search box does not require too much code and skills. It only needs to follow certain specifications and can be easily implemented.

This article will introduce in detail the implementation method of HTML search box, as well as some practical skills, so that you can quickly add search functions to your website.

1. Create the basic structure of an HTML search box

To create a search box, first we need to use HTML to define the basic structure of the search box. In the search box, we generally use the element, which has many types. We use the type="text" type here to define a text input box, as shown below:

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

In this HTML code snippet, we created a

element and defined a The text input box also uses the placeholder attribute to provide prompt information for the input box. Note: The placeholder attribute is a new attribute in HTML5. This attribute can be used to enter prompt information in the text box. It will disappear after the user enters content into the text box.

2. Add a submit button

When creating the search function, we also need a submit button. After the user enters text, he or she needs to use the mouse or keyboard to enter and submit the search request. For the submit button, we also use the element with type "submit", as shown below:

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

In this HTML code, we added an

3. Implementing the search function

We have defined the basic structure and style of the search box above, and then we need to implement the search function. The simplest method is to use the action attribute of HTML to pass the search form request to the server for processing. For example, the following code will submit the search form request to the "search.php" page for processing.

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

However, if you don’t have a server yet or haven’t written server-side code, you can use JavaScript in HTML to implement the search function. We use JavaScript to listen to the click event of the submit button and obtain the text information in the input box. The specific operation is as follows:

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

In this example, we first add an id attribute to the element so that the reference to the element can be easily obtained in JavaScript code. We then define a JavaScript function called "search" that is called by the submit button's onclick event. In the "search" function, we obtain the reference to the input box through document.getElementById, obtain the search keyword entered in the input box, and finally use the alert function to display the keyword being searched. Behind the alert function, we can write our own search code.

4. Implement the automatic prompt function

The automatic prompt function in the search box allows users to automatically pop up relevant search suggestions when entering keywords. This feature is very useful as it helps users find the information they want faster. To implement the automatic prompt function of the search box in HTML, you can use JavaScript to implement it. For example, we can bind the onkeyup event of the input box, and relevant search suggestions will automatically pop up for the user every time characters are entered in the input box.

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

In the above code, we define a function named "showHint", which uses the XMLHttpRequest object to send a get request to the background to obtain keyword-related search suggestions. When the search suggestions are obtained, we display them in the defined HTML element with the id "hintBox".

5. Add styles

Finally, we can beautify the appearance of the search box through CSS styles. For example, the style of the search box can be unified by setting the background color, outer border, inner margin, etc. The code is as follows:

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;
}

In the above code, we set the inner margin of the input box, Outer borders, rounded corners and other styles make it look more beautiful. At the same time, we also defined a :focus pseudo-class. When the input box gains focus, the border style will be changed to establish a relationship with the box rendering. In the submit button style, we set the style change when the mouse is hovered.

Summary

Through the introduction of this article, we have learned how to use HTML and JavaScript to create a search box, and mastered some common techniques, such as automatic prompt functions and beautification styles, etc. . The implementation principle of the search box is also the implementation principle of hyperlinks. The simplest implementation method is to use the submission function of HTML form elements to send the form data to the server for processing. Of course, we can also use JavaScript hooks to intercept data for partial processing on the front end, which will often be faster, safer, and better meet business needs. After mastering these skills, I believe your web pages will be more colorful.

The above is the detailed content of How to create html search box. For more information, please follow other related articles on the PHP Chinese website!