Mit plattformübergreifenden Browserfunktionen ein Anmeldeformular erstellen

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, zugängliches und nutzerfreundliches Anmeldeformular erstellen.

1. Aussagekräftigen HTML-Code verwenden

Verwenden Sie die folgenden 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. Klicken Sie zum Bearbeiten auf „Remix“, damit das Projekt bearbeitet werden kann.

  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>

    Die Datei index.html sollte nun so aussehen:

  3. Klicken Sie auf App ansehen, um eine Vorschau Ihres Anmeldeformulars anzuzeigen. Der HTML-Code, den Sie hinzugefügt haben, ist gültig und korrekt, aber aufgrund des standardmäßigen Browserstils sieht er furchtbar aus und ist schwer zu verwenden, insbesondere auf Mobilgeräten.

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

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

Passe die Abstände, Ränder und Schriftgrößen an, damit deine Eingaben 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 Quelltext anzeigen, um zur Datei style.css zurückzukehren.

Das ist ziemlich viel Code! Zu beachten sind vor allem die Änderungen an den 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, wenn eine Eingabe einen ungültigen Wert hat. Das funktioniert noch nicht.

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

  • Der Standard-CSS-Code wird für Darstellungsbereiche mit einer Breite von weniger als 450 Pixel verwendet.
  • Im Bereich „Medienabfrage“ werden Überschreibungen für Darstellungsbereiche mit einer Breite von mindestens 450 Pixeln festgelegt.

Wenn Sie Ihr eigenes Formular wie dieses erstellen, ist es an dieser Stelle sehr wichtig, dass Sie den Code auf echten Geräten auf Computern und Mobilgeräten 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

Aktivieren Sie den Browser so, dass Eingabewerte gespeichert und automatisch ausgefüllt werden, und gewähren Sie Zugriff auf integrierte Funktionen zur Passwortverwaltung.

  1. Fügen Sie dem HTML-Code Ihres Formulars Attribute hinzu, die wie folgt aussehen:

    <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 auf E-Mail.

    Beachten Sie, wie der Fokus auf die E-Mail-Eingabe bewegt wird. Das liegt daran, dass das Label der Eingabe über das Attribut for="email" zugeordnet wird. Screenreader vorlesen auch den Labeltext, wenn das Label oder die zugehörige Eingabe des Labels hervorgehoben wird.

  3. Stellen Sie den Fokus auf die E-Mail-Eingabe auf einem Mobilgerät.

    Beachten Sie, wie die Tastatur für die Eingabe von E-Mail-Adressen optimiert ist. So können beispielsweise die Zeichen @ und . auf der Haupttastatur angezeigt werden und das Betriebssystem zeigt gespeicherte E-Mails über der Tastatur an. All das passiert, weil das Attribut type="email" auf ein <input>-Element angewendet wird.

    Die Standardtastatur für E-Mails unter iOS.

  4. Geben Sie Text in das Eingabefeld ein.

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

  • Die Attribute autocomplete, name, id und type helfen Browsern dabei, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für das automatische Ausfüllen verwendet werden können.
  1. Stellen Sie den Fokus auf die E-Mail-Eingabe auf einem Desktop-Gerät und geben Sie Text ein. Sie können die URL Ihrer App sehen, wenn Sie auf Vollbild Das Vollbildsymbol klicken. Wenn Sie E-Mail-Adressen in Ihrem Browser gespeichert haben, wird wahrscheinlich ein Dialogfeld angezeigt, in dem Sie eine der gespeicherten E-Mails auswählen 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 Techniken, um die Rolle von Formulareingaben zu ermitteln und Autofill für eine Reihe unterschiedlicher Websites bereitzustellen.

Sie können dies selbst ausprobieren, indem Sie Attribute hinzufügen oder entfernen.

Es ist sehr wichtig, das Verhalten plattformübergreifend zu testen. Sie sollten Werte eingeben und das Formular in verschiedenen Browsern auf verschiedenen Geräten senden. Mit BrowserStack, der für Open-Source-Projekte kostenlos ist, können Sie problemlos auf verschiedenen Plattformen testen. Jetzt testen

Die Datei index.html sollte nun so aussehen:

4. UI hinzufügen, um Passwortanzeige ein-/auszuschalten

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 die Funktion also selbst mit JavaScript implementieren.

Der Code zum Hinzufügen dieser Funktion ist ganz einfach. In diesem Beispiel wird kein Symbol, sondern Text 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 Show password (Passwort anzeigen) aus wie Nur-Text und wird oben rechts im Passwortbereich angezeigt.

  3. Fügen Sie der Datei script.js den folgenden JavaScript-Code hinzu, um die Passwortanzeige ein- und auszuschalten und die entsprechende 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. Probiere jetzt die Logik zum Anzeigen des Passworts aus.

    1. Rufen Sie Ihre App auf.

    2. Geben Sie 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 das UX-Design: Werden Nutzende Passwort anzeigen bemerken und es verstehen? Gibt es eine bessere Möglichkeit, diese Funktion bereitzustellen? Dies ist ein guter Moment, um mit einer kleinen Gruppe von Freunden oder Kollegen Rabatte für Usability-Tests zu testen.

Um zu verstehen, wie diese Funktion für Screenreader funktioniert, installieren Sie die Erweiterung „Klassische ChromeVox-Erweiterung“ und navigieren Sie durch das Formular. Funktionieren die aria-label-Werte wie vorgesehen?

Einige Websites, z. B. Gmail, verwenden Symbole anstelle von Text, um die Passwortanzeige ein-/auszuschalten. Implementieren Sie es anschließend mit SVG-Bildern. Material Design bietet hochwertige Symbole, die du kostenlos herunterladen kannst.

Ihr Code sollte nun so aussehen:

5. Formularvalidierung hinzufügen

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

HTML-Formularelemente und -attribute verfügen über integrierte Funktionen für eine einfache Validierung. Sie sollten jedoch auch JavaScript verwenden, um eine zuverlässigere Validierung durchzuführen, während Nutzer Daten eingeben und das Formular senden.

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 Nutzer über die Einschränkungen für Passwörter und andere Eingaben. Achte darauf, dass sie nicht raten!

  1. Aktualisieren Sie den Passwortbereich 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 Passwortbeschränkungen
  • Ein aria-describedby-Attribut für die Passworteingabe. Screenreader lesen den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung vor.

  1. Fügen Sie am Ende der Datei style.css den folgenden CSS-Code 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. Jetzt testen

    Alle aktuellen Browser verfügen über integrierte Funktionen für die 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 und klicken Sie dann auf Ohne Passwort anmelden. Der Browser warnt, dass Sie einen erforderlichen Wert übersehen haben, und legt den Fokus auf die Passworteingabe.

    3. Geben Sie ein ungültiges Passwort ein und klicken Sie auf Anmelden. Jetzt werden unterschiedliche Meldungen angezeigt, je nachdem, was nicht stimmt.

  4. Probieren Sie verschiedene Möglichkeiten aus, um Nutzern bei der Eingabe von E-Mail-Adressen und Passwörtern zu helfen. Bessere Passwortformularfelder bieten einige clevere Vorschläge.

    Ihr Code sollte nun 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.

  • Denken Sie über Stil und Branding nach 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.