ad

Friday, December 12, 2025

How To Use Html Search Input Type

How To Use Html Search Input Type

web designing theory

This Blog You Will Learn 

ஃ What is the search input type

ஃ Attributes Search input 

ஃ Why Use type="search" ?

ஃ How it Works 

ஃ Syntax of HTML Search tag

ஃ Explain Program

ஃ Output

What is the search input type

✅ search input type is HTML form control use to create a search field that allows user enter keyword search for information on a website.

✅ input type="search"> is HTML form control designed specifically for entering search text.

✅normal  text box but semantically  meant for search operations.

Attributes Search input 

1) name :- required to send search data

2)  placeholder :- shows hint text.

3)  required :- makes search mandatory.

4) maxlength :- limits input lenght .

 Why Use type="search" ?

 ✔ improves accessibility.

 ✔ clearly indicates the field is for searching.

 ✔ Enhances user experience. 

 ✔ Helps browsers optimize the input behavior

 ✔ Semantic Meaning ( code cleaner and meaningful)

How it Works 

  • Allows users to type search keywords.
  • works like a text box
  • Browsers recognize it as search field
  • Mobile device may display a search - optimized keyboard.

 Syntax of HTML Search tag


  <input type="search">

How to use html Search input type
Example


<!DOCTYPE html>
<html>
    <head>
      <title> HTML Display Search  tag </title>
    </head>
        <body>
            <form>
   <label for="searchg">Google Search</label>
<input type="searchg" id="searchg"
name="searchg">
              <input type="submit">
                </form>
         </body>
</html>


how to use html Search input type

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
    <title> HTML Display Search  tag </title>
</head>


  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.

Step 4]

<body>
    <form>
     <label for="searchg">Google Search</label>
     
<input type="searchg" id="searchg"
name="searchg">
              <input type="submit">
                </form>
  </body>


HTML <form> tag  create form where user enter data and submit.
HTML <input>  tag        :-  Display  text.
HTML <label for=" ">  :-  for attribute   use connect this label. 

<input type="searchg" id="searchg"
name="searchg">

HTML  input    :- html element get user  input.

type="searchg"

input type  Attribute use to specify type of <input> display the default type input.
Step 5]

   Closing tag


  </body>
</html>

how to use html Search input type
Output

Labels: , ,