← Zurück zu Einheit 03

Manuskript-Metadaten-Formular

Dieses Beispiel zeigt ein vollständiges HTML-Formular für die Erfassung von Manuskript-Metadaten. Es demonstriert verschiedene Input-Typen, Validierung, Fieldset-Gruppierung und ein responsives Grid-Layout für die Formularfelder.

Neues Manuskript erfassen

Geben Sie die Metadaten des Manuskripts ein. Pflichtfelder sind mit * gekennzeichnet.

Identifikation
Format: Zwei Grossbuchstaben, Bindestrich, vier Ziffern
Inhaltliche Beschreibung
Zwischen 1400 und 1950
Mehrere Schlagwörter mit Komma trennen
Maximal 2000 Zeichen
Physische Beschreibung
Digitalisierung
Validierung testen

Klicken Sie auf „Speichern“, ohne die Pflichtfelder auszufüllen. Der Browser zeigt automatisch Fehlermeldungen an. Geben Sie bei der Signatur ein falsches Format ein (z.B. „abc“) und beobachten Sie die Pattern-Validierung.

Verwendete Techniken

Dieses Formular demonstriert: fieldset/legend für Gruppierung, required für Pflichtfelder, pattern für Format-Validierung, min/max für Wertebereiche, minlength/maxlength für Textlängen, CSS Grid für responsives Feldlayout und CSS-Pseudoklassen für Validierungs-Feedback.

Wichtige Code-Auszüge

Pattern-Validierung (Signatur) 
<input type="text" id="signatur" name="signatur"
       pattern="[A-Z]{2}-[0-9]{4}"
       title="Format: XX-0000 (z.B. HS-0312)"
       placeholder="z.B. HS-0312"
       required>
Responsives Feld-Grid 
.feld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}

/* Breite Felder ueber alle Spalten */
.feld--breit {
  grid-column: 1 / -1;
}
Validierungs-Stile 
/* Gruen bei gueltiger Eingabe */
input:not(:placeholder-shown):valid {
  border-color: #27ae60;
}

/* Rot bei ungueltiger Eingabe */
input:not(:placeholder-shown):invalid {
  border-color: #e74c3c;
  background: #fef5f5;
}

/* Focus-Ring */
input:focus {
  border-color: #1a5276;
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}
Fieldset und Legend 
<fieldset>
  <legend>Inhaltliche Beschreibung</legend>
  <div class="feld-grid">
    <div class="feld">
      <label for="titel">Titel <span class="pflicht">*</span></label>
      <input type="text" id="titel" name="titel" required>
    </div>
    <!-- weitere Felder ... -->
  </div>
</fieldset>