HTML Living Standard/autocapitalize属性

autocapitalize属性

autocapitalize属性は、テキスト入力時の自動大文字化の動作を制御するHTML属性です。モバイル端末やタッチスクリーンデバイスでの入力フィールドにおいて、ユーザーの入力を補助するために使用されます。この属性を使用することで、特定の入力タイプに対して自動的に大文字を挿入する動作を制御できます。

基本構文

<input type="text" autocapitalize="sentences">

• input: 属性を適用するHTML要素。
• sentences: 入力された文の最初の文字を大文字化します。

使用例

入力フィールドの自動大文字化

<input type="text" autocapitalize="words" placeholder="Enter text">

この例では、ユーザーが入力する各単語の最初の文字が自動的に大文字化されます。

動作の概要

• テキストの自動大文字化:
  • 「autocapitalize」属性は、特にモバイルブラウザで入力フィールドを表示した際、ユーザーの入力を補助するために使用されます。属性の値によって、どのように自動的に大文字化を行うかが決まります。
• 値の設定:
  • この属性は、「off」「none」「on」「sentences」「words」「characters」のいずれかの値を取ります。それぞれの値が示す動作は以下の通りです。
    • off: 自動大文字化を無効にします。
    • none: 特に指定しない場合と同じ動作ですが、特定の設定により制御を試みます。
    • on: 入力が自動的に大文字化される設定です。
    • sentences: 文の最初の文字を大文字化します。
    • words: 各単語の最初の文字を大文字化します。
    • characters: すべての文字を大文字化します。

autocapitalize属性の利用シーン

• フォーム入力の補助:
  • ユーザーが名前や住所を入力する際に、最初の文字が自動的に大文字化されるように設定できます。
• モバイルデバイスのユーザビリティ向上:
  • 特にモバイル端末において、ユーザーが入力する際に適切な大文字化を補助することで、入力効率が向上します。
• ユーザーエクスペリエンスの改善:
  • フォームの入力フィールドで適切な自動大文字化を設定することで、ユーザーが必要とする入力をより簡単に行えるようになります。

注意点

• ブラウザのサポート:
  • autocapitalize属性は、主にモバイルブラウザでサポートされています。デスクトップブラウザでは、特に自動大文字化機能が無効の場合が多いため、動作が異なることがあります。
• 一貫性のあるユーザーインターフェース:
  • 自動大文字化を有効にする際は、ユーザーの入力体験を損なわないように配慮する必要があります。過度に自動化された入力補助は逆効果になることがあります。

互換性

互換性

ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献

• MDN Web Docs - autocapitalize
• HTML Living Standard - autocapitalize attribute

関連項目

• input要素
• HTMLフォーム
• ユーザーインターフェース