Issue #15 - Spell check

You can disable spell check in input, textarea and contenteditable fields.

<label for="msg">Message</label>
<textarea spellcheck="false" id="msg">HTML is amazzing!</textarea>

spellcheck is an enumerated attribute, so we must provide a value, either “true” or “false”. If no attribute is present, the browser decides whether it checks an element for spelling errors.

<div>
<label for="msg">Message</label>
<input value="HTML is amazzing!" id="msg">
</div>

<div>
<label for="msg2">Message</label>
<textarea id="msg2">HTML is amazzing!</textarea>
</div>

<div>
<strong>Message:</strong>
<div contenteditable>HTML is amazzing!</div>
</div>

If you click one of the fields below (in some browsers you have to type something), you should see a squiggly, dashed or dotted red line indicating that “amazzing” isn’t spelled correctly. Please note: Results may differ depending on your browser and default language. The attribute is merely a hint, browsers are not required to check for spelling errors.

Message:
HTML is amazzing!

We can hint browsers at (not) checking an element for spelling errors.

<div>
<label for="msg2">Message</label>
<textarea spellcheck="false" id="msg2">HTML is amazzing!</textarea>
</div>

In the following textarea you shouldn't see a squiggly red line because spellcheck is set to “false”.

In the following input field you should see a squiggly red line because spellcheck is set to true.

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.