How To Make A Search Bar Using HTML And CSS In 10 Just Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ม.ค. 2025

ความคิดเห็น • 225

  • @gigadesign5624
    @gigadesign5624 11 หลายเดือนก่อน +3

    very imazing tutorial for begginers and hope that you will gives very god tutorial for beigganers. 😘😘❣❣❣

  • @topcomments107
    @topcomments107 ปีที่แล้ว +2

    Bro I'm very happy 😊 I'm seeing your codes that is amazing 😍 very easy steps.....God bless you Bro.....

  • @Stephy93
    @Stephy93 10 หลายเดือนก่อน

    Wow, thank You so much! This video is so great for begginers like me! You are awesome! :)) Best regards from Varna, Bulgaria!

  • @eugotavias9967
    @eugotavias9967 6 หลายเดือนก่อน +1

    God bless you sir, thank's for this job.

  • @AllInOneByTanisha
    @AllInOneByTanisha หลายเดือนก่อน

    Very clearly explained... Keep up the good work

    • @GreatStackDev
      @GreatStackDev  29 วันที่ผ่านมา

      I'm glad it helped! 😊 Thank you.

  • @ziadhodeeb9056
    @ziadhodeeb9056 3 ปีที่แล้ว +1

    That is very good video , you are better creator 👍👍👍

  • @fluenscene
    @fluenscene 2 ปีที่แล้ว +30

    how do you have the search bar search through a particular file or library rather than a general web search?

    • @Kodiebeatz_OfficialBeatChannel
      @Kodiebeatz_OfficialBeatChannel 11 หลายเดือนก่อน

      You'll create tag link for it

    • @chigozieobialor1245
      @chigozieobialor1245 3 หลายเดือนก่อน

      You can do that using JavaScript or other programming languages like php, node.js etc

    • @mistersivasli3265
      @mistersivasli3265 2 หลายเดือนก่อน

      @@chigozieobialor1245 how can ı do thıs ? ı am doıng site like youtube, ı should do search button for my websıte

  • @PaigeDLearning
    @PaigeDLearning 3 หลายเดือนก่อน +1

    Thank you for making this video!

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Glad it was helpful!

  • @naymurrahman8993
    @naymurrahman8993 ปีที่แล้ว +1

    amazing video tutorial really help me
    thank you so much......

  • @ahmeduogg6781
    @ahmeduogg6781 ปีที่แล้ว +2

    Thank you so much for this Amazing tutorial
    Gracias

  • @smartlivingwithmuneeb6449
    @smartlivingwithmuneeb6449 2 ปีที่แล้ว

    Advanced congratulations for 600k sir.

  • @Trending_Tales_world
    @Trending_Tales_world 2 ปีที่แล้ว +1

    Awesome bro 👌👌👌 super i found exactly wat i searched..thqqq so much

  • @saugatpaudel9446
    @saugatpaudel9446 2 ปีที่แล้ว +1

    You're video is intresting unique and different so If you make tutorial video of html css js youmake we more happy

  • @gabegamez1018
    @gabegamez1018 ปีที่แล้ว

    Thank you so much! Now I just need a logo

  • @sanskarverma4600
    @sanskarverma4600 3 ปีที่แล้ว +1

    hello bro i am sanskar verma you solved my issue

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว +1

      Thanks sanskar for your comment

  • @zeineldeinwaleed5572
    @zeineldeinwaleed5572 3 ปีที่แล้ว

    You are very rare now❤️

  • @MovieStudio2.05
    @MovieStudio2.05 3 ปีที่แล้ว +2

    Thx bro 💓 සුපිරි ලන්කාවේ කවුද ඉන්නෙ මේකේ 💭💭

  • @yaminivijay4739
    @yaminivijay4739 2 ปีที่แล้ว +4

    You can also use live server extension to preview you html code, no need to go to manager

  • @AbhaySingh-vh1mu
    @AbhaySingh-vh1mu 2 ปีที่แล้ว

    I always like your video it's too awesome

  • @logoquotes3737
    @logoquotes3737 3 ปีที่แล้ว

    I'm a Fan of your easy tutorial. Keep it up

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว

      Thanks a lot!

    • @SarvaRuchi
      @SarvaRuchi 2 ปีที่แล้ว

      When we search , it only opens google but not searched page sir
      Howto overcome from that

  • @clouds6762
    @clouds6762 2 ปีที่แล้ว +1

    I was going to copy and paste, but I learnt a lot. Ahah, thanks!

  • @Melalewcodingwithmobile
    @Melalewcodingwithmobile ปีที่แล้ว

    Good continue by this make another video

  • @AyazKhan-ri9gq
    @AyazKhan-ri9gq 2 ปีที่แล้ว

    Zaber10 yaar

  • @ameeamee3495
    @ameeamee3495 6 หลายเดือนก่อน

    Nice job❤

  • @FGA-47
    @FGA-47 2 ปีที่แล้ว

    Thanks for your help ❤❤❤❤

  • @aneesdeveloper110
    @aneesdeveloper110 2 ปีที่แล้ว

    love from pakistan
    ❤❤❤❤❤❤❤

  • @Mecal21
    @Mecal21 2 ปีที่แล้ว +3

    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?

  • @ravijain1511
    @ravijain1511 10 หลายเดือนก่อน

    Osm sir 👌👌

  • @Glixed_smh
    @Glixed_smh ปีที่แล้ว

    THANK YOU SO much!

  • @karna5998
    @karna5998 2 ปีที่แล้ว

    Thanks for the video brother

  • @gopalloharnew5948
    @gopalloharnew5948 2 ปีที่แล้ว +1

    Amazing man

  • @coderpro731
    @coderpro731 ปีที่แล้ว

    Thanks this helps 👍

  • @Jimil_soni
    @Jimil_soni 3 ปีที่แล้ว

    Very nice sir plzz make the same video for navigation bar 👍

  • @ParmodKumar-em6sh
    @ParmodKumar-em6sh ปีที่แล้ว

    thanks bro it is working

  • @dipakbe
    @dipakbe 2 ปีที่แล้ว +10

    you illustrated with very simpley thank you ❤

  • @Ahthaf
    @Ahthaf 2 ปีที่แล้ว

    Sir really super 👍

  • @Shaurya513
    @Shaurya513 2 ปีที่แล้ว

    thank you for this i needed it very much!

  • @princemalongo9303
    @princemalongo9303 2 ปีที่แล้ว

    You're great bro

  • @florencemuganda6005
    @florencemuganda6005 4 หลายเดือนก่อน

    Hello , awesome tutorial. Unfornately when I click on the search button it only takes me to google but does not include my search tterms.

  • @HarshMehra
    @HarshMehra 2 ปีที่แล้ว

    Thanku So Much 🥰

  • @rajdeoyadav273
    @rajdeoyadav273 3 ปีที่แล้ว +1

    good easy tutorials

  • @AmericanCube
    @AmericanCube 2 ปีที่แล้ว +1

    really appreciate you !

  • @opieststudent440
    @opieststudent440 3 ปีที่แล้ว +6

    Please bring tutorial on TH-cam channel website

  • @RoLo24
    @RoLo24 2 ปีที่แล้ว

    Amazing, thank you very much!

  • @ViLife16
    @ViLife16 ปีที่แล้ว +1

    I also used this action and method but it is only sending me to Google box.

  • @spslak7453
    @spslak7453 2 ปีที่แล้ว

    The video is very useful for students of this subject

  • @giorgimindiashvili3810
    @giorgimindiashvili3810 2 ปีที่แล้ว

    thank u so much bro

  • @opieststudent440
    @opieststudent440 3 ปีที่แล้ว +9

    why you had not given the images link in description?

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว

      Just added the link in the description, Please check

    • @opieststudent440
      @opieststudent440 2 ปีที่แล้ว +1

      @@GreatStackDev Thanks

    • @opieststudent440
      @opieststudent440 2 ปีที่แล้ว +1

      And can you please bring tutorial on TH-cam channel website

  • @bzybplrhealthandwellness2730
    @bzybplrhealthandwellness2730 ปีที่แล้ว

    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!

  • @putrawahyudi5307
    @putrawahyudi5307 ปีที่แล้ว

    sorry, what the function of sir, thank you❤

  • @rijonkhan6059
    @rijonkhan6059 2 ปีที่แล้ว

    Wonderful video

  • @BIO-SERVER
    @BIO-SERVER ปีที่แล้ว

    thank you very much

  • @emmanuelopoku-ameyaw2268
    @emmanuelopoku-ameyaw2268 2 ปีที่แล้ว

    Well done sir!

  • @eralak
    @eralak 2 ปีที่แล้ว +2

    good stuff. If I may ask though... Instead of a search icon image, can you use a font awesome search icon?

    • @eralak
      @eralak 2 ปีที่แล้ว +1

      I tried it for myself it works. Thank you

    • @noobgamingxp489
      @noobgamingxp489 ปีที่แล้ว

      Use entities

  • @durgeshphulari222
    @durgeshphulari222 ปีที่แล้ว

    Thank you sir

  • @martin_vnencak
    @martin_vnencak ปีที่แล้ว

    Thank you :D

  • @bdmizan360
    @bdmizan360 3 ปีที่แล้ว

    Can't but thank you.😘🌱

  • @mow-khaliifa995
    @mow-khaliifa995 2 ปีที่แล้ว

    Thank you🥰

  • @oliverkammel3237
    @oliverkammel3237 ปีที่แล้ว

    Very Good Tutorial

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 3 ปีที่แล้ว

    Thanks video

  • @LatifahBaron2020
    @LatifahBaron2020 3 ปีที่แล้ว +4

    Hi do you have courses for beginners?

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว +2

      Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html

    • @AnilSaini-yw7mp
      @AnilSaini-yw7mp 2 ปีที่แล้ว

      @@GreatStackDev sir G aap ky number mil skty h kya

    • @AnilSaini-yw7mp
      @AnilSaini-yw7mp 2 ปีที่แล้ว

      Where

  • @Techyou-zp5qj
    @Techyou-zp5qj ปีที่แล้ว +1

    How can i make it work when some one search foe an exercise the search results giv them the exercise videos please

  • @dipakbe
    @dipakbe 2 ปีที่แล้ว +1

    Amazing video thank you so much❤️

  • @educationalpoint2017
    @educationalpoint2017 10 หลายเดือนก่อน

    Thabk You sir..

  • @onlineintermedia2671
    @onlineintermedia2671 3 ปีที่แล้ว +1

    Please make Google related search engine create tutorial upload 🙏🙏🙏🙏🙏🙏🙏🙏🙏

  • @Mmzhran
    @Mmzhran 2 ปีที่แล้ว +6

    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.

    • @eralak
      @eralak 2 ปีที่แล้ว

      I noticed that too

    • @Rickmonas90
      @Rickmonas90 2 ปีที่แล้ว +2

      because after "search?" in the URL there's "q=" where q is the name attribute

    • @devakvashisht
      @devakvashisht ปีที่แล้ว

      Thanks bro

  • @hashemimdrafsanjani8447
    @hashemimdrafsanjani8447 3 ปีที่แล้ว

    Excellent

  • @-30h-work-week
    @-30h-work-week ปีที่แล้ว

    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.

  • @eraykabalak4275
    @eraykabalak4275 ปีที่แล้ว

    Thanks!

  • @rayberjany7064
    @rayberjany7064 ปีที่แล้ว +1

    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?

  • @Foxey777
    @Foxey777 6 หลายเดือนก่อน

    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

  • @GOPI-et9wp
    @GOPI-et9wp ปีที่แล้ว

    thanks and did it

  • @ThefakeLukaias
    @ThefakeLukaias 11 หลายเดือนก่อน

    Thanks man

  • @mikeharris1041
    @mikeharris1041 2 ปีที่แล้ว

    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

  • @sahenuredits6320
    @sahenuredits6320 2 ปีที่แล้ว

    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

  • @inaxos9
    @inaxos9 2 ปีที่แล้ว

    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

  • @Mst.Sakiyakaosar-mu9nh
    @Mst.Sakiyakaosar-mu9nh 9 หลายเดือนก่อน

    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

  • @allanabude5192
    @allanabude5192 2 ปีที่แล้ว

    can you show some more sample for search then display results of search in a listbox

  • @nazrinnasimiart
    @nazrinnasimiart ปีที่แล้ว

    Thank you

  • @ramalingamv1820
    @ramalingamv1820 2 ปีที่แล้ว

    Thanks to u bro

  • @ilay288
    @ilay288 11 หลายเดือนก่อน

    how did you create the container div so fast is it an extension?

  • @fortune4826
    @fortune4826 2 ปีที่แล้ว

    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

  • @محمدصدراعباسنژاد
    @محمدصدراعباسنژاد 2 ปีที่แล้ว

    the besssst

  • @mohdsokeen6760
    @mohdsokeen6760 2 ปีที่แล้ว

    osm sir

  • @xyzcooking01
    @xyzcooking01 2 ปีที่แล้ว

    Sir agr google ki jgh apni koi site upload krni ho to kya kren

  • @shahimahar6793
    @shahimahar6793 2 ปีที่แล้ว

    mne yeh code as it as follow kjya but mera na background pic show horhi na style.css wala kam web arha css ko html se link b kya he as it as yahi code follow kya he pr kch nhn horha show

  • @tirimen3505
    @tirimen3505 2 ปีที่แล้ว

    when I enter the text from Google Chrome memory, it becomes white background in search text box. How can I fix it ?

  • @ghostsoldier4448
    @ghostsoldier4448 ปีที่แล้ว

    Is there anyway to redesign the customizable google search engine with CSS?

    • @coderpro731
      @coderpro731 ปีที่แล้ว

      Yea you can
      It's possible

  • @webcoding8333
    @webcoding8333 3 ปีที่แล้ว

    Osm

  • @Ka____ra1
    @Ka____ra1 2 ปีที่แล้ว

    The image don't work
    I wrote
    url(images/background.jpg)

  • @romeocaptain9226
    @romeocaptain9226 2 ปีที่แล้ว

    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?

  • @musaronnie6649
    @musaronnie6649 3 ปีที่แล้ว +1

    Can you please make an updated HTML crash course.

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว

      Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html

  • @billm.700
    @billm.700 2 ปีที่แล้ว +5

    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;

    • @Status_Lover9359
      @Status_Lover9359 2 ปีที่แล้ว

      Bro first learn css and html perfect! And for your kind information css is only use for designing!

  • @mdasadulasadul2448
    @mdasadulasadul2448 2 ปีที่แล้ว

    nice

  • @Cluster.X_G
    @Cluster.X_G ปีที่แล้ว

    Can we link same search with more website like Google, Amazon, Flipkart etc .
    If anyone knows please reply.

  • @freemanproductions555
    @freemanproductions555 2 ปีที่แล้ว

    Hi I try to make some of the website but the image is showing up. If you have free time can you walk me through? new to coding and will appreciate your help. we can setup a zoom.

  • @airdropdada1797
    @airdropdada1797 2 ปีที่แล้ว

    boss your vc code softwer what vorsion ? plz tell me?

  • @karthicks6679
    @karthicks6679 2 ปีที่แล้ว

    Bro i have one doubt. What is that meta key word I don't know that can u tell me bro

  • @DESAN88
    @DESAN88 ปีที่แล้ว

    How can I place the search bar at the top-center of the page?

  • @mehdiamaadour
    @mehdiamaadour 2 ปีที่แล้ว +1

    If you share the file in the description that would help, thanks