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

HTMLのform・input要素でオートコンプリート（自動入力）を有効にする方法

HTMLフォームでオートコンプリート（自動補完）機能を有効にするには、autocomplete属性を使用します。この属性は<form>要素や<input>要素に指定でき、ブラウザの自動入力機能をオン・オフできます。

autocompleteがonの場合、ユーザーが以前そのフィールドに入力した値をもとに、ブラウザが自動的に候補を表示します。逆にoffの場合は、過去の入力履歴に基づく候補表示は行われず、ユーザー自身が値を入力する必要があります。

autocomplete属性の値

値説明
onデフォルト値。ユーザーの過去の入力履歴に基づいて、ブラウザが自動的に値を補完します。
off過去の入力履歴に基づく自動補完を行いません。ユーザーが手動で値を入力します。

使用例

以下のコードは、<form>要素にautocomplete="on"を指定してオートコンプリートを有効化する例です。テキスト入力欄に何か値を入力して送信ボタンをクリックし、その後もう一度同じフィールドに入力してみてください。過去に入力した値が候補として表示されれば、オートコンプリートが正しく動作しています。

<!DOCTYPE html>
<html>
<head>
  <title>HTML autocomplete属性の例</title>
</head>
<body>
  <form action="/cgi-bin/hello_get.cgi" method="get" autocomplete="on">
    氏名
    <br>
    <input type="text" name="fname">
    <br>
    <input type="submit" value="送信" />
  </form>
</body>
</html>

ポイント

  • autocomplete属性は<form>要素に指定するとフォーム全体に適用され、個別の<input>要素に指定するとそのフィールドのみに適用されます。
  • クレジットカード番号やパスワードなど、セキュリティ上自動保存を避けたいフィールドではautocomplete="off"を指定するのが一般的です。
  • より細かい制御として、autocomplete="name"やautocomplete="email"のように具体的な情報種別を指定することも可能です。
  1. HTMLのtranslate属性で要素のコンテンツを翻訳するかどうかを指定する方法

    HTMLのtranslate属性とはHTMLのtranslate属性を使用すると、その要素のコンテンツを翻訳するかどうかを指定できます。Google翻訳などの機械翻訳ツールでページを翻訳する際に、ブランド名、固有名詞、コードなど、翻訳してほしくない部分を除外したい場合に特に便利な属性です。translate属性に指定できる値translate属性には、以下の2つの値を指定できます。属性値説明yesコンテンツを翻訳します。noコンテンツを翻訳しません。特定のテキストを翻訳対象から除外する方法特定の単語やフレーズを翻訳されたくない場合は、その要素のtranslate属性に「no」を指定します。&l

  2. HTMLで要素のタイプを設定するには？type属性の使い方を解説

    HTMLでは、type属性を使用することで要素のタイプを設定できます。ここでは、ユーザーからの入力を受け取るための<input>タグについて解説します。type属性は、テキスト入力（text）、チェックボックス（checkbox）、ラジオボタン（radio）など、さまざまなフォーム要素と組み合わせて使用されます。type属性で指定できる主な値text：1行のテキスト入力欄password：入力内容が隠されるパスワード欄checkbox：複数選択可能なチェックボックスradio：択一選択のラジオボタンsubmit：フォーム送信ボタンサンプルコード以下のコードを実行して、type属性の