【HTML Living Standard】autocorrect属性の使い方
autocorrect属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
autocorrectプロパティは、HTML要素のテキスト入力フィールドにおいて、OSやブラウザが提供する自動修正機能の状態（有効/無効）を保持するプロパティです。これはHTMLのグローバル属性の一つとして機能し、主にスマートフォンやタブレットなどのモバイルデバイスでのテキスト入力時に、予測変換、スペルチェック、自動修正といった機能を制御するために利用されます。
具体的には、このプロパティにonまたはtrueを設定すると自動修正が有効になり、offまたはfalseを設定すると無効になります。デフォルトの動作はブラウザやOSの設定に依存するため、特定の入力フォームで自動修正を確実に制御したい場合には、このプロパティを明示的に設定することが推奨されます。
例えば、プログラミングコード、ユーザー名、検索クエリ、専門用語、固有名詞など、システムが意図せず修正してしまうと問題となるような情報では、autocorrect="off"を設定することで、ユーザーが入力した内容が勝手に変更されるのを防ぐことができます。これにより、入力された情報が正確に保持され、ユーザーは意図しない修正によって再入力を求められる手間を省くことができます。
この属性はすべてのHTML要素に適用可能ですが、<input>要素のtypeがtext、search、url、tel、email、passwordである場合や、<textarea>要素、[contenteditable]属性が設定された要素において特にその効果を明確に確認できます。正確で意図通りのユーザー入力を促すために、このプロパティの適切な活用が重要です。
構文(syntax)
1<input type="text" autocorrect="off">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLで自動修正を無効にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Autocorrect Off のサンプル</title> 7 <style> 8 /* 入力フィールドをわかりやすくするための基本的なスタイル */ 9 body { font-family: sans-serif; margin: 20px; } 10 label { display: block; margin-bottom: 5px; font-weight: bold; } 11 input, textarea { 12 width: 100%; 13 max-width: 400px; 14 padding: 10px; 15 margin-bottom: 20px; 16 border: 1px solid #ccc; 17 border-radius: 4px; 18 box-sizing: border-box; 19 } 20 </style> 21</head> 22<body> 23 <!-- input要素にautocorrect="off"を設定する例 --> 24 <label for="textInput">自動修正が無効な入力フィールド:</label> 25 <input type="text" id="textInput" name="textInput" autocorrect="off" placeholder="ここに文字を入力してください"> 26 <!-- ↑ autocorrect="off" を設定することで、OSやブラウザによる単語の自動修正が無効になります。 --> 27 28 <!-- textarea要素にautocorrect="off"を設定する例 --> 29 <label for="textArea">自動修正が無効なテキストエリア:</label> 30 <textarea id="textArea" name="textArea" rows="5" autocorrect="off" placeholder="ここに文章を入力してください"></textarea> 31 <!-- ↑ autocorrect="off" を設定することで、このテキストエリアでも自動修正が無効になります。 --> 32</body> 33</html>
autocorrectは、HTMLのグローバル属性の一つで、主にテキスト入力要素において、オペレーティングシステム（OS）やブラウザが提供する自動修正機能の動作を制御するために使用されます。この属性自体は特定の引数を取らず、戻り値もありません。属性の値として設定を直接指定します。
サンプルコードでは、<input type="text">要素と<textarea>要素の両方にautocorrect="off"と設定している例が示されています。これは、これらの入力フィールドでOSやブラウザによる単語の自動修正機能を無効にする指示です。一般的に、スマートフォンやタブレットで文字を入力する際には、スペルミスを自動的に修正したり、予測変換を表示したりする機能が働きますが、autocorrect="off"を設定することで、その機能が停止します。
この機能は、ユーザーが正確なコードスニペット、特定の専門用語、固有名詞、あるいは意図的な誤字などを入力する際に、自動修正によって内容が変更されてしまうのを防ぎたい場合に特に役立ちます。autocorrect="off"を指定することで、ユーザーが入力した文字がそのまま保持され、意図しない修正が行われることを回避できます。これにより、開発者は特定の入力フォームにおいて、より厳密な入力制御とユーザー体験の提供が可能となります。
autocorrect="off"属性は、入力フィールドでのOSやブラウザによる単語の自動修正機能を無効にするグローバル属性です。主にモバイルデバイスでの入力時、意図しない修正を防ぎたい場合に利用します。パスワードやプログラミングコード、固有名詞など、正確な文字列の入力を求める際に特に役立ちます。
利用する際の注意点として、一般的な文章入力においては、自動修正がユーザーの利便性を高める場合も多いため、むやみに無効化するとかえって入力の手間を増やす可能性があります。そのため、この属性はユーザー体験を考慮し、本当に自動修正が不要な特定の入力欄に限定して使用することが重要です。また、この属性はスペルチェック機能（spellcheck属性）とは異なり、自動修正のみを制御する点にご留意ください。ブラウザやOSのバージョンによっては挙動が異なる場合があることも補足いたします。
HTML autocorrect属性で自動修正を無効にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Autocorrect Attribute Example</title> 7</head> 8<body> 9 <h1>自動修正機能の制御</h1> 10 11 <p>この入力フィールドでは、デバイスの自動修正機能が無効になります。</p> 12 <!-- autocorrect="off" を指定することで、入力時の自動修正機能を無効にします。 --> 13 <!-- これは、正確な入力が求められる場合（例: コード、ユーザー名など）に有用です。 --> 14 <input type="text" autocorrect="off" placeholder="自動修正無効の入力フィールド"> 15 16 <p>通常、スマートフォンやタブレットで文字を入力する際に自動修正が働きますが、上記フィールドではそれが抑制されます。</p> 17</body> 18</html>
HTMLのautocorrect属性は、ユーザーがテキストを入力する際に、デバイスが提供する自動修正機能（オートコレクト）を制御するためのグローバル属性です。この属性は、すべてのHTML要素に指定できる共通の属性の一つですが、特に<input>要素や<textarea>要素といった入力フィールドでその機能が効果を発揮します。
サンプルコードでは、<input type="text" autocorrect="off" placeholder="自動修正無効の入力フィールド">と記述されています。ここでautocorrect="off"と指定することにより、この入力フィールドに入力する際、スマートフォンやタブレットなどのデバイスが搭載している文字の自動修正機能が一時的に無効になります。この機能は、通常、入力ミスを自動的に修正してくれる便利なものですが、ユーザー名やパスワード、プログラムコード、特定のIDなど、正確な文字列をそのまま入力する必要がある場合には、自動修正が意図しない変更を引き起こすことがあります。そのような状況でautocorrect="off"を設定することで、ユーザーは誤った修正を気にすることなく、正確な文字列を直接入力できるようになります。
このautocorrect属性自体は、特定の引数を必要とせず、またプログラム的な値を返す「戻り値」もありません。属性の値を"on"または"off"に設定することで、単に自動修正機能の有効・無効を切り替えるシンプルな挙動を提供します。システムエンジニアを目指す上で、ユーザーが快適に情報を入力できるインターフェースを設計するために、このような細かな入力制御の知識は非常に役立ちます。
autocorrect属性は、主にスマートフォンなどのモバイルデバイスの仮想キーボードにおける自動修正機能を制御するものです。この属性は、すべてのブラウザやデバイスで完全に同じように動作するわけではない点に注意が必要です。特にデスクトップ環境のブラウザでは効果が見られないことがほとんどです。autocorrect="off"を設定すると、入力時の誤字脱字にユーザーが気づきにくくなる可能性があるため、ユーザー名やパスワード、プログラミングコード入力など、正確な文字列が厳密に求められる場合に限定して使用することが重要です。通常のテキスト入力フィールドでは、ユーザーの利便性を損なわないよう、安易に自動修正機能を無効にしないようにしましょう。また、スペルチェック機能を制御するspellcheck属性とは異なる機能ですので、混同しないようにしてください。