HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのautocomplete属性の使い方を徹底解説！フォーム入力を便利にする方法

HTMLのautocomplete属性とは？

autocomplete属性は、フォーム要素に対してオートコンプリート（自動補完）機能の有効・無効を設定するために使用されます。

この属性をonに設定すると、ブラウザはユーザーが以前そのフィールドに入力した値を基に、候補を自動的に表示します。一方、offに設定した場合は、過去の入力履歴に基づく候補は表示されず、ユーザーは値を手動で入力する必要があります。

autocomplete属性に指定できる値

番号属性値説明
1onデフォルト値です。ブラウザがユーザーの過去の入力履歴に基づいて、値を自動的に補完します。
2offブラウザは過去の入力履歴に基づいて値を補完しません。ユーザーが自分で値を入力する必要があります。

autocomplete属性の基本的な使い方

autocomplete属性は、<form>要素や<input>要素に対して直接指定できます。フォーム全体に設定すれば、そのフォーム内のすべての入力フィールドに一括で適用されます。

以下のコードを実行して、HTMLでautocomplete属性を使う方法を確認してみましょう。動作を確認するには、まずテキスト入力欄に何か値を入力して「送信」ボタンをクリックします。その後、もう一度コードを実行して同じフィールドに入力すると、入力中に過去の値が候補として表示されるのがわかります。これはautocompleteがonに設定されている場合の動作です。

サンプルコード

autocompleteをoffに設定した場合は、ブラウザは過去の入力に基づいて値を補完しません。

<!DOCTYPE html>
<html>
    <head>
        <title> HTML autocomplete attribute</title>
    </head>
    <body>
        <form action = "" method = "get" autocomplete="on">
            Details:<br><br>
            Student Name<br><input type = "name" name = "sname"><br>
            Training week<br><input type = "week" name = "week"><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

autocomplete属性を使う際のポイント

  • 利便性の向上： onに設定すると、ユーザーは過去の入力を再利用できるため、フォーム入力の手間が大幅に減ります。
  • セキュリティへの配慮： クレジットカード番号やパスワードなど、機密性の高い情報を扱うフィールドでは、offを指定して自動補完を無効にすることが推奨されます。
  • 適切なname属性の指定： ブラウザが正しく補完候補を表示できるよう、name属性には意味のある値（例：email、telなど）を設定しましょう。

このように、autocomplete属性を適切に活用することで、ユーザーにとって使いやすく、かつ安全なフォームを作成することができます。

  1. HTMLのinput要素におけるautocomplete属性の使い方を解説

    autocomplete属性とは<input>要素のautocomplete属性は、入力フィールドのオートコンプリート（自動補完）機能を有効または無効に設定するための属性です。autocompleteが「on」に設定されている場合、ユーザーが以前に入力した値をもとに、Webブラウザが自動的に値を補完してくれます。なお、この自動補完が機能するのは、ユーザーがすでに同じ項目に値を入力したことがある場合のみです。構文<input autocomplete="on|off">上記のように、autocomplete属性には「on」または「off」のいずれかの値

  2. HTML form要素のautocomplete属性の使い方を解説

    form要素のautocomplete属性とは <form>要素のautocomplete属性を使うと、フォームのオートコンプリート(自動入力補完)機能を有効にするか無効にするかを設定できます。autocompleteを「on」に設定すると、ユーザーが以前に入力した値をもとに、Webブラウザが自動的にフォームへ値を入力してくれます。 なお、この自動入力が行われるのは、ユーザーが過去に同じフォームで値を入力したことがある場合のみです。 構文 <form autocomplete="on|off"> 上記の構文では、on | off のいずれかの値を指