Diese Seite wurde von der Cloud Translation API übersetzt.

Plattformübergreifende Browserfunktionen zum Erstellen eines Anmeldeformulars verwenden

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein Anmeldeformular erstellen, das sicher, barrierefrei und benutzerfreundlich ist.

1. Sinnvolles HTML verwenden

Verwenden Sie diese Elemente, die für die Aufgabe entwickelt wurden:

<form>
<section>
<label>
<button>

Wie Sie sehen, ermöglichen diese Elemente integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup mehr Bedeutung.

Klicken Sie auf „Remix to edit“ (Zum Bearbeiten remixen), um das Projekt bearbeitbar zu machen.

Fügen Sie dem <body>-Element den folgenden Code hinzu:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

So sollte Ihre index.html-Datei an dieser Stelle aussehen:

Klicken Sie auf App ansehen, um sich eine Vorschau des Anmeldeformulars anzusehen. Der von Ihnen hinzugefügte HTML-Code ist gültig und korrekt, aber das Standard-Browser-Styling macht ihn unansehnlich und schwer zu verwenden, insbesondere auf Mobilgeräten.
Klicken Sie auf Quelle ansehen, um zu Ihrem Quellcode zurückzukehren.

2. Für Finger und Daumen entwickelt

Passen Sie das Padding, die Ränder und die Schriftgrößen an, damit Ihre Eingaben auf Mobilgeräten gut funktionieren.

Kopieren Sie das folgende CSS und fügen Sie es in die Datei style.css ein:
Klicken Sie auf App ansehen, um das neu gestaltete Anmeldeformular aufzurufen.
Klicken Sie auf Quelle ansehen, um zur style.css-Datei zurückzukehren.

Das ist eine ganze Menge Code. Die wichtigsten Änderungen betreffen die Größen:

padding und margin werden den Eingaben hinzugefügt.
font-size ist für Mobilgeräte und Computer unterschiedlich.

Mit der Auswahl :invalid wird angegeben, wann eine Eingabe einen ungültigen Wert hat. Das funktioniert noch nicht.

Das CSS-Layout ist für Mobilgeräte optimiert:

Das Standard-CSS ist für Darstellungsbereiche mit einer Breite von weniger als 450 Pixeln vorgesehen.
Im Media-Query-Abschnitt werden Überschreibungen für Darstellungsbereiche festgelegt, die mindestens 450 Pixel breit sind.

Wenn Sie ein eigenes Formular wie dieses erstellen, ist es an diesem Punkt des Prozesses sehr wichtig, Ihren Code auf echten Geräten auf dem Computer und auf Mobilgeräten zu testen:

Sind das Label und der Eingabetext gut lesbar, insbesondere für Menschen mit eingeschränktem Sehvermögen?
Sind die Eingabefelder und die Schaltfläche Anmelden groß genug, um als Tippziele für Daumen verwendet zu werden?

3. Eingabeattribute hinzufügen, um integrierte Browserfunktionen zu aktivieren

Ermöglichen Sie dem Browser, Eingabewerte zu speichern und automatisch auszufüllen, und greifen Sie auf integrierte Funktionen zur Passwortverwaltung zu.

Fügen Sie dem Formular-HTML Attribute hinzu, damit es so aussieht:

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

Sehen Sie sich Ihre App noch einmal an und klicken Sie dann auf E-Mail.

Der Fokus wird auf die E‑Mail-Eingabe verschoben. Das liegt daran, dass das Label über das Attribut for="email" mit der Eingabe verknüpft ist. Screenreader lesen den Labeltext auch vor, wenn das Label oder die zugehörige Eingabe den Fokus erhält.
Fokus auf die E‑Mail-Eingabe auf einem Mobilgerät

Die Tastatur ist für die Eingabe einer E-Mail-Adresse optimiert. Beispielsweise werden die Zeichen @ und . möglicherweise auf der primären Tastatur angezeigt und das Betriebssystem zeigt gespeicherte E‑Mail-Adressen über der Tastatur an. Das liegt daran, dass das Attribut type="email" auf ein <input>-Element angewendet wird.
Geben Sie Text in das Passwortfeld ein.

