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 disable spell check from input box and text area in HTML forms?
The spellcheck attribute in HTML allows you to control whether browsers should check spelling and grammar in input fields and text areas. By default, most browsers enable spell checking on editable text elements, showing misspelled words with a red underline. You can disable this feature by setting the spellcheck attribute to false.
Syntax
Following is the syntax for the spellcheck attribute on input elements
<input type="text">
Following is the syntax for the spellcheck attribute on textarea elements
<textarea></textarea>
Spellcheck Attribute Values
The spellcheck attribute accepts the following values
true Enables spell checking (default behavior for most text inputs)
false Disables spell checking completely
Disabling Spellcheck in Input Fields
To disable spell checking in input fields, set the spellcheck attribute to false. This is particularly useful for fields containing technical terms, usernames, or code snippets that might be flagged as misspelled.
Example
Following example shows how to disable spellcheck in various input types
<!DOCTYPE html>
<html>
<head>
<title>Disable Spellcheck in Input Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Fields with Spellcheck Disabled</h2>
<form>
<p><label for="username">Username (no spellcheck):</label></p>
<input type="text" id="username" name="username"
placeholder="Enter your username" style="width: 250px; padding: 8px;">
<p><label for="email">Email (no spellcheck):</label></p>
<input type="email" id="email" name="email"
placeholder="user@example.com" style="width: 250px; padding: 8px;">
<p><label for="search">Search Terms (no spellcheck):</label></p>
<input type="search" id="search" name="search"
placeholder="Enter search keywords" style="width: 250px; padding: 8px;">
</form>
</body>
</html>
These input fields will not show red underlines for misspelled words, making them suitable for technical or non-dictionary terms.
Disabling Spellcheck in Text Areas
Text areas often contain longer text where spell checking might interfere with code examples, technical documentation, or specialized terminology.
Example
Following example demonstrates disabling spellcheck in textarea elements
<!DOCTYPE html>
<html>
<head>
<title>Disable Spellcheck in Textarea</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Code Editor (Spellcheck Disabled)</h2>
<form>
<label for="code">HTML Code:</label><br>
<textarea id="code" name="code" rows="6" cols="60"
style="font-family: monospace; padding: 10px; border: 1px solid #ccc;">
<div class="container">
<h1 id="mainHeader">Welcome</h1>
<p class="description">This is a sample paragraph.</p>
</div></textarea>
<br><br>
<label for="notes">Technical Notes:</label><br>
<textarea id="notes" name="notes" rows="4" cols="60"
placeholder="Enter technical notes, APIs, database queries..."
style="padding: 10px; border: 1px solid #ccc;"></textarea>
</form>
</body>
</html>
The textarea elements will not highlight HTML tags, CSS classes, or technical terms as spelling errors.
Comparing Enabled vs Disabled Spellcheck
Example
Following example shows the difference between enabled and disabled spellcheck side by side
<!DOCTYPE html>
<html>
<head>
<title>Spellcheck Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Spellcheck Enabled vs Disabled</h2>
<div style="display: flex; gap: 30px;">
<div style="flex: 1;">
<h3 style="color: #5cb85c;">Spellcheck Enabled</h3>
<p>Type misspelled words to see red underlines:</p>
<textarea rows="4" cols="30"
style="width: 100%; padding: 10px; border: 2px solid #5cb85c;"
placeholder="Try typing: 'recieve', 'seperate', 'occured'"></textarea>
</div>
<div style="flex: 1;">
<h3 style="color: #d9534f;">Spellcheck Disabled</h3>
<p>Same words, no spell checking:</p>
<textarea rows="4" cols="30"
style="width: 100%; padding: 10px; border: 2px solid #d9534f;"
placeholder="Try typing: 'recieve', 'seperate', 'occured'"></textarea>
</div>
</div>
<p style="margin-top: 20px;"><strong>Note:</strong> The left textarea will show red underlines for misspelled words, while the right one will not.</p>
</body>
</html>
This comparison clearly shows how the spellcheck attribute affects user experience in form fields.
Common Use Cases for Disabled Spellcheck
Disabling spellcheck is particularly useful in the following scenarios
Code editors HTML, CSS, JavaScript, and other programming languages contain many terms not found in dictionaries
Username fields Usernames often contain non-dictionary combinations of letters and numbers
Email addresses Email domains and usernames may appear as misspelled words
Technical documentation API names, database fields, and technical terms may trigger false positives
Search fields Users might search for brand names, technical terms, or intentionally misspelled queries
Browser Compatibility
The spellcheck attribute is widely supported across modern browsers. However, the actual spell checking behavior may vary slightly between browsers and operating systems. Some browsers may ignore the spellcheck attribute on certain input types like password or number.
| Browser | Support | Notes |
|---|---|---|
| Chrome | Full support | Respects system spell checker settings |
| Firefox | Full support | Built-in spell checker with multiple languages |
| Safari | Full support | Uses macOS spell checking system |
| Edge | Full support | Integrates with Windows spell checker |
Conclusion
The spellcheck attribute provides precise control over browser spell checking in HTML forms. Setting spellcheck="false" is essential for input fields containing technical terms, usernames, code, or other non-dictionary content where spell checking would create unnecessary visual distractions for users.
1K+ Views
