HTML/XHTML: AutoComplete für Formularfelder

SELFHTML aktuell Artikel HTML
	HTML: AutoComplete für Formularfelder
	Georg Freund Hinweise zum Thema Beispiel mit Erläuterungen Weiterführende Links

Georg Freund

Homepage-URL:	http://georg-freund.de

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

Hinweise zum Thema

AutoComplete ermöglicht das automatische Vervollständigen von Eingabefeldern in Formularen sowohl im Internet Explorer ab Version 5, als auch in Firefox (Mozilla ab 0.9 bzw. Netscape ab 7).

Gibt ein Benutzer seinen Benutzernamen und ein Passwort ein, bieten einige Browser die Funktion, beide Feldinhalte zu speichern. Grundsätzlich steht es dem Benutzer frei, das Speichern anzunehmen oder abzulehnen. Allerdings gibt es Situationen, in denen es sinnvoll sein kann, diese Freiheiten zu beschneiden und AutoComplete bereits von Seiten des Autors zu unterbinden. Dazu wurde in einigen Browsern die Unterstützung des nicht standardisierten Attributs autocomplete implementiert. AutoComplete kann verhindern, dass Daten gespeichert und bei der nächsten Verwendung automatisch vervollständigt werden.

Beispiel mit Erläuterungen

Anzeigebeispiel: So sieht's aus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Beispiel: AutoComplete</title>
</head>
<body>
 <h1><code>autocomplete</code> in Formularen</h1>
  <h2>1. Kein <code>autocomplete</code>:</h2>
    <form action="" name="form1" id="form1">
      User1:
      <input type="text" name="user1" id="user1" />
      <br />Pass1:
      <input type="password" name="pass1" id="pass1" />
      <br />
      <input type="submit" name="Submit" value="Submit" />
    </form>
  <hr />
  <h2>2. <code>autocomplete="off"</code> in <code><form></code>:</h2>
    <form action="" name="form2" id="form2" autocomplete="off">
      User2:
      <input type="text" name="user2" id="user2" />
      <br />Pass2:
      <input type="password" name="pass2" id="pass2" />
      <br />
      <input type="submit" name="Submit" value="Submit" />
    </form>
  <hr />
  <h2>3. <code>autocomplete="off"</code> in <code><input></code></h2>
    <form action="" name="form3" id="form3">
      User3:
      <input type="text" name="user3" id="user3" />
      <br />Pass3:
      <input type="password" name="pass3" id="pass3" autocomplete="off"/>
      <br />
      <input type="submit" name="Submit" value="Submit" />
    </form>
</body>

Erläuterung:

AutoComplete wird durch Hinzufügung des Attributs autocomplete mit dem Wert „off“ in Formular-Elementen deaktiviert. Sie können es sowohl in einem Form-Tag <form name="form" action="" autocomplete="off"></form> als auch direkt in einem Input-Tag <input name="pass" type="password" autocomplete="off" /> notieren.

Wird autocomplete="off" in einem input-Element verwendet, so wird lediglich verhindert, dass die jeweilige Eingabe in diesem Feld gespeichert wird. Dies hat zur Folge, dass beim Internet Explorer weiterhin zuvor getätigte Eingaben in input-Elementen mit gleichem name-Attribut und ohne autocomplete="off" aus einem Dropdownfeld gewählt werden können.

Wird AutoComplete dagegen im übergeordneten <form>-Tag verwendet, so wird kein einziges Element in diesem Formular gespeichert. Im Internet Explorer hat dies zur Folge, dass man alle Felder des Formulars jedes Mal komplett neu ausfüllen muss. Bei Firefox ist hier kein Unterschied zur Verwendung im <input>-Tag zu erkennen, eine Angabe reicht, um die Speicherung im gesamten Formular zu unterbinden. Opera 7 ignoriert das Attribut autocomplete grundsätzlich und aktiviert den Passwort-Manager.

Ein Kriterium der Sicherheit ist, dass in keinem dieser Browser mit „Passwort-Speicher-Funktionalität“ das Passwort-Feld automatisch ohne Zutun des Benutzers ausgefüllt wird, sondern lediglich der Passwort-Manager (so vorhanden) in Aktion tritt.

Gehen Sie die Beispiele nacheinander durch: Geben Sie bei jedem Beispiel „User“ und „Pass“ an und bestätigen Sie diese durch Betätigung des Buttons. Überprüfen Sie danach das Eingebeverhalten der Felder und gehen zum nächsten Beispiel weiter. Achtung: Benutzen Sie in jedem Beispiel bitte einen neuen User, wählen Sie „User1/Pass1“, „User2/Pass2“ und „User3/Pass3“.

Beachten Sie:

Um die volle Funktionsweise von AutoComplete zu demonstrieren, wählen Sie im letzten Beispiel (3) den User aus dem ersten Beispiel (1) und Sie werden sehen, dass im Internet Explorer das Passwort von „User1“ automatisch eingetragen wird, obwohl das input-Element des Typs password mit dem Attribut autocomplete="off" versehen wurde. Die Unterbindung der Passwortspeicherung greift nur bei Eingabe eines Usernamens, dessen Passwort zuvor noch nicht gespeichert wurde.

Achten Sie also unbedingt darauf, autocomplete="off" in allen input-Elementen oder bereits im form-Element zu notieren, wenn sie in jedem Fall verhindern wollen, dass ein Passwort automatisch eingetragen wird.

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

MSDN über AutoComplete
Netscape Devedge über AutoComplete
Opera WAND