path: root/files/de/learn/forms/index.html

---
title: HTML forms
slug: Learn/Forms
tags:
  - Anleitung
  - Beginner
  - Formular
  - HTML
  - Lernen
  - Web
translation_of: Learn/Forms
original_slug: Learn/HTML/Forms
---
<div>{{LearnSidebar}}</div>

<p class="summary">Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit Nutzern zu interagieren — am häufigsten werden sie benutzt, um Daten von Nutzern zu erheben oder um ihnen zu erlauben, eine Benutzerschnittstelle zu bedienen. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken, einschließlich das Auszeichnen ihrer HTML-Struktur, das Styling von Formelementen, das Validieren von Formulardaten und das Senden von Daten an den Server.</p>

<h2 id="Voraussetzungen">Voraussetzungen</h2>

<p>Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Nativen-Formular-Komponenten-Anleitung</a> zu machen.</p>

<p>Das Meistern von Formularen benötigt allerdings mehr als nur HTML-Kenntnisse — Du wirst auch einige spezielle Techniken zum Stylen von Formular-Komponenten lernen müssen. Daneben ist ein wenig Scripting-Wissen erforderliche, um Dinge wie Validierung und das erstellen eigener Formular-Komponenten zu erledigen. Daher würden wir empfehlen, dass du diese Seite zunächst verlässt, um ein wenig <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> und <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> zu erlernen und danndie anderen Abschnitte durchliest.</p>

<p>Der obenstehende Text ist ein guter Indikator, warum wir Web-Formulare in ein eigenständiges Modul gepackt haben anstatt Teile davon in die HTML, CSS, und JavaScript Themengebiete zu legen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und benötigen dazu eine enge Verbindung von CSS- und JavaScript-Techniken, um das meiste aus ihnen herauszuholen.</p>

<div class="note">
<p><strong>Notiz</strong>: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://glitch.com/">Glitch</a> nutzen.</p>
</div>

<h2 id="Grundlagen">Grundlagen</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form" style="">Dein erstes HTML-Formular</a></dt>
</dl>

<dl>
 <dd>Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Element, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Wie man ein HTML-Formular strukturiert</a></dt>
 <dd>Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.</dd>
</dl>

<h2 id="Die_verschiedenen_Formular-Komponeneten">Die verschiedenen Formular-Komponeneten</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Die nativen Formular-Komponenten</a></dt>
 <dd>Wir gucken jetzt auf die Funktionalität der verschiedenen {{htmlelement("input")}} Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.</dd>
 <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">Die HTML5 Eingabetypen</a></dt>
 <dd>Hier setzen wir unsere Vertiefung in das <code>&lt;input&gt;</code>-Element fort, schauen auf die verschiedenen zusätzlichen input-Typen, die mit der Veröffentlichung von HTML5 bereitgestellt wurden und die verschiedenen UI-Komponenten und die Verbesserung der Datenerhebung, welche sie ermöglichen. Zusätzlich schauen wir uns das {{htmlelement('output')}}-Element an.</dd>
 <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Andere Formular-Komponentent</a></dt>
 <dd>Next we take a look at all the non-<code>&lt;input&gt;</code> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</dd>
</dl>

<h2 id="Form_styling_guides">Form styling guides</h2>

<dl>
 <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Stylen von Web-Formularen</a></dt>
 <dd>Dieser Artikel stellt eine Einführung in das Stylen von Formularen mit CSS bereit. Er beinhaltet Grundlagen, die Du vielleicht für einfache Styling-Aufgaben benötigen wirst.</dd>
 <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Fortgeschrittenes Stylen von Formularen</a></dt>
 <dd>Hier schauen wir uns einige fortgeschrittene Techniken zum Stylen von Formularen an, die benötigt werden, sobald einige der schwieriger zu stylende Formular-Elemente gehandhabt werden sollen.</dd>
 <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-Klassen</a></dt>
 <dd>Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.</dd>
</dl>

<h2 id="Prüfen_und_Abschicken_von_Daten">Prüfen und Abschicken von Daten</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Clientseitige Formulardaten-Validation</a></dt>
 <dd>Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft uns, diiese Ziele zu erreichen - Dieser Artikel erklärt Dir alles, was du wissen musst.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Das Senden von Daten</a></dt>
 <dd>Dieser Artikel zeigt, was passiert, wenn ein Benutzer ein Formular abschickt — wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.</dd>
</dl>

<h2 id="Weiterführende_Anleitungen">Weiterführende Anleitungen</h2>

<p>Die nachfolgenden Artikel sind nicht zwingend notwendig für den Lernpfad, aber sie erweisen sich als interessant und nützlich, wenn Du die obenstehenden Techniken gemeistert hast und mehr lernen möchtest.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Wie man eigene Formular-Komponenten baut</a></dt>
 <dd>Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was Du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst Du eventuell Deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie Du dies tun kannst und welchen Überlegungen Du Dir im Klaren sein musst - mit einem praktischen Fall-Beispiel.</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Senden von Formularen mit JavaScript</a></dt>
 <dd>Dieser Artikel betrachtet Möglichkeiten, wie ein Formular genutzt werden kann, um eine HTTP-Anfrage zu erstellen und diese mit JavaScript versandt werden kann statt dem üblichen Formularversand. Es schaut auch auf die Gründe, warum Du dies machen wolltest und die Folgen davon. (Siehe auch Using FormData objects.)</dd>
 <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in veralteten Browsern</a></dt>
 <dd>Dieser Artikel beinhaltet das Erkennen von Features usw. Er sollte zum Artikel über das Testen von plattformunabhängigen Features umleiten, da der selbe Inhalt dort besser erklärt wird.</dd>
</dl>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
 <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
</ul>