Mit plattformübergreifenden Browserfunktionen ein Anmeldeformular erstellen

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, barrierefreies und nutzerfreundliches Anmeldeformular erstellen.

1. Aussagekräftigen HTML-Code verwenden

Verwenden Sie diese Elemente, die für den Job erstellt wurden:

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

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

  1. Klicke auf „Remix to edit“ (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.

  2. 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>

    Ihre index.html-Datei sollte jetzt so aussehen:

  3. Klicken Sie auf App ansehen, um eine Vorschau des Anmeldeformulars aufzurufen. Das von Ihnen hinzugefügte HTML ist gültig und korrekt, aber das Standard-Browser-Styling lässt es besonders auf Mobilgeräten hässlich und schwer zu bedienen erscheinen.

  4. Klicken Sie auf Quelltext anzeigen, um zum Quellcode zurückzukehren.

2. Bedienelemente für Finger und Daumen berücksichtigen

Passen Sie Ränder, Abstände und Schriftgrößen an, damit die Eingaben auch auf Mobilgeräten gut funktionieren.

  1. Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in die Datei style.css ein:

  2. Klicken Sie auf App ansehen, um das neue Anmeldeformular aufzurufen.

  3. Klicken Sie auf Quellcode ansehen, um zur style.css-Datei zurückzukehren.

Das ist ziemlich viel Code! Die wichtigsten Änderungen betreffen die Größen:

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

Mit der Auswahl :invalid wird angegeben, dass 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 Bereich „Media Query“ werden Überschreibungen für Darstellungsbereiche festgelegt, die mindestens 450 Pixel breit sind.

Wenn Sie ein eigenes Formular wie dieses erstellen, ist es an dieser Stelle sehr wichtig, Ihren Code auf echten Computern und Mobilgeräten zu testen:

  • Sind Beschriftungen und Eingabetext gut lesbar, insbesondere für Menschen mit eingeschränktem Sehvermögen?
  • Sind die Eingaben und die Schaltfläche Anmelden groß genug, um sie als Berührungszielbereiche für Daumen zu verwenden?

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

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

  1. Fügen Sie dem HTML-Code des Formulars Attribute hinzu, sodass 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>

  2. Rufen Sie Ihre App noch einmal auf und klicken Sie dann auf E-Mail.

    Beachten Sie, wie der Fokus auf die E-Mail-Eingabe bewegt wird. Das liegt daran, dass das Label über das for="email"-Attribut mit der Eingabe verknüpft ist. Screenreader sprechen auch den Labeltext an, wenn der Fokus auf das Label oder das zugehörige Eingabeelement gelegt wird.

  3. E-Mail-Eingabe auf einem Mobilgerät in den Fokus rücken

    Die Tastatur ist für die Eingabe einer E-Mail-Adresse optimiert. So werden beispielsweise die Zeichen @ und . möglicherweise auf der Haupttastatur angezeigt und das Betriebssystem zeigt gespeicherte E-Mails über der Tastatur an. Das liegt daran, dass das type="email"-Attribut auf ein <input>-Element angewendet wird.

    Die Standardtastatur für E-Mails auf iOS-Geräten.

  4. Geben Sie Text in das Passwortfeld ein.

    Der Text ist standardmäßig ausgeblendet, weil das type="password"-Attribut 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 das automatische Ausfüllen verwendet werden können.
  1. Legen Sie auf einem Computer den Fokus auf die E-Mail-Eingabe und geben Sie Text ein. Die URL Ihrer App wird angezeigt, wenn Sie auf Vollbild Vollbildsymbol klicken. Wenn Sie E-Mail-Adressen in Ihrem Browser gespeichert haben, wird wahrscheinlich ein Dialogfeld angezeigt, in dem Sie eine Auswahl aus diesen gespeicherten E-Mails treffen können. Dies liegt daran, dass das Attribut autocomplete="username" auf die E-Mail-Eingabe angewendet wurde.
  • autocomplete="username" und autocomplete="current-password" helfen Browsern dabei, gespeicherte Werte zum automatischen Ausfüllen der Eingaben zu verwenden.

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

Fügen Sie Attribute hinzu und entfernen Sie sie, um das selbst zu testen.

Es ist extrem 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. Der Dienst ist für Open-Source-Projekte kostenlos. Testen!

Die Datei index.html sollte nun so aussehen:

4. Benutzeroberfläche zum Ein- und Ausblenden des Passworts hinzufügen

Usability-Experten empfehlen dringend, ein Symbol oder eine Schaltfläche hinzuzufügen, damit Nutzer den Text sehen können, den sie in das Feld Passwort eingegeben haben. Dazu gibt es keine integrierte Möglichkeit. 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 wie folgt.

  1. Fügen Sie im Passwortbereich in der Datei index.html eine Ein/Aus-Schaltfläche 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>

  2. Fügen Sie am Ende der Datei style.css den folgenden CSS-Code 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 Nur-Text aus und wird oben rechts im Passwortbereich angezeigt.

  3. Fügen Sie der Datei script.js das folgende JavaScript hinzu, um die Passwortanzeige zu aktivieren 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.');
  }
}

  4. Testen Sie jetzt die Logik zum Anzeigen von Passwörtern.

    1. Rufen Sie Ihre App auf.

    2. Geben Sie einen Text in das Passwortfeld ein.

    3. Klicken Sie auf Passwort anzeigen.

  5. Wiederholen Sie den vierten Schritt in mehreren Browsern unter verschiedenen Betriebssystemen.

