Skip to content

Adding a Search Bar to Your Site

software development, coding, web development1 min read

search bar

I recently added search capability to this site! Scroll down to the footer to check it out!

There are many, many, many ways to add search capability to your website. I implemented pretty much the most quick-and-dirty approach here, though I may try to update it in the future. All I did was add an HTML form with the Action attribute to my site's footer. The input links to a Google search of just the site. You can see my code here.

If you're looking to learn more about the HTML form Action attribute, W3Schools has a pretty useful web environment where you can explore the attribute.

I wanted to implement this approach from Monica Powell using React but couldn't seem to get it to work even after quite a bit of trial-and-error (mostly because I am very unfamiliar with React). If you decide to go this route, I hope you'll have more luck than I did; it's certainly a very aesthetic search capability, and I may try implementing it again if I can get more familiar with React.

Thanks for reading! I hope you find this and other articles here at ilyanaDev helpful! Be sure to follow me on Twitter @ilyanaDev.