Der Text ist standardmäßig ausgeblendet, da das Attribut type="password" auf das Element angewendet wurde.

Die Attribute autocomplete, name, id und type helfen Browsern, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für die automatische Vervollständigung verwendet werden können.

Konzentrieren Sie sich auf die E‑Mail-Eingabe auf einem Computer und geben Sie etwas Text ein. Die URL Ihrer App wird angezeigt, wenn Sie auf Vollbild klicken. Wenn Sie E-Mail-Adressen in Ihrem Browser gespeichert haben, wird wahrscheinlich ein Dialogfeld angezeigt, in dem Sie eine dieser Adressen auswählen können. Das liegt daran, dass das Attribut autocomplete="username" auf die E-Mail-Eingabe angewendet wurde.

Mit autocomplete="username" und autocomplete="current-password" können Browser gespeicherte Werte verwenden, um die Eingabefelder automatisch auszufüllen.

Hinweis : Verwenden Sie für E‑Mail-Eingaben autocomplete="username", da username von Passwortmanagern in modernen Browsern erkannt wird, obwohl Sie type="email" verwenden sollten. Möglicherweise möchten Sie auch id="email" und name="email" verwenden.

Verschiedene Browser verwenden unterschiedliche Verfahren, um die Rolle von Formulareingaben zu ermitteln und die Autofill-Funktion für eine Reihe verschiedener Websites bereitzustellen.

Fügen Sie Attribute hinzu und entfernen Sie sie, um es selbst auszuprobieren.

Es ist äußerst wichtig, das Verhalten plattformübergreifend zu testen. Sie sollten Werte eingeben und das Formular in verschiedenen Browsern auf verschiedenen Geräten senden. Mit BrowserStack können Sie ganz einfach auf einer Vielzahl von Plattformen testen. Das Tool ist für Open-Source-Projekte kostenlos. Testen!

So sollte Ihre index.html-Datei an dieser Stelle aussehen:

4. Benutzeroberfläche zum Ein- und Ausblenden von Passwörtern hinzufügen

Usability-Experten empfehlen dringend, ein Symbol oder eine Schaltfläche hinzuzufügen, mit der Nutzer den Text sehen können, den sie im Feld Passwort eingeben. Es gibt keine integrierte Möglichkeit, dies zu tun. Sie müssen es also selbst mit JavaScript implementieren.

Der Code zum Hinzufügen dieser Funktion ist einfach. In diesem Beispiel wird Text und kein Symbol verwendet.

Aktualisieren Sie die Dateien index.html, style.css und script.js so:

Fügen Sie dem Passwortabschnitt in der Datei index.html einen Ein/Aus-Schalter hinzu:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Fügen Sie der Datei style.css das folgende CSS hinzu:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

Dadurch sieht die Schaltfläche Passwort anzeigen wie normaler Text aus und wird oben rechts im Passwortbereich angezeigt.

Fügen Sie der Datei script.js das folgende JavaScript hinzu, um die Passwortanzeige umzuschalten und den entsprechenden aria-label festzulegen:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Probieren Sie die Logik zum Anzeigen von Passwörtern jetzt aus.
1. Sehen Sie sich Ihre App an.
2. Geben Sie Text in das Passwortfeld ein.
3. Klicken Sie auf Passwort anzeigen.
Wiederholen Sie den vierten Schritt in mehreren Browsern auf verschiedenen Betriebssystemen.

Denken Sie an das UX-Design: Werden Nutzer die Option Passwort anzeigen bemerken und verstehen? Gibt es eine bessere Möglichkeit, diese Funktion bereitzustellen? Das ist ein guter Zeitpunkt, um Usability-Tests für Rabatte mit einer kleinen Gruppe von Freunden oder Kollegen durchzuführen.

Wenn Sie wissen möchten, wie diese Funktion für Screenreader funktioniert, installieren Sie die ChromeVox Classic-Erweiterung und navigieren Sie durch das Formular. Funktionieren die aria-label-Werte wie vorgesehen?

