Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Search type property
The HTML DOM Input search type property is associated with input elements that have type="search". This property returns the string "search" for search input elements and can be used to identify or verify the input type programmatically.
The search input type creates a specialized text field optimized for search queries. Most browsers render it with rounded corners and may include features like a clear button (×) to quickly empty the field.
Syntax
Following is the syntax for getting the search type property −
searchObject.type
Following is the syntax for setting the type property −
searchObject.type = "search"
Return Value
The type property returns a string value representing the type of the input element. For search inputs, it always returns "search".
Example − Getting Input Search Type
Following example demonstrates how to retrieve the type property of a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Search Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Type Property Example</h2>
<form>
<label for="fruitSearch">FRUITS: </label>
<input type="search" id="fruitSearch" name="fruits" placeholder="Search fruits...">
</form>
<p>Get the above element type by clicking the button below:</p>
<button onclick="getType()" style="padding: 8px 16px; cursor: pointer;">Get Type</button>
<p id="result" style="margin-top: 15px; font-weight: bold; color: #333;"></p>
<script>
function getType() {
var searchElement = document.getElementById("fruitSearch");
var inputType = searchElement.type;
document.getElementById("result").innerHTML = "The type for the input field is: " + inputType;
}
</script>
</body>
</html>
The output displays a search input field with a "Get Type" button −
Search Type Property Example FRUITS: [Search fruits... ] Get the above element type by clicking the button below: [Get Type] (After clicking: The type for the input field is: search)
Example − Changing Input Type Dynamically
Following example shows how to change the input type from search to text and vice versa −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Type Change</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Input Type Change</h2>
<form>
<label for="dynamicInput">Input Field: </label>
<input type="search" id="dynamicInput" placeholder="Currently a search field">
</form>
<p>Current type: <span id="currentType" style="font-weight: bold;">search</span></p>
<button onclick="toggleType()" style="padding: 8px 16px; margin: 5px; cursor: pointer;">Toggle Type</button>
<button onclick="checkType()" style="padding: 8px 16px; margin: 5px; cursor: pointer;">Check Type</button>
<p id="output" style="margin-top: 15px; color: #007bff;"></p>
<script>
function toggleType() {
var input = document.getElementById("dynamicInput");
if (input.type === "search") {
input.type = "text";
input.placeholder = "Now a text field";
document.getElementById("currentType").textContent = "text";
} else {
input.type = "search";
input.placeholder = "Now a search field";
document.getElementById("currentType").textContent = "search";
}
}
function checkType() {
var input = document.getElementById("dynamicInput");
document.getElementById("output").innerHTML = "Verified type: " + input.type;
}
</script>
</body>
</html>
This example allows you to toggle between search and text input types and verify the current type −
Dynamic Input Type Change Input Field: [Currently a search field ] Current type: search [Toggle Type] [Check Type] (After clicking buttons: type changes between "search" and "text")
Example − Search Input with Event Handling
Following example demonstrates search input with real-time event handling −
<!DOCTYPE html>
<html>
<head>
<title>Search Input Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Input with Events</h2>
<form>
<label for="searchField">Product Search: </label>
<input type="search" id="searchField" placeholder="Type to search..." oninput="handleSearch()">
</form>
<div style="margin-top: 20px;">
<p>Input Type: <span id="typeDisplay" style="font-weight: bold; color: #28a745;"></span></p>
<p>Search Query: <span id="searchQuery" style="font-style: italic; color: #6c757d;">(empty)</span></p>
<p>Character Count: <span id="charCount" style="color: #17a2b8;">0</span></p>
</div>
<script>
// Display the input type on page load
window.onload = function() {
var searchInput = document.getElementById("searchField");
document.getElementById("typeDisplay").textContent = searchInput.type;
};
function handleSearch() {
var searchInput = document.getElementById("searchField");
var query = searchInput.value;
document.getElementById("searchQuery").textContent = query || "(empty)";
document.getElementById("charCount").textContent = query.length;
}
</script>
</body>
</html>
This example shows real-time updates as the user types in the search field −
Search Input with Events Product Search: [Type to search... ] Input Type: search Search Query: (empty) Character Count: 0 (Values update in real-time as user types)
Key Points
-
The
typeproperty for search inputs always returns the string"search". -
You can use this property to verify that an input element is of search type before performing search-specific operations.
-
The
typeproperty can be both read and modified dynamically using JavaScript. -
Search inputs may have browser-specific styling, such as rounded corners or clear buttons.
-
The property is useful for form validation and dynamic form manipulation.
Browser Compatibility
The HTML DOM Input search type property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The search input type itself is part of HTML5 and provides enhanced user experience for search functionality.
Conclusion
The HTML DOM Input search type property provides a reliable way to identify and work with search input elements. It returns "search" for search inputs and can be used for dynamic form manipulation, validation, and creating interactive search interfaces. This property is essential for building modern web applications with enhanced search functionality.
161 Views
