autocapitalize=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

autocapitalize属性は、入力文字の自動的な大文字化を指定します。

  • これはソフトウェアキーボード向けの機能です。物理キーボードによる入力には影響しません。

<input type="text" autocapitalize="sentences">
属性 値
グローバル属性
autocapitalize="" 自動的な大文字化 off 自動的な大文字化を行わない（全ての文字を小文字にする）
none
on 各文の最初の文字を大文字にする（それ以外の文字は小文字にする）
sentences
words 各単語の最初の文字を大文字にする（それ以外の文字は小文字にする）
characters 全ての文字を大文字にする
  • この属性を指定しない場合は、ブラウザのデフォルトの設定に従います。

autocapitalize属性の指定について

autocapitalize属性は、主にフォームのテキスト入力欄で使用します。（ただし、日本語入力の場合は大文字小文字の区別がないため指定は無意味です）

フォームの部品単位で指定したい場合は次のように記述します。

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

次のようにform要素に対して指定した場合は、そのform要素に関連付けられた自動大文字化継承要素のデフォルトの動作を制御できます。

<form method="post" action="example.cgi" autocapitalize="sentences">

<p>Name : <input type="text" name="name"></p>
<p>Message : <textarea name="message"></textarea></p>

</form>

上記の場合、2つの入力欄（input要素とtextarea要素）に autocapitalize="sentences" の指定が適用されます。

  • ただし、type属性の値が password、url、email のinput要素では、自動大文字化が有効になることはありません。

他に、contenteditable属性が指定された要素にも、autocapitalize属性の指定を有効にすることができます。

<div contenteditable="true" autocapitalize="sentences">
テキストの編集が可能な要素
</div>

指定できる要素

autocapitalize属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML LS：autocapitalize属性が定義されました。

使用例

https://www.tagindex.com/html/attribute/autocapitalize.html スマートフォンなどで確認する場合はこのQRコードを読み取ってください。
  • 以下の使用例は、ソフトウェアキーボードでのみ有効です。物理キーボードによる入力では効果がありません。
フォームの入力欄に指定した例

<p>デフォルト（無指定）<br>
<input type="text"></p>

<p>noneを指定（全てを小文字）<br>
<input type="text" autocapitalize="none"></p>

<p>sentencesを指定（文の最初を大文字）<br>
<input type="text" autocapitalize="sentences"></p>

<p>wordsを指定（単語の最初を大文字）<br>
<input type="text" autocapitalize="words"></p>

<p>charactersを指定（全てを大文字）<br>
<input type="text" autocapitalize="characters"></p>
表示例

デフォルト（無指定）

noneを指定（全てを小文字）

sentencesを指定（文の最初を大文字）

wordsを指定（単語の最初を大文字）

charactersを指定（全てを大文字）

form要素に指定した例

<p>単語の最初の文字を大文字にする</p>

<form autocapitalize="words">

<p>Name :<br>
<input type="text"></p>

<p>URL :<br>
<input type="url"></p>

<p>Message :<br>
<textarea cols="30" rows="5"></textarea></p>

</form>
表示例

単語の最初の文字を大文字にする

Name :

URL :

Message :

  • URLの入力欄では有効になりません。
contenteditable属性が指定さたれ要素に適用した例

<p>単語の最初の文字を大文字にする</p>

<div contenteditable="true" autocapitalize="words">
Editable elements of text.
</div>
表示例

単語の最初の文字を大文字にする

Editable elements of text.