How do i make a search bar that searches through the images

1

I have tried to make a search bar when you put any number up to 10910421 it will come up with the image related to the number you search the images are a link that may not help.
code:

<!DOCTYPE html>

<html>

<body>

<h2>10910421 images</h2>

<img src=https://wallpaper.dog/large/10910421.jpg width="500" height="500">

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

* {box-sizing: border-box;}

body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

}

.topnav {

  overflow: hidden;

  background-color: #94a7bd;

}

.topnav a {

  float: left;

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

.topnav a:hover {

  background-color: rgb(255, 0, 200);

  color: black;

}

.topnav a.active {

  background-color: #2600fc;

  color: rgb(0, 0, 0);

}

.topnav .search-container {

  float: right;

}

.topnav input[type=text] {

  padding: 6px;

  margin-top: 8px;

  font-size: 17px;

  border: none;

}

.topnav .search-container button {

  float: right;

  padding: 6px 10px;

  margin-top: 8px;

  margin-right: 16px;

  background: rgba(38, 0, 255, 0.288);

  font-size: 17px;

  border: none;

  cursor: pointer;

}

.topnav .search-container button:hover {

  background: #ccc;

}

@media screen and (max-width: 600px) {

  .topnav .search-container {

    float: none;

  }

  .topnav a, .topnav input[type=text], .topnav .search-container button {

    float: none;

    display: block;

    text-align: left;

    width: 100%;

    margin: 0;

    padding: 14px;

  }

  .topnav input[type=text] {

    border: 5px solid rgba(245, 0, 171, 0.521);  

  }

}

</style>

</head>

<body>

<div class="topnav">

    <form action="/action_page.php">

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

      <button type="submit"><i class="fa fa-search"></i></button>

    </form>

  </div>

</div>

<div style="padding-left:16px">

</div>

</body>

</html>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Hi @oscar4 !

You could use javascript.
There are plenty of tutorials.

If you google
how to make a working search bar for images javascript

then you will get tons of results. :grinning:

4

thanks :rofl: :grinning: :grinning:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.