“input”要素~“autocomplete”属性

“autocomplete”属性について

“autocomplete”属性は“input”要素で表される入力欄への入力時のブラウザーによるオートコンプリートの可否とオートコンプリートによって表示されるべき入力候補の種類を指定します。

“autocomplete”属性は“type”属性に以下の値が指定されている場合に使用できます。

• “hidden”
• “text”
• “search”
• “url”
• “tel”
• “email”
• “password”
• “date”
• “month”
• “week”
• “time”
• “datetime-local”
• “number”
• “range”
• “color”

“type”属性の値が“hidden”でない場合は“autocomplete”属性はユーザーによる入力が期待される情報の種類を示し、ブラウザは“autocomplete”属性の値を参考にして入力候補を表示します。値が“on”の場合は単純にオートコンプリートをして良いということを示し、どのような入力候補を表示するかは“type”属性の値などからブラウザが判断します。

“autocomplete”属性の値が“off”である場合はオートコンプリートをしないことをブラウザに求めます。ただし、場合によってはこの値はブラウザに無視されます。

“autocomplete”属性を省略した場合は“form”要素の“autocomplete”属性の値を継承します。“form”要素にも“autocomplete”属性を指定しない場合の既定値はオートコンプリートを行う“on”です。

“autocomplete”属性は“type”属性の値が“hidden”である場合は“autocomplete”属性は送信される値が何であるのかを示します。この場合は値に“on”と“off”は指定できません。

指定できる値

“type="hidden"”ではない

属性値	説明
トークン	オートコンプリートで表示されるべき入力候補の種類
on	オートコンプリートを行う
off	オートコンプリートを行わない

“type”属性の値によっては“on”と“off”のみ指定できます。

“type="hidden"”

属性値	説明
トークン	フォームで送信する値の種類

オートコンプリートの詳細な設定

以下の要素では“autocomplete”属性の値に定義されたトークンを指定することでより詳細に入力欄に入力される情報の種類を示すことができます。

• “type="text"”を指定した“input”要素
• “type="search"”を指定した“input”要素
• “type="tel"”を指定した“input”要素
• “type="url"”を指定した“input”要素
• “type="email"”を指定した“input”要素
• “type="password"”を指定した“input”要素
• “type="date"”を指定した“input”要素
• “type="month"”を指定した“input”要素
• “type="number"”を指定した“input”要素
• “select”要素
• “textarea”要素

また、“type”属性の値が“hidden”の場合にもトークンを指定して送信される値が何であるのかを示すことができます。

値には以下のトークンを空白文字で区切って一つずつ順番に記述します。

• 任意で“section-”に続く入力欄のグループ名
• 任意で“shipping”もしくは“billing”
• 入力欄の詳細分類

入力欄のグループ名

“section-”に続くグループ名をつけることで入力欄をグループ化することができます。複数の入力欄の“autocomplete”属性の値に同じグループ名を記述するとそれらの入力欄はグループ化されます。

例えば、複数の人物についての名前や住所、連絡先などの入力欄がある場合にそれぞれをグループ化することができます。

以上の例の場合、ブラウザは一人目の入力欄と二人目の入力欄の入力候補を区別することができます。

このトークンは任意であり、省略できます。

住所・連絡先の種類

入力欄に入力される情報が住所か連絡先である場合はその情報が配送先についての情報であるか請求先についての情報であるかを示すことができます。

以上の例の場合、ブラウザは配送先の入力欄と請求先の入力欄の入力候補を区別することができます。

このトークンは任意であり、省略できます。

入力欄の詳細分類

入力欄に入力される情報の詳細な分類をトークンによって示すことができます。入力される情報が連絡先についての情報である場合はストリングとトークンの組み合わせでより詳細に分類を示すことができます。

入力欄によって使用できるトークンが異なります。入力欄の種類に対応する“input”要素の“type”属性の値は以下の通りです。

“textarea”要素と“select”要素ではすべてのトークンが利用できます。

以上の例の場合、すべて単純なテキスト入力欄(“type="text"”)ですが、ブラウザはより適した入力候補を表示することができます。

定義されているトークンは次の項で示します。

入力される情報が連絡先でない場合のトークン

以下のトークンで入力欄に入力される情報の詳細分類を示すことができます。

入力される情報が連絡先である場合のトークン

連絡先の入力欄である場合はストリングとトークンの組み合わせで入力される連絡先の詳細分類を示すことができます。ストリングを省略してトークンだけを記述することもできます。

以下は入力される連絡先の分類を示すストリングです。

以下は入力される連絡先の分類を示すトークンです。

以下の例では電話番号の入力欄を表しています。

この場合でもブラウザは電話番号の入力欄に適した入力候補を表示することができますが、ストリングと組み合わせることでより明確に入力されるべき情報を示すことができます。

以上の例の場合、ブラウザは自宅の電話番号の入力欄と会社の電話番号の入力欄を区別してより適した入力候補を表示することができます。

サンプルコード

<form method="post" action="sample-inputtag6.php" target="_blank">

<fieldset>

<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="cat-name" autocomplete="section-cat name"></label></p>
<p><label>年齢：<input type="number" name="cat-age" autocomplete="on"></label></p>
<p><label>体色：<input type="text" name="cat-color" autocomplete="on"></label></p>

</fieldset>
<fieldset>

<legend>あなたの情報</legend>
<p><label>名前：<input type="text" name="name" autocomplete="section-you name"></label></p>
<p><label>メールアドレス：<input type="email" name="email" autocomplete="section-you email"></label></p>
<p><label>電話番号：<input type="tel" name="tel" autocomplete="section-you tel-national"></label></p>
<p><label>ウェブサイト：<input type="url" name="website" autocomplete="section-you url"></label></p>
<p><label>使命：<input type="text" name="mission" autocomplete="off"></label></p>

</fieldset>
<p>

<p><button type="submit">送信する</button></p>

</p>

</form>

あなたの猫の情報

名前：

年齢：

体色：

あなたの情報

名前：

メールアドレス：

電話番号：

ウェブサイト：

使命：

送信する

＊送信すると入力内容が表示されます。