HTML - Formular Eigenschaften: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Formular Eigenschaften ein. Machen Sie sich keine Sorgen, wenn Sie neu hier sind – ich werde Ihr freundlicher Guide auf dieser Reise sein, genau wie ich es über die Jahre für meine Schüler getan habe. Also, holen Sie sich ein Getränk Ihrer Wahl und lassen Sie uns loslegen!

Was sind Formular Eigenschaften?

Bevor wir ins tiefe Wasser springen,fangen wir mit den Grundlagen an. Formular Eigenschaften sind besondere Anweisungen, die wir HTML-Formularen geben, um ihr Verhalten zu steuern. Stellen Sie sich sie als das heimliche Gewürz vor, das Ihre Formulare so funktionieren lässt, wie Sie es wollen.

Stellen Sie sich vor, Sie backen einen Kuchen. Das Formular ist Ihr Teig und die Eigenschaften sind die besonderen Zutaten, die Ihren Kuchen einzigartig machen – vielleicht ein bisschen Vanille Extrakt oder Schokoladenstückchen. Genau wie diese Zutaten den Geschmack Ihres Kuchens verändern, verändern Formular Eigenschaften, wie Ihr Formular funktioniert.

Das action Attribut

Das action Attribut ist so, als würde man seinem Formular sagen, wohin es seine Nachricht liefern soll. Es ist das Ziel für die Daten, die Ihre Benutzer eingeben.

Hier ist ein Beispiel:

<form action="/submit-form">
<!-- Formularelemente kommen hier hin -->
</form>

In diesem Fall wird, wenn jemand das Formular einreicht, alle Daten an "/submit-form" gesendet. Es ist wie das Adressieren eines Umschlages, bevor man ein Brief verschickt.

Das method Attribut

Das method Attribut bestimmt, wie die Daten gesendet werden. Es gibt zwei Hauptmethoden: GET und POST.

<form action="/submit-form" method="POST">
<!-- Formularelemente kommen hier hin -->
</form>

Stellen Sie sich GET als das Versenden einer Postkarte vor – die Informationen sind für jeden sichtbar. POST ist mehr wie das Versenden eines versiegelten Briefes – die Informationen sind vor neugierigen Augen verborgen.

Das target Attribut

Das target Attribut entscheidet, wo die Antwort auf die Formularübersendung angezeigt wird. Es ist wie das Auswählen, welches Fenster geöffnet werden soll, wenn man einen Link anklickt.

<form action="/submit-form" method="POST" target="_blank">
<!-- Formularelemente kommen hier hin -->
</form>

In diesem Beispiel bedeutet _blank, dass die Antwort in einem neuen Tab oder Fenster geöffnet wird. Es ist perfekt, wenn Sie Ihre ursprüngliche Seite offen halten möchten.

Das novalidate Attribut

Manchmal möchten Sie möglicherweise die integrierte Formularvalidierung des Browsers ausschalten. Hier kommt novalidate ganz gelegen.

<form action="/submit-form" method="POST" novalidate>
<!-- Formularelemente kommen hier hin -->
</form>

Durch Hinzufügen von novalidate sagen Sie dem Browser: "Mach dir keine Sorgen, ich werde die Validierung selbst übernehmen!" Es ist wie das Ausschalten der Rechtschreibprüfung in einem Textverarbeitungsprogramm.

Das autocomplete Attribut

Das autocomplete Attribut ist wie ein hilfreicher Assistent, der sich daran erinnert, was Sie previously eingegeben haben.

<form action="/submit-form" method="POST" autocomplete="on">
<!-- Formularelemente kommen hier hin -->
</form>

Mit autocomplete="on" wird der Browser Vorgaben für previously eingegebene Werte vorschlagen. Es ist super praktisch für Benutzer, wie ein persönlicher Sekretär!

Das enctype Attribut

Last but not least haben wir das enctype Attribut. Dies ist etwas technisch, aber stellen Sie es sich als das Auswählen des richtigen Umschlages für Ihren Brief vor.

<form action="/submit-form" method="POST" enctype="multipart/form-data">
<!-- Formularelemente kommen hier hin -->
</form>

Das enctype="multipart/form-data" ist besonders wichtig, wenn Ihr Formular Datei-Uploads enthält. Es ist wie das Benutzen eines gepolsterten Umschlages, wenn man etwas zerbrechliches versendet.

Alles zusammenbringen

Nun, da wir jede Eigenschaft einzeln untersucht haben, sehen wir uns an, wie sie alle in einem realen Beispiel zusammenarbeiten:

<form action="/submit-application" method="POST" target="_blank" novalidate autocomplete="on" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume">

<input type="submit" value="Submit Application">
</form>

In diesem Beispiel haben wir ein Bewerbungsformular erstellt. Lassen Sie uns es auseinandernehmen:

1. Die Formulardaten werden an "/submit-application" gesendet
2. Wir verwenden POST, um die Daten privat zu halten
3. Die Antwort wird in einem neuen Tab geöffnet
4. Wir haben die Browservalidierung ausgeschaltet, um unsere eigene zu verwenden
5. Autocomplete ist aktiviert, um Benutzern das Ausfüllen des Formulars zu erleichtern
6. Wir verwenden multipart/form-data, weil es einen Datei-Upload gibt

Formular Eigenschaften auf einen Blick

Hier ist eine praktische Tabelle, die alle Eigenschaften zusammenfasst, über die wir gesprochen haben:

Eigenschaft	Zweck	Beispiel
action	Gibt an, wohin die Formulardaten gesendet werden	action="/submit-form"
method	Gibt an, wie die Formulardaten gesendet werden	method="POST"
target	Gibt an, wo die Antwort auf die Formularübersendung angezeigt wird	target="_blank"
novalidate	Schaltet die Browservalidierung aus	novalidate
autocomplete	Aktiviert/deaktiviert Formularautocomplete	autocomplete="on"
enctype	Gibt an, wie die Formulardaten codiert werden sollen	enctype="multipart/form-data"

Und da haben Sie es, Leute! Sie haben gerade eine rasante Tour durch die HTML-Formular Eigenschaften gemacht. Erinnern Sie sich daran, Übung macht den Meister, also Scheuen Sie sich nicht, diese Eigenschaften in Ihren eigenen Formularen auszuprobieren. Bevor Sie es wissen, werden Sie Formulare erstellen, die nicht nur funktional, sondern auch benutzerfreundlich und effizient sind.

Happy Coding und möge Ihre Formulare stets erfolgreich eingereicht werden!

Credits: Image by storyset