HTML Search Input Type Explained with Examples
How To Use Html Search Input Type
ஃ What is the search input type
ஃ Attributes Search input
ஃ Why Use type="search" ?
ஃ How it Works
ஃ Syntax of HTML Search tag
ஃ structure diagram examples
ஃ 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.
✅ 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 .
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">
ஃ structure diagram examples
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"
Step 5]
Closing tag
</body>
</html>
Post a Comment