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
How to use search input type in HTML?
The search input type in HTML is a specialized form control designed for search functionality. It creates a text field that behaves like a regular text input but is semantically identified as a search field, allowing browsers to provide enhanced features like search history and styling optimizations.
Syntax
Following is the basic syntax for the search input type −
<input type="search" name="searchField">
The search input can be enhanced with various attributes like placeholder, value, required, minlength, maxlength, and spellcheck.
Basic Search Input
The search input appears similar to a text input but may display browser-specific features like a clear button (×) or search icon. Let's create a basic search form with JavaScript handling −
<!DOCTYPE html>
<html>
<head>
<title>Basic Search Input</title>
<script>
function show() {
var searchValue = document.getElementById("searchField").value;
document.getElementById("result").innerHTML = "You searched for: " + searchValue;
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="searchForm">
<label for="searchField">Search for:</label>
<input type="search" id="searchField" name="searchField">
<input type="button" value="Search" onclick="show()">
</form>
<p id="result"></p>
</body>
</html>
The output displays a search field with a button. When you enter text and click "Search", it shows the searched term below −
Search for: [search input field] [Search button] (After searching: You searched for: your-input-text)
Using Placeholder Attribute
The placeholder attribute provides helpful hint text that appears inside the search field when it's empty, similar to search engines like Google −
<!DOCTYPE html>
<html>
<head>
<title>Search Input with Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="searchForm">
<label for="searchField">Search for:</label>
<input type="search" id="searchField" name="searchField" placeholder="Enter your search terms...">
<input type="submit" value="Search">
</form>
</body>
</html>
The placeholder text appears in light gray and disappears when the user starts typing −
Search for: [Enter your search terms...] [Search] (Placeholder text shown in gray within the input field)
Value Attribute
The value attribute sets a default value in the search field, which appears as pre-filled text that users can modify or clear −
<!DOCTYPE html>
<html>
<head>
<title>Search Input with Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="searchField">Search for:</label>
<input type="search" id="searchField" name="searchField" value="HTML tutorials">
<input type="submit" value="Search">
</form>
</body>
</html>
Search for: [HTML tutorials] [Search] (Field pre-filled with "HTML tutorials")
Spellcheck Attribute
The spellcheck attribute controls whether the browser checks spelling in the search field. When enabled (true), misspelled words show red wavy underlines. When disabled (false), no spell checking occurs −
Spellcheck Disabled
<!DOCTYPE html>
<html>
<head>
<title>Search Input - Spellcheck Disabled</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="searchField">Search (no spellcheck):</label>
<input type="search" id="searchField" name="searchField" placeholder="Try typing 'heaith' instead of 'health'">
<input type="submit" value="Search">
</form>
</body>
</html>
Spellcheck Enabled
<!DOCTYPE html>
<html>
<head>
<title>Search Input - Spellcheck Enabled</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="searchField">Search (with spellcheck):</label>
<input type="search" id="searchField" name="searchField" placeholder="Try typing 'heaith' instead of 'health'">
<input type="submit" value="Search">
</form>
</body>
</html>
When spellcheck is enabled, incorrectly spelled words will show red wavy underlines in browsers that support this feature.
Length Restrictions
You can control the minimum and maximum character limits using minlength and maxlength attributes. This is useful for specific search scenarios like admission numbers or product codes −
<!DOCTYPE html>
<html>
<head>
<title>Search Input with Length Restrictions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="admissionField">Type Admission Number:</label>
<input type="search" id="admissionField" name="adm" minlength="4" maxlength="6" placeholder="4-6 characters">
<input type="submit" value="Search">
<p><small>Admission number must be between 4-6 characters</small></p>
</form>
</body>
</html>
If users enter fewer than 4 characters, the form will show a validation error when submitted. Users cannot type more than 6 characters.
Complete Search Form
Following example combines multiple attributes to create a comprehensive search form −
<!DOCTYPE html>
<html>
<head>
<title>Complete Search Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<label for="searchField">Student ID Search:</label>
<input
type="search"
id="searchField"
name="studentId"
placeholder="Enter student ID (4-8 chars)"
minlength="4"
maxlength="8"
size="10"
required>
<input type="submit" value="Search Student">
<p><small>Required field: 4-8 characters, no spaces allowed</small></p>
</form>
</body>
</html>
This form includes validation, size control, required field marking, and disabled spellcheck for ID-based searches.
Search Input Attributes
Following table summarizes the key attributes available for search input fields −
| Attribute | Purpose | Example Value |
|---|---|---|
placeholder |
Hint text displayed when field is empty | "Enter search terms..." |
value |
Default text pre-filled in the field | "HTML tutorials" |
minlength |
Minimum number of characters required | "4" |
maxlength |
Maximum number of characters allowed | "50" |
size |
Visual width of the input field | "20" |
required |
Makes the field mandatory for form submission | required |
spellcheck |
Enables/disables spell checking |
"true" or "false"
|
Conclusion
The HTML search input type provides a semantic and user-friendly way to create search fields. It supports various attributes for validation, formatting, and user experience enhancement. While it behaves similarly to text inputs, browsers may provide additional features like search history and specialized styling for better search functionality.
7K+ Views