Auf einigen Websites, z. B. Gmail, wird die Passwortanzeige nicht über Text, sondern über Symbole aktiviert bzw. deaktiviert. Wenn Sie dieses Codelab abgeschlossen haben, implementieren Sie es mit SVG-Bildern. Material Design bietet hochwertige Symbole, die Sie kostenlos herunterladen können.

So sollte Ihr Code jetzt aussehen:

5. Formularvalidierung hinzufügen

Sie können Nutzern helfen, ihre Daten richtig einzugeben, indem Sie ihnen ermöglichen, ihre Daten vor dem Absenden des Formulars zu validieren und ihnen zeigen, was sie ändern müssen.

HTML-Formularelemente und ‑attribute haben integrierte Funktionen für die grundlegende Validierung. Sie sollten aber auch JavaScript verwenden, um eine robustere Validierung durchzuführen, während Nutzer Daten eingeben und wenn sie versuchen, das Formular zu senden.

In diesem Schritt wird die Constraint Validation API verwendet, die weitgehend unterstützt wird, um benutzerdefinierte Validierung mit integrierter Browser-UI hinzuzufügen, die den Fokus festlegt und Aufforderungen anzeigt.

Informieren Sie Nutzer über die Einschränkungen für Passwörter und andere Eingaben. Lassen Sie sie nicht raten.

Aktualisieren Sie den Passwortabschnitt der Datei index.html:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Dadurch werden zwei neue Funktionen hinzugefügt:

Informationen zu Passwortanforderungen
Ein aria-describedby-Attribut für die Passworteingabe. Screenreader lesen den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung vor.

Fügen Sie der Datei style.css das folgende CSS hinzu:

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

Fügen Sie der Datei script.js das folgende JavaScript hinzu:

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

Testen!

Alle aktuellen Browser haben integrierte Funktionen zur Formularvalidierung und unterstützen die Validierung mit JavaScript.
1. Geben Sie eine ungültige E‑Mail-Adresse ein und klicken Sie auf Anmelden. Der Browser zeigt eine Warnung an – JavaScript ist nicht erforderlich.
2. Geben Sie eine gültige E-Mail-Adresse ein, klicken Sie dann aber ohne Passwortwert auf Anmelden. Der Browser warnt Sie, dass ein erforderlicher Wert fehlt, und setzt den Fokus auf die Passworteingabe.
3. Geben Sie ein ungültiges Passwort ein und klicken Sie auf Anmelden. Je nach Fehlerursache werden nun unterschiedliche Meldungen angezeigt.
Probieren Sie verschiedene Möglichkeiten aus, um Nutzern bei der Eingabe von E-Mail-Adressen und Passwörtern zu helfen. Bessere Passwortformularfelder bietet einige clevere Vorschläge.

So sollte Ihr Code jetzt aussehen:

Weitere Informationen

Sie werden in diesem Codelab nicht gezeigt, aber Sie benötigen diese vier wichtigen Funktionen für das Anmeldeformular:

Fügen Sie Passwort vergessen? hinzu, eine Schaltfläche, mit der Nutzer ihre Passwörter ganz einfach zurücksetzen können.
Verlinken Sie Ihre Nutzungsbedingungen und Datenschutzerklärung, damit Ihre Nutzer wissen, wie Sie ihre Daten schützen.
Achten Sie auf Stil und Branding und darauf, dass diese zusätzlichen Funktionen zum Rest Ihrer Website passen.
Fügen Sie Analytics und RUM hinzu, damit Sie die Leistung und Benutzerfreundlichkeit Ihres Formulardesigns testen und überwachen können.

Plattformübergreifende Browserfunktionen zum Erstellen eines Anmeldeformulars verwenden Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Sinnvolles HTML verwenden

2. Für Finger und Daumen entwickelt

3. Eingabeattribute hinzufügen, um integrierte Browserfunktionen zu aktivieren

4. Benutzeroberfläche zum Ein- und Ausblenden von Passwörtern hinzufügen

5. Formularvalidierung hinzufügen

Weitere Informationen

Plattformübergreifende Browserfunktionen zum Erstellen eines Anmeldeformulars verwenden