HTML - Global spellcheck Attribute

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

Following is the syntax of spellcheck attribute −

<p contenteditable spellcheck="true, or false">

Example

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>
<body>
   <p contenteditable spellcheck="true">This exampull will be checkd fur spellung when you try to edit it.</p>
   <p contenteditable spellcheck="false">This exampull will nut be checkd fur spellung when you try to edit it.</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

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>Example of SpellCheck</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>

On running the above code,the output window will pop up displaying the input field along with a click button mentioned with a spellcheck on the webpage.

Example

Considering the another scenario, where we are going to use the spellcheck attribute.

<!DOCTYPE html>
<html>
<body>
   <h3>Example of SpellCheck</h3>
   <p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p> First name: <input type="text" name="fname" spellcheck="true">
</body>
</html>

When we run the above code, it will generate an output consisting of the text and a input field mentioned with spell check displayed on the webpage.

html_attributes_reference.htm