Lädt...

HTML-Formular-Attribute

Formulare gaben das Skelett. Formular-Attribute verfeinern das Verhalten — leeres action, get vs post, Autofill, Checks, Benennung des form selbst. Input-Typen und form= später.

Warum Formular-Attribute zählen

Zwei ähnliche Formulare können sich anders verhalten. Attribute am form ändern Ziel, HTTP-Stil, Autofill und Validierung ohne neue Felder.

Direkte Antwort

1) action + method. 2) Leeres action → aktuelle Seite. 3) autocomplete on|off. 4) novalidate nur bewusst. 5) id/name am form für Skripte.

📊 Form attributes at a glance

Attribute Role Beginner tip
action Where the browser sends the data Empty often means “this page”
method get (query string) or post (request body) Prefer post for private or large data
autocomplete Autofill hint for the form off for sensitive practice forms
novalidate Skip built-in HTML checks on submit Demo tool — not a production default
name / id Identify the form element itself Useful when scripts or CSS target the form

Kontaktformular mit Formular-Attributen

Subscribe-Skelett erweitern: beschriftete Felder behalten; öffnendes form-Tag dekorieren.

Contact form with attributes

html
HTML Code 
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>

Kontakt-Demo lesen

  • id/name identifizieren das Formular
  • action ist expliziter Pfad
  • post hält die Nachricht aus der Adresszeile
  • autocomplete=on erlaubt Autofill
  • Feld-names schlüsseln die Payload
  • required ist feldbezogen

GET-Suche und optionales novalidate

Suche oft method=get für die Query in der URL. Keine Sensitiven. autocomplete=off zum Üben. novalidate nur für Spezial-Demos.

GET search with autocomplete off

html
HTML Code 
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>

<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->

Such-Demo lesen

  • get hängt ?q= an
  • autocomplete=off reduziert Autofill
  • ohne required gehen leere Felder mit
  • novalidate-Kommentar nur Erinnerung
  • nie get für Passwörter

Leeres action und GET vs POST

  • leer/weggelassen → aktuelle URL
  • get für Filter und Suche
  • post für Signup und Nachrichten
  • method allein ist keine Sicherheit

Übung — Formular-Attribute justieren

  1. action leeren
  2. method der Suche wechseln
  3. autocomplete=off am Kontakt
  4. kurz novalidate mit required
  5. novalidate entfernen
  6. Form-id und Feld-names prüfen
  7. Satz: Attribute justieren Ziel, Stil, Autofill, Checks

Typische Fehler

  • Überraschung durch leeres action
  • Passwörter mit get
  • novalidate dauerhaft live
  • Form-name mit Feld-name verwechseln
  • off als Sicherheitsgarantie
  • action und method vertauschen

Kurzfassung

  • Attribute verfeinern Submit-Verhalten
  • action + method Kern; leer → aktuelle URL
  • autocomplete und novalidate optional
  • Form name/id vs Feld-name
  • post für Privates
  • als Nächstes: Formularelemente

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Html Tutorial