HTML - spellcheck Attribute

HTML spellcheck attribute specifies whether the browser should check the spelling of the text in an editable element.

Several elements, including text input fields and contenteditable elements, can have the spellcheck global attribute applied to them in HTML. It regulates the behavior of the browser's automatic spell-checking feature, enabling or disabling it, and providing suggestions for text corrections within the element.

This attribute can be set to true to enable it, false to turn it off, or unspecified to let the browser decide what to do by default. By making sure that user-generated information is written correctly, it increases the user experience.

Syntax

<tag contenteditable spellcheck="true | false">

Applies On

Since spellcheck is a global attribute in HTML, all the tags which can contain text in it supports spellcheck attribute.

Examples of HTML spellcheck Attribute

Below examples will illustrate the HTML spellcheck attribute, where and how we should use this attribute!

Spelling check for paragraph element

In the following example, we are creating an HTML document and using the spellcheck attribute to determine whether the element may be checked for spelling errors.

<!DOCTYPE html>
<html>
<head>
    <style>
    p {
        padding: 2px;
    }
    </style>
</head>
<body>
   <h3>HTML spellcheck Attribute</h3>
   <strong>Spellcheck is active</strong>
   <p contenteditable spellcheck="true">
      This exampull will be checked fur spellung 
      when you try to edit it.
   </p>
   <strong>Spellcheck is deactivate</strong>
   <p contenteditable spellcheck="false">
      This exampull will nut be checked fur spellung
      when you try to edit it.
   </p>
</body>
</html>

Spelling check for input Element

Let's look at the following example, where we create a form and enable spellcheck in an input field. If the spelling is incorrect, it will underline through a red line.

<!DOCTYPE html>
<html>

<body>
   <h3>HTML spellcheck Attribute</h3>
   <form>
      <p>
      <input type="text" spellcheck="true"
             placeholder="Enter your name">
      </p>
      <p>
      <input type="email" spellcheck="true" 
             placeholder="Enter your email">
      </p>
      <p>
      <textarea spellcheck="true" 
                placeholder="comments">
      </textarea>
      </p>
      <button type="reset">Reset</button>
   </form>
</body>

</html>

Supported Browsers

Attribute
spellcheck	9.0	10.0	2.0	5.1	10.5

html_attributes_reference.htm