0Pricing
HTML Academy · Lektion

required pattern min max und maxlength

Fügen Sie Formulareingaben integrierte Validierungsbedingungen hinzu

required pattern min max und maxlength ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

HTML5-Formularvalidierung

HTML5 hat eine integrierte Formularvalidierung hinzugefügt – kein JavaScript erforderlich:

  • Browser prüfen die Einschränkungen vor dem Absenden
  • Native Fehlermeldungen werden automatisch angezeigt
  • Funktioniert mit den CSS-Pseudoklassen :valid und :invalid

required

Das Attribut required verhindert das Absenden, wenn das Feld leer ist:

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

pattern

Das Attribut pattern validiert Text anhand eines regulären Ausdrucks:

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

Beispiele für häufige pattern-Werte

Nützliche reguläre Ausdrücke für Formularfelder:

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

min und max

Schränken Sie Eingaben für Zahlen, Datumsangaben und Bereiche ein:

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

maxlength und minlength

Steuern Sie die Länge von Texteingaben:

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

step

Das Attribut step legt gültige Schrittweiten für number- und range-Eingaben fest:

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSS :valid und :invalid

Gestalten Sie Felder abhängig von ihrem Validierungsstatus:

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

title für benutzerdefinierte Fehlermeldungen

Das Attribut title liefert einen Hinweis in der Validierungsfehlermeldung des Browsers:

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

Einschränkungen kombinieren

Mehrere Validierungsattribute wirken zusammen:

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidate und Zeitpunkt der Validierung

Die Validierung wird standardmäßig beim Absenden ausgelöst. So validieren Sie bei jedem input-Ereignis:

<input type="email" id="email">

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

Zusammenfassung der Validierungs-Pseudoklassen

CSS-Pseudoklassen für die Formularvalidierung:

  • :valid – die Einschränkungsvalidierung wurde bestanden
  • :invalid – mindestens eine Einschränkung wurde nicht erfüllt
  • :required – das required-Attribut ist vorhanden
  • :optional – required ist nicht vorhanden
  • :in-range – der Wert liegt innerhalb von min/max
  • :out-of-range – der Wert liegt außerhalb von min/max

Kurze Überprüfung

Welches Attribut begrenzt die maximale Zeichenanzahl in einer Texteingabe?

Zusammenfassung: Validierungsattribute

Grundlagen der HTML5-Validierung:

  • required – das Feld muss ausgefüllt werden
  • pattern – anhand eines regulären Ausdrucks validieren
  • min / max – Wertebereiche für Zahl, Datum und Bereich
  • maxlength / minlength – Grenzen für die Zeichenanzahl
  • step – gültige Schrittweiten
  • CSS :valid / :invalid zur Gestaltung

Häufig gestellte Fragen

Ist die Lektion „required pattern min max und maxlength“ kostenlos?

Ja — der vollständige Text von „required pattern min max und maxlength“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „required pattern min max und maxlength“?

Fügen Sie Formulareingaben integrierte Validierungsbedingungen hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „required pattern min max und maxlength“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. required pattern min max und maxlength
  2. Das novalidate-Attribut
  3. Grundlagen der Constraint Validation API
  4. HTML5- gegenüber JavaScript-Validierung
← Zurück zu HTML Academy