Denken Sie an 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 Discount-Usability-Tests 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 gehen Sie durch das Formular. Funktionieren die aria-label-Werte wie vorgesehen?

Auf einigen Websites, z. B. Gmail, werden Symbole anstelle von Text verwendet, um die Passwortanzeige zu aktivieren oder zu deaktivieren. Implementieren Sie es anschließend mit SVG-Bildern. Material Design bietet hochwertige Symbole, die Sie kostenlos herunterladen können.

Ihr Code sollte jetzt so aussehen:

5. Formularvalidierung hinzufügen

Sie können Nutzern helfen, ihre Daten korrekt einzugeben, wenn Sie ihnen erlauben, ihre Daten vor dem Senden des Formulars zu validieren und ihnen zu zeigen, was sie ändern müssen.

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

In diesem Schritt wird die allgemein unterstützte Constraint Validation API verwendet, um eine benutzerdefinierte Validierung mit integrierter Browser-Benutzeroberfläche hinzuzufügen, die den Fokus festlegt und Aufforderungen anzeigt.

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

  1. Aktualisieren Sie den Abschnitt „Passwort“ in 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 stehen zwei neue Funktionen zur Verfügung:

  • Informationen zu Passwortbeschränkungen
  • Ein aria-describedby-Attribut für die Passworteingabe (Bildschirmlesegeräte lesen den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung.)

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

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

  2. Fügen Sie der Datei script.js den folgenden JavaScript-Code 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';
  }
}

  3. Testen!

    Alle aktuellen Browser verfügen über 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 – kein JavaScript erforderlich!

    2. Geben Sie eine gültige E-Mail-Adresse ein, klicken Sie aber ohne Passwortwert auf Anmelden. Der Browser warnt Sie, dass ein erforderlicher Wert fehlt, und legt den Fokus auf die Passworteingabe.

    3. Geben Sie ein ungültiges Passwort ein und klicken Sie auf Anmelden. Je nach Fehler werden jetzt unterschiedliche Meldungen angezeigt.

  4. Bieten Sie Nutzern verschiedene Möglichkeiten, E-Mail-Adressen und Passwörter einzugeben. Better password form fields (Bessere Passwortformularfelder) bietet einige clevere Vorschläge.

    Ihr Code sollte jetzt so aussehen:

Mehr erfahren

Sie werden in diesem Codelab nicht aufgeführt, aber Sie benötigen die folgenden vier wichtigen Funktionen für das Anmeldeformular:

  • Fügen Sie die Schaltfläche Passwort vergessen? hinzu, mit der Nutzer ihr Passwort ganz einfach zurücksetzen können.

  • Verlinken Sie Ihre Nutzungsbedingungen und Ihre Datenschutzerklärung, damit Ihre Nutzer wissen, wie Sie ihre Daten schützen.

  • Achten Sie auf Stil und Branding und achten Sie darauf, dass diese zusätzlichen Funktionen zum Rest Ihrer Website passen.

  • Fügen Sie Analysen und RUM hinzu, damit Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns testen und beobachten können.