CSS-Kurs / Formularzustände: Fokus, Validierung, disabled und readonly

CSS kann Fokus, Gültigkeit sowie deaktivierte oder schreibgeschützte Formularelemente stylen, aber HTML definiert deren Beschriftungen, Einschränkungen und Übermittlungsverhalten. :invalid kann vor der Interaktion übereinstimmen, während :user-invalid hilft, die Fehlerdarstellung zu verzögern, bis der Browser dies für angemessen hält.

Weisen Sie Beschriftungen und Anweisungen den Steuerelementen zu

Wenn das for-Attribut von label und die ID des Eingabefensters als dieselbe angegeben sind, werden der Elementname und das Eingabefenster verbunden. Platzhalter verschwinden, sobald Sie mit der Eingabe beginnen, sodass sie nicht den Platz von Namen oder wichtigen Bedingungen einnehmen. Für zusätzliche Erklärungen lassen Sie den Satz sichtbar und geben Sie die ID des Satzes in aria-describedby an.

<label for="email">Email address (required)</label>
<input id="email" name="email" type="email" required
  placeholder="name@example.com" aria-describedby="email-help">
<p id="email-help">Enter name@example.com in the same format.</p>

Der obige Teilcode stellt kurz den E-Mail-Bereich des vollständigen Beispiels unten dar. id identifiziert das Objekt im Dokument, und name ist der Elementname in den übermittelten Daten. Wenn name nicht vorhanden ist, wird es bei normalen Übermittlungen nicht eingeschlossen, auch wenn Sie es auf dem Bildschirm eingeben können. Für die Zusammensetzung von Beschriftungen und Beschreibungen verweisen Sie auf den W3C-Leitfaden zu Formularbeschriftungen und W3C-Leitfaden zu Formulareingabehinweisen.

Größensteuerung für schmale Bildschirme und größere Schrift

Wenn Sie sich nur auf die inhärente Breite des Eingabefensters verlassen, kann es bei erhöhter Schriftgröße über einen schmalen Bildschirm hinausgehen. Legen Sie die maximale Breite des Formulars fest und verwenden Sie width: 100% und box-sizing: border-box zusammen im Eingabefenster. Dies stellt sicher, dass auch Rahmen und Innenabstand innerhalb der angegebenen Breite enthalten sind.

*, *::before, *::after { box-sizing: border-box; }
form { max-width: 28rem; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }

Diese Regel ist im Stilabschnitt des gesamten Beispiels enthalten. font: inherit ermöglicht es, dass das Eingabefeld und die Schaltflächen der Schriftart, Größe und Zeilenhöhe des Textes folgen, und min-width hilft, die Mindestgröße zu reduzieren, die eine Verkleinerung verhindert, selbst wenn das Eingabefeld in ein Flexbox/Grid eingefügt wird. Es wird keine feste Höhe verwendet, damit sich die darunterliegenden Elemente natürlich nach unten verschieben, selbst wenn die Beschreibung vergrößert oder die Buchstaben vergrößert werden.

Trennen Sie Fokuszustand und Validierungsfehler

:focus entspricht dem Element, das derzeit den Fokus hat, und :focus-visible entspricht, wenn der Browser feststellt, dass er den Fokus anzeigen muss. Es wird hauptsächlich während der Tastaturnavigation angezeigt, kann aber auch durch Klicken mit der Maus im Texteingabefenster angezeigt werden, daher sollte es nicht als „gilt nur für die Tastatur“ verstanden werden. die MDN-Erklärung zu :focus-visible und der Fokusdarstellung bereitgestellt. Um die Fokusanzeige auch konsequent auf Links anzuwenden, vergleichen Sie CSS-Link-Zustände und sichtbarer Tastaturfokus.

Fokus zeigt das Element an, das Sie gerade bearbeiten, und Fehler zeigen Elemente an, die die Eingabebedingungen nicht erfüllt haben. Da beide Zustände gleichzeitig vorhanden sein können, zeigt das gesamte Beispiel den Fokus mit einer blauen Umrandung und den Fehler mit einer dunkelroten Rahmenlinie und einer Fehlermeldung. Lassen Sie etwas Platz um die Umrandung, um ein Abschneiden zu vermeiden, und vermeiden Sie es, die Umrandung zu entfernen und keinen anderen Fokusindikator bereitzustellen.

