How To Make A Search Bar Using HTML And CSS In 10 Just Minutes
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Learn How To Make A Search Bar Using HTML And CSS In 10 Just Minutes Step by step tutorials for beginners
In this video we will create a search bar where you can see the Blur Effect in the search field. When we write anything in the search bar and click on the search icon. It will open the google search result. We will make this search bar using HTML And CSS only in just 10 minutes
For Domain and web hosting
Visit Bluehost: bluehost.sjv.i...
Bluehost tutorial:
• How To Make A WordPres...
-----------------------------------
Download images used in this tutorial:
drive.google.c...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
God bless you sir, thank's for this job.
very imazing tutorial for begginers and hope that you will gives very god tutorial for beigganers. 😘😘❣❣❣
how do you have the search bar search through a particular file or library rather than a general web search?
You'll create tag link for it
Bro I'm very happy 😊 I'm seeing your codes that is amazing 😍 very easy steps.....God bless you Bro.....
amazing video tutorial really help me
thank you so much......
Wow, thank You so much! This video is so great for begginers like me! You are awesome! :)) Best regards from Varna, Bulgaria!
Thank you so much for this Amazing tutorial
Gracias
❤
You can also use live server extension to preview you html code, no need to go to manager
Yo got it bro!! That's what I use to preview my code.
You're video is intresting unique and different so If you make tutorial video of html css js youmake we more happy
Amazing, thank you very much!
Please bring tutorial on TH-cam channel website
Awesome bro 👌👌👌 super i found exactly wat i searched..thqqq so much
That is very good video , you are better creator 👍👍👍
Thank you so much 😀
Thx bro 💓 සුපිරි ලන්කාවේ කවුද ඉන්නෙ මේකේ 💭💭
🇱🇰🇱🇰
you illustrated with very simpley thank you ❤
Thank you so much! Now I just need a logo
THANK YOU SO much!
hello bro i am sanskar verma you solved my issue
Thanks sanskar for your comment
thanks and did it
Advanced congratulations for 600k sir.
Good continue by this make another video
Thanks man
I was going to copy and paste, but I learnt a lot. Ahah, thanks!
OOO🤭
really appreciate you !
thank you!
sorry, what the function of sir, thank you❤
thank you very much
thank you
why you had not given the images link in description?
Just added the link in the description, Please check
@@GreatStackDev Thanks
And can you please bring tutorial on TH-cam channel website
I always like your video it's too awesome
how could i make the search bar search for words in my website? so for example, if I have the word safety on my page how could I make the search bar redirect to the page with that word when they search it?
Thanku So Much 🥰
Thabk You sir..
Amazing man
You are very rare now❤️
Thank you sir
good easy tutorials
Many many thanks
thanks bro it is working
Thanks for the video brother
thank u so much bro
Thanks for your help ❤❤❤❤
Thanks this helps 👍
Nice job❤
Thanks 😄
thank you for this i needed it very much!
is this responsive?
I also used this action and method but it is only sending me to Google box.
Thank you😇
Please add a tutorial on how to add a search bar on a simple HTML page where the search function will index the hidden text (that extra info pop-up when pressing a button). Thanks.
Zaber10 yaar
Thank you
Very nice sir plzz make the same video for navigation bar 👍
Sir really super 👍
You're great bro
Thanks!
Thank you :D
Please make Google related search engine create tutorial upload 🙏🙏🙏🙏🙏🙏🙏🙏🙏
I'm a Fan of your easy tutorial. Keep it up
Thanks a lot!
When we search , it only opens google but not searched page sir
Howto overcome from that
Osm sir 👌👌
Thank you🥰
Well done sir!
Very Good Tutorial
First off, GREAT VIDEO!!!
How can I tie my search engine results to only the content on my website/ on my app? Like keywords that link to keywords in my content? Thank you so much in advance!
good stuff. If I may ask though... Instead of a search icon image, can you use a font awesome search icon?
I tried it for myself it works. Thank you
Use entities
Excellent
tq
you used google for searching but I want to show any file they search from my own website. then what will I do? suppose i have made a website for listening songs. if anyone search a song, i want to show the song from my own website, not from google search. then what will i do
Wonderful video
Many thanks Rijon
The video is very useful for students of this subject
Glad you think so!
is this resposive?
love from pakistan
❤❤❤❤❤❤❤
How can i make it work when some one search foe an exercise the search results giv them the exercise videos please
Can't but thank you.😘🌱
Thanks to u bro
You are welcome
thanks
nice
Hi, It was pleasant to follow you as usual, though I'm having a little trouble changing the background of my search icon. I really don't know why this isn't producing the same results as in your video?
exactly
Amazing video thank you so much❤️
Great Job!
When I tried to change the value of the Name attribute from "q" to anything else, it did not work! Hopefully, you have the time to tell me why.
I noticed that too
because after "search?" in the URL there's "q=" where q is the name attribute
Thanks bro
last get methode not working when i am searching anything then i type in search section and after clicking sarch button it just open google search page....not showing the result
Hi do you have courses for beginners?
Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html
@@GreatStackDev sir G aap ky number mil skty h kya
Where
in your video how to make a TH-cam environment you do not write how one selects an icon in index.html and the associated html file opens in the top window of the video-play.html. I guess it will be an but I do not how to connect both, Only the video.mp4 opens. Thanks Dr. Costas Pappas
osm sir
Thanks video
Welcome!
Osm
the besssst
If you share the file in the description that would help, thanks
Most of the people who is watching this video is rookies/begginers and it includes me too lemme know if anyone wanna create a group or discord
Let's create it
Hilarious how they forget to check the grammar on the video title before posting (10 Just Minutes) (Just 10 Minutes)
I copied your code exactly as shown in the video and it did not work. The problem was with the CSS. I change the CSS for Input to this and it worked: input[type=text] {
width: 400px;
height: 50px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 20px;
font-size: 30px;
background-color: aqua;
Bro first learn css and html perfect! And for your kind information css is only use for designing!
bro its not working in 2024
Can you please make an updated HTML crash course.
Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html
how did you create the container div so fast is it an extension?
can you show some more sample for search then display results of search in a listbox
Pls how do make a search button where by when clicked the searched result will be displayed on another page with only the searched item or letter appearing
I dont see a title on the preview, is it supposed to be there or not?
can you do a fix on the backward search on a website like if type 'easy' it will be typed on the search bar like 'ysae'. Please thank you
when I enter the text from Google Chrome memory, it becomes white background in search text box. How can I fix it ?
this is good but how to search website only and not google
You can make a videos also using javascript, and thx
Sir action is not working when I am giving url of Google in action it doesn't work only Google page is open
Sir nowadays instagram search bar is showing like placeholder texts are sliding. So how to make that Search bar where we can slide our placeholder texts. Pls help?
Sir, Can you please do a video to make website for Game developer?
Can we link same search with more website like Google, Amazon, Flipkart etc .
If anyone knows please reply.