👀 Live Preview
The modern way to add search—a labeled <form> with type="search":
HTML <isindex> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll understand the historical <isindex> search field and what to use instead in modern HTML.
Historical Syntax
How <isindex> created a single-line query field without a <form>.
Obsolete Attributes
Understand legacy prompt and action from early HTML.
Deprecated Status
Why <isindex> was removed from HTML5.
isindex vs form
Compare the legacy tag with modern <form> and <input>.
Modern Replacement
Build search UI with type="search", labels, and buttons.
Accessible Search
Labels, focus states, and keyboard-friendly search forms.
Fundamentals
What Was the <isindex> Tag?
The <isindex> element was an early HTML feature that rendered a single-line text field for searching within a document. Authors placed it in the <head> or <body>, and pressing Enter submitted the query to the server.
Obsolete in HTML5 — Use <form> + <input>
Do not use <isindex> in new projects. It was deprecated in HTML 4.01 and removed from HTML5. Modern browsers ignore it. Use a <form> with an <input type="search"> instead.
In the early web, <isindex> offered a quick way to add document search without building a full form. Today the same goal is met with semantic forms that support labels, validation, styling, and accessibility.
use-form-instead.html
<form action="/search" method="get" role="search">
<label for="q">Search:</label>
<input type="search" id="q" name="q" placeholder="Enter search query">
<button type="submit">Search</button>
</form>Foundation
📝 Syntax (Historical)
Legacy HTML placed <isindex> in the document with an optional prompt attribute:
syntax.html
<isindex prompt="Enter search query:">Syntax Rules
<isindex>had no closing tag and no inner content.- It could appear in
headorbodyin very old HTML documents. - The browser rendered one text field; Enter submitted the query to the server.
- Modern HTML5 parsers treat the tag as unknown and do not render a search field.
Cheat Sheet
⚡ Quick Reference
| Topic | Legacy (isindex) | Modern replacement |
|---|---|---|
| Search field | <isindex prompt="Search:"> | <input type="search"> |
| Prompt text | prompt attribute | <label> or placeholder |
| Submit target | action attribute | <form action="/search"> |
| Submit control | Enter key only | <button type="submit"> |
| Status | Obsolete | HTML5 standard |
| Accessibility | No proper label API | label, aria-label, focus styles |
Comparison
⚖️ <isindex> vs <form> + <input>
Modern search forms replace every limitation of the legacy tag:
| Feature | <isindex> | <form> + <input> |
|---|---|---|
| Status | Obsolete, removed from HTML5 | Standard HTML5 |
| Visible label | prompt text only | <label for="id"> |
| Input types | Single text line | search, text, and more |
| Submit button | Not available | <button type="submit"> |
| Validation | None | required, pattern, Constraint Validation API |
| Styling | Browser-controlled only | Full CSS control |
migration.html
<!-- Legacy (do not use) -->
<isindex prompt="Search this site:">
<!-- Modern replacement -->
<form action="/search" method="get" role="search">
<label for="site-search">Search this site:</label>
<input type="search" id="site-search" name="q">
<button type="submit">Search</button>
</form>Reference
🧰 Attributes (Historical)
Very old browsers recognized these attributes on <isindex>:
prompt ObsoleteText displayed before the search input as a hint or instruction.
prompt="Search this site:"action ObsoleteURL where the query string was sent when the user pressed Enter.
action="/cgi-bin/search" attributes.html
<isindex
prompt="Enter your search term:"
action="/search"
>All isindex attributes are historical only. The entire element is obsolete and ignored by modern browsers.
Hands-On
Examples Gallery
Historical isindex patterns plus modern search forms. Legacy examples are for learning only—they will not render in current browsers.
Legacy prompt Attribute
How <isindex> looked with a prompt. For learning only—modern browsers ignore it.
⚠️ This tag is ignored by all modern browsers.
legacy-isindex.html
<isindex prompt="Search this site:">📚 Common Use Cases (Historical)
In early HTML, authors used <isindex> for simple document or site search. Today the same goals are met with accessible <form> elements and server-side or client-side search logic.
isindex in the head
Some legacy pages placed <isindex> inside <head>. Browsers that supported it rendered a search field on the page.
isindex-in-head.html
<!DOCTYPE html>
<html>
<head>
<title>Example of isindex</title>
<isindex prompt="Enter your search term:">
</head>
<body>
<p>This page demonstrates the obsolete <code><isindex></code> tag.</p>
</body>
</html>Modern <form> Replacement
This is what beginners should use today. A visible label, search input, and submit button give users full control.
search-form.html
<form action="/search" method="get" role="search">
<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="Enter search query">
<button type="submit">Search</button>
</form>Search with JavaScript
For instant feedback, listen to input events on a search field. Open the browser console (F12) to see logged queries.
live-search.html
<form id="searchForm" role="search">
<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="Enter search query">
<button type="submit">Search</button>
</form>
<script>
document.getElementById("search").addEventListener("input", function (e) {
console.log("Searching for: " + e.target.value);
});
</script>Design
Styling Search Forms with CSS
Unlike <isindex>, modern forms can be styled fully. Customize search fields for your site design:
border-radius Rounded search bar:focus Visible focus ringflex Inline search + button::placeholder Hint text styling search-styles.css
/* Accessible search form layout */
form.search-bar {
display: flex;
gap: 0.5rem;
max-width: 420px;
}
form.search-bar input[type="search"] {
flex: 1;
padding: 0.5rem 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
}
form.search-bar input[type="search"]:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
form.search-bar button {
padding: 0.5rem 1rem;
border: none;
border-radius: 8px;
background: #2563eb;
color: #fff;
}Live styled search
A11y
♿ Accessibility
Modern search forms fix the accessibility gaps of <isindex>:
- Use a visible label — connect
<label for="id">to the search input; do not rely on placeholder text alone. - Add
role="search"— on the<form>so assistive tech identifies the region as site search. - Provide a submit button — keyboard and screen reader users need an explicit control, not only the Enter key.
- Ensure visible focus — custom CSS must keep a clear focus indicator on the input and button.
🧠 How <isindex> Worked
1
Author added isindex with prompt
Place the tag in head or body with optional prompt text.
Markup
2
Browser rendered one text field
Supporting browsers showed a single-line input for the user’s query.
Legacy only
3
Enter submitted the query
Pressing Enter sent the value to the URL in action or the current document.
Behavior
=
Today: use form + input
Learn isindex for history. Build real search UI with <form> and <input type="search">.
Compatibility
Browser Support
<isindex> is obsolete and not part of HTML5. Modern browsers do not render a search field from this tag.
Obsolete · Use form + input
Not supported in HTML5
Chrome, Firefox, Safari, Edge, and Opera ignore <isindex>. Only very old browsers may have rendered a search field. Do not use this tag in new documents.
95% Legacy reference
Google Chrome Not in HTML5 · Obsolete
Not supportedMozilla Firefox Not in HTML5 · Obsolete
Not supportedApple Safari Not in HTML5 · Obsolete
Not supportedMicrosoft Edge Not in HTML5 · Obsolete
Not supportedInternet Explorer Legacy support · EOL
Legacy onlyOpera Not in HTML5 · Obsolete
Not supportedModern replacements
Use these HTML5 approaches instead of isindex.
form + input type="search" Standard search field with label and submit button
ReplacementAccessible labels Visible labels and focus styles for all users
A11y<isindex> tag 95% legacy reference
Bottom line: Do not use <isindex> in new projects. Use <form> with <input type="search"> instead.
Wrap Up
Conclusion
The <isindex> tag is a relic of early HTML—useful to recognize in archived pages, but not for new sites. Beginners should learn <form>, <label>, and <input type="search"> for all search interfaces, with proper accessibility and styling.
Pro Tips
💡 Best Practices
✅ Do
- Use
<form role="search">for site search - Pair every input with a visible
<label> - Use
type="search"for search-specific keyboard hints - Learn
isindexonly to read legacy HTML
❌ Don’t
- Use
<isindex>in any new HTML code - Rely on placeholder text instead of labels
- Expect isindex to render in modern browsers
- Skip a submit button when users need explicit search control
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <isindex>
Bookmark these before you ship — they’ll keep your search UI modern and accessible.
6
Core concepts 01
Obsolete Tag
<isindex> was removed from HTML5—do not use it in new code.
02
Single-Line Search
It rendered one text field for document search in very old browsers.
Behavior 03
prompt Attribute
prompt showed helper text before the legacy input.
04
Use form Today
<form> + <input type="search"> is the standard replacement.
05
Labels Matter
Modern forms need visible labels—not just prompt text.
Accessibility 06
Modern Browsers Ignore It
Chrome, Firefox, Safari, Edge, and Opera do not render isindex.
Compatibility❓ Frequently Asked Questions
It created a single-line text field for searching within a document. Pressing Enter submitted the query to the server.
No. It was deprecated in HTML 4.01 and removed from HTML5. Modern browsers ignore it.
Use a
<form> with an <input type="search">, a <label>, and a submit button.prompt set helper text before the field. action set the URL that received the query. Both are obsolete.No. Current Chrome, Firefox, Safari, Edge, and Opera do not render a search field from
<isindex>.No. Learn it to understand old HTML, but always use
<form> and <input> for real projects.Learn the Modern Way
Skip deprecated isindex. Practice accessible search forms with form and input in the Try It editor.
About the author
6 people found this page helpful