テキストボックス（テキストフィールド）

一般的な特徴

テキストボックスは動作や外観が異なりますが、基本的な特徴を共有しています。主な種類は次のとおりです。

• 名前や検索語句など、短い入力に用いる単一行フィールド。
• メッセージ、コメント、文書など、より長い文章に用いる複数行領域。
• プライバシー保護のため文字を隠す、マスク付きフィールドまたはパスワードフィールド。

一般的な属性やプロパティには、プレースホルダーテキスト、最大文字数、既定値、自動フォーカス、読み取り専用または無効の状態、コントロールが受け付ける内容を制限する検証条件などがあります。

実装と用途

ウェブでは、単一行入力には通常、type属性がtextのinput要素が使われ、複数行の内容にはtextareaが使われます。デスクトップおよびモバイルアプリケーションのツールキットにも、これに相当するウィジェットが用意されています。テキストボックスは、フォーム、検索ボックス、ログイン画面、チャットインターフェース、コメント欄、簡易エディターで利用されます。より高度なコンポーネントであるリッチテキストエディターでは、書式設定、埋め込みなどのコントロールが追加されますが、いずれも文字入力用の領域を提供します。

アクセシビリティとセキュリティ

アクセシブルなテキストボックスには、明確なラベル、必要に応じたARIA属性、論理的なタブ順序、スクリーンリーダーへの対応が含まれます。キーボードフォーカスと視認できるフォーカス表示は、使いやすさにとって重要です。セキュリティの観点では、インジェクション攻撃を防ぐため、ユーザー入力をサーバー側で検証し、エスケープする必要があります。クライアント側のチェックは操作性を改善しますが、バックエンドでの検証の代わりにはなりません。

動作、イベント、スタイル設定

テキストボックスは、focus、blur、input、changeなどのイベントを発生させます。アプリケーションはこれらを利用して、入力への応答、入力内容の検証、インターフェースの他部分の更新を行います。視覚的なスタイルはCSSまたはツールキットのテーマで適用され、枠線、背景、プレースホルダーの表示を制御します。レスポンシブでタッチ操作に配慮した設計では、小型の機器に合わせて入力対象や画面上のキーボードの動作を調整します。

区別と注目すべき事項

編集可能な領域がすべて単純なテキストボックスであるとは限りません。textareaは複数行のテキストボックスであり、contenteditable要素やリッチテキストエディターでは書式付きテキストを扱えます。設計者は目的を満たす最も単純なコントロールを選び、明確なラベルと制約を提示し、不必要な収集を最小限に抑え、処理前に入力を検証してユーザーデータを保護するべきです。