How to make search button in html with icon

In this lesson, we will share with you How to make search button in html with icon (font-awesome). look at this code below:

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
<form action="search">
	<label >
		<input type="search" name="q"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
	</label>  
</form>
    
    </body>

What will happen when we write something in the search box and then put pressure on the ok or the search button? When you write for example "new York" in the search box, then click OK, the URL will change to: https://www.yourdomine.com/search?q=new+york this is the role of attribute ( action="search" ) in form tag in html.

How to make search button in html for external website (YouTube)

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>

		<form action="https://www.youtube.com/results">
  <input type="search" name="search_query"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
</form>

    
    </body>

output:

How to make search button in html with icon

☷✎

How to make search button in html with icon

How to make search button in html for external website (YouTube)

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

Custom permalink creator for blogger

building text editor template using html css js

blogger meta description generator