iPentec.com / Doc / HTML

フォームのすべてのコントロールに対してスペルチェックのアラート表示を無効にする - HTML

フォームのすべてのコントロールに対してスペルチェックのアラート表示を無効にするコードを紹介します。

概要

Google Chromeなどのウェブブラウザでは、入力したテキストのスペルが誤っていないか、スペルチェック機能が搭載されています。テキストボックスやテキストエリアでスペルミスがあるとスペルミスの文字の下に赤の波線が表示されます。スペルミスが検出でき便利な機能ですが、編集内容によっては、赤戦で画面が見にくくなってしまう場合があります。
この記事では、HTMLフォームのコントロール全体に対して、スペルチェックのアラート表示を無効にするコードを紹介します。

書式

フォームのコントロール全体に対してスペルチェックを無効にする場合は、formタグにspellcheck 属性を記述し、値をfalseに指定します。

<form spellcheck="false">
  /*フォームの実装*/
</form>

動作の確認

下記のHTMLを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form action="example.ashx">
    テキストボックスです。<br />
    <input name="textBox1" type="text" size="80" spellcheck="false" /><br />
    <input name="textBox2" type="text" size="80" spellcheck="false" /><br />
    <input name="textBox3" type="text" size="80" spellcheck="false" /><br />
    テキストエリアです。<br />
    <textarea cols="80" rows="20"></textarea><br />
    <input name="textBox4" type="submit" value="送信" />
  </form>
</body>
</html>

上記のHTMLファイルをスペルチェック機能のあるWebブラウザ(Chromeなど)で表示します。下図の画面が表示されます。

テキストボックスに文字を入力します。スペルミスのある部分に赤の波線が表示されます。

実装例

spellcheck="false" を指定して動作を確認します。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form action="example.ashx" spellcheck="false">
    テキストボックスです。<br />
    <input name="textBox1" type="text" size="80" /><br />
    <input name="textBox2" type="text" size="80" /><br />
    <input name="textBox3" type="text" size="80" /><br />
    テキストエリアです。<br />
    <textarea cols="80" rows="20"></textarea><br />
    <input name="textBox4" type="submit" value="送信" />
  </form>
</body>
</html>