0Pricing
HTML Academy · Lektion

Das form-Element: action, method und enctype

Richten Sie ein form-Element mit action, method und enctype ein.

Das form-Element: action, method und enctype 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.

Was ist ein Formular?

HTML-Formulare sind die wichtigste Möglichkeit, mit der Benutzer Daten an einen Server senden:

  • Anmeldung und Registrierung
  • Suchanfragen
  • Checkout und Bezahlung
  • Kontakt und Feedback

Jedes Formular beginnt mit dem Element <form>.

Das form-Element

Das Element <form> umfasst alle Formularsteuerelemente:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

Das action-Attribut

Das Attribut action gibt an, wohin Formulardaten gesendet werden:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

Das method-Attribut

Das Attribut method steuert, wie Daten gesendet werden:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET vs POST

GET und POST haben unterschiedliche Eigenschaften:

  • GET — Daten in der URL (begrenzte Länge), als Lesezeichen speicherbar, im Cache gespeichert, idempotent
  • POST — Daten im Body (unbegrenzte Länge), nicht als Lesezeichen speicherbar, nicht im Cache gespeichert, nicht idempotent

Als Faustregel gilt: Wenn das Absenden den Serverzustand nicht ändert → GET; wenn es ihn ändert → POST.

Das enctype-Attribut

Das Attribut enctype steuert, wie Formulardaten für POST-Anfragen codiert werden:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

novalidate-Attribut

Das Attribut novalidate deaktiviert die integrierte Browservalidierung:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

target-Attribut im Formular

Das Attribut target steuert, wo die Antwort angezeigt wird:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

autocomplete im Formular

Das Attribut autocomplete steuert das automatische Ausfüllen durch den Browser:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Formularübermittlung mit JavaScript

Verhindern Sie die standardmäßige Übermittlung und verarbeiten Sie das Formular mit JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

action und method zusammen

Vollständiges Formularbeispiel mit korrekt gesetzten Attributen action und method:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Schnelltest

Welche Formularmethode sollten Sie beim Hochladen einer Datei verwenden?

Zusammenfassung: form-Element

Die wichtigsten Punkte zum form-Element:

  • action — URL, die die Formulardaten empfängt
  • method="get" — Daten in der URL (Suche, Filter)
  • method="post" — Daten im Body (sensible Daten, Zustandsänderungen)
  • enctype="multipart/form-data" — für Datei-Uploads erforderlich
  • novalidate — Browservalidierung deaktivieren

Häufig gestellte Fragen

Ist die Lektion „Das form-Element: action, method und enctype“ kostenlos?

Ja — der vollständige Text von „Das form-Element: action, method und enctype“ 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 „Das form-Element: action, method und enctype“?

Richten Sie ein form-Element mit action, method und enctype ein. 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 „Das form-Element: action, method und enctype“?

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. Das form-Element: action, method und enctype
  2. Input-Typen: text, password, email, number und tel
  3. Das label-Element und Barrierefreiheit
  4. Das button-Element: submit, reset und button
← Zurück zu HTML Academy