:invalid passt, wenn der aktuelle Wert ungültig ist, sodass auch ein leeres Pflichtfeld von Anfang an erfasst wird. :user-invalid passt, wenn der Browser nach einer Benutzerinteraktion einen Fehlerzustand anzeigt. Wann etwas angezeigt wird, z. B. wenn Sie mit der Eingabe fertig sind oder versuchen, das Formular abzusenden, kann vom Verhalten Ihres Browsers abhängen. Das Labor prüft auf Fehler, indem die Schaltfläche Check submitted fields gedrückt wird. die MDN-Erklärung zu :user-invalid .

Wenn Sie ältere Unterstützungziele berücksichtigen müssen, müssen Sie überprüfen, ob der Selektor unterstützt wird, und einen separaten Verifizierungsfluss entwerfen. Selbst wenn die Fehlerdekoration nicht erscheint, weil der Selektor nicht unterstützt wird, bedeutet dies nicht, dass die erforderlichen und formatbezogenen Überprüfungen von HTML verschwinden. Wählen Sie eine Fokusfarbe, die sich deutlich vom tatsächlichen Hintergrund abhebt, und überprüfen Sie ebenfalls die Anwendungsbedingungen des W3C Non-Text Contrast Guide.

Vergleichen Sie erforderlich, gültig, deaktiviert und schreibgeschützt

readonly wird von bestimmten textähnlichen Steuerelementen unterstützt und ist keine allgemeine Methode, um ein Auswahlfeld schreibgeschützt zu machen. Unterstützte schreibgeschützte Steuerelemente sind von der Einschränkungsvalidierung ausgenommen, während benannte Steuerelemente weiterhin übermittelte Formulardaten erfassen können. Unterscheiden Sie dieses Verhalten von deaktivierten Steuerelementen. Siehe HTML-Standard: Erstellen der Eintragsliste, MDN: readonly.

Dieses E-Mail-Feld demonstriert ein Format wie name@example.com. Das Bestehen der Validierungsprüfung bestätigt nicht, dass das Konto existiert oder E-Mails empfangen kann. Die HTML-type="email"-Validierung akzeptiert nicht jedes internationalisierte Adressformat; nicht-ASCII-Lokalteile werden hier nicht als garantiert gültige Eingabe dargestellt. Für weitere Details siehe HTML-Standard für E-Mail-Eingabebedingungen.

Führen Sie das Beispiel aus und überprüfen Sie die eingereichten Felder

Speichern Sie den folgenden Code als form-states.html in UTF-8 und öffnen Sie ihn in Ihrem Browser. HTML und CSS bestimmen den Zustand des Formulars. Das kurze JavaScript am Ende ist Hilfscode, um gültige Formularübermittlungen abzufangen und eine Liste von Daten auf dem Bildschirm anzuzeigen, ohne sie an den Server zu senden oder zusätzliche Eingabeprüfungen durchzuführen. Wenn JavaScript deaktiviert ist, funktioniert die Ergebnis-Ausgabefunktion nicht.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing form states and submitted fields</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
form { max-width: 28rem; }
.field { margin-block: 1.25rem; }
label { display: block; margin-bottom: .35rem; font-weight: 700; }
input { display: block; width: 100%; min-width: 0; padding: .65rem;
  border: 2px solid #6d7e8b; border-radius: .3rem; background: white; color: #183044; }
input:required { border-inline-start-width: 4px; }
input:user-invalid { border-color: #9d2632; }
.help, .error { margin-block: .4rem 0; }
.error { display: none; color: #9d2632; }
input:user-invalid + .error { display: block; }
input[readonly] { background: #eef6fa; }
input:disabled { background: #eceff2; color: #465766; cursor: not-allowed; }
button { padding: .65rem 1rem; border: 1px solid #164f73; border-radius: .3rem;
  background: #166b92; color: white; }
output { display: block; margin-block: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<main>
<h1>Check input states and submitted data</h1>
<form id="demo-form">
  <div class="field">
    <label for="email">Email address (required)</label>
    <input id="email" name="email" type="email" autocomplete="email" required
      placeholder="name@example.com" aria-describedby="email-help email-error">
    <p id="email-error" class="error">Enter an email address in a format such as name@example.com; do not leave the field empty.</p>
    <p id="email-help" class="help">This sample input checks the address format. It does not check whether the example address receives mail.</p>
  </div>
  <div class="field">
    <label for="plan">Plan (read-only)</label>
    <input id="plan" name="plan" type="text" value="Basic" readonly>
  </div>
  <div class="field">
    <label for="coupon">Coupon (currently disabled)</label>
    <input id="coupon" name="coupon" type="text" value="WELCOME" disabled>
  </div>
  <button type="submit">Check submitted fields</button>
</form>
<output id="result" for="email plan coupon" aria-live="polite"></output>
<script>
  const form = document.getElementById("demo-form");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const entries = Array.from(new FormData(form).entries());
    document.getElementById("result").textContent = JSON.stringify(entries, null, 2);
  });
</script>
</main>
</body>
</html>

1. Lassen Sie das E-Mail-Feld leer und drücken Sie Check submitted fields. Überprüfen Sie Ihren Browser auf erforderliche Eingabeanweisungen und Fehlermeldungen.
2. Geben Sie abc in die E-Mail ein und senden Sie erneut. Aufgrund eines Formatfehlers sollte keine neue Ergebnisliste ausgegeben werden.
3. Geben Sie name@example.com ein und senden Sie es ab. Die Ergebnisse enthalten E-Mail und Plan, aber es gibt keinen deaktivierten Gutschein.
4. Verwenden Sie die Tabulatortaste, um in der Reihenfolge Email → Plan → Check submitted fields zu navigieren. Inaktive Gutscheine werden aus der normalen Tab-Reihenfolge übersprungen, und schreibgeschützte Pläne können den Fokus erhalten.
5. Entfernen Sie nur disabled am coupon-Eingabefeld. Prüfen Sie, dass es nun mit Tab erreichbar ist und coupon mit dem Wert WELCOME in FormData erscheint. Stellen Sie danach disabled wieder her.
6. Entfernen Sie nur das readonly-Attribut des Plans und versuchen Sie, es zu bearbeiten. Nach dem Vergleich stellen Sie den Wert wieder auf „Basic“ und fügen readonly erneut hinzu.
7. Reduzieren Sie die Bildschirmbreite und passen Sie die Browservergrößerung oder die Schriftgröße an. Überprüfen Sie, dass das Eingabefenster, die Fokusrandlinie und Fehlersätze nicht abgeschnitten oder überlappt werden.

Verstehen Sie die Grenzen von CSS und Browservalidierung

CSS ist dafür verantwortlich, den Status eines Elements anzuzeigen. Die Browserüberprüfung kann Eingabefehler der Benutzer reduzieren, kann jedoch mit Entwicklertools oder separaten Anfragen umgangen werden, daher muss der eigentliche Dienst die zulässigen Werte, Längen, Berechtigungen usw. auf dem Server erneut überprüfen. Fehlersätze beschreiben die problematischen Elemente und Lösungen spezifisch, und ein separater Ablauf zur Erhaltung der Eingabeinformationen wird ebenfalls entworfen, wenn ein Serverfehler auftritt.

Wenn sich das Beispiel unerwartet verhält, überprüfen Sie zunächst die label for/id-Paare, name-Attribute, erforderliche Felder, Eingabetypen sowie deaktivierte oder schreibgeschützte Zustände. Wenn der Fokus unsichtbar ist, prüfen Sie, ob eine andere Outline-Regel ihn überschreibt. Sofort angezeigte Fehler können von :invalid stammen. Wenn die Nachricht nach einem Einreichungsversuch weiterhin verborgen bleibt, überprüfen Sie die Unterstützung für :user-invalid sowie die CSS-Kombinatoren und Pseudo-Klassen.