Ein Formular entsteht

Ein Bild sagt mehr als tausend Worte - in diesem Sinne möchten wir gemeinsam mit Ihnen in diesem Tutorial ein Formular erstellen. Den Anfang macht ein simples, undesigntes kleines Formular, das wir dann schrittweise bis zu einem voll ausgewachsenen Formular entwickeln, das alle Features bietet.

Vorbereitungen

Um loszulegen benötigen wir nichts anderes, als einen einfachen Texteditor, z. B. Windows Notepad oder ähnliches. Natürlich können Sie auch Ihre bevorzugten IDEs wie Eclipse, SlickEdit, UltraEdit usw. nutzen. Ein Webdesign-Programm ist für dieses Tutorial nicht nötig.

In diesem Tutorial konzentrieren wir uns ganz auf das Formular und begnügen uns mit einer sehr simplen HTML-Seite als Gerüst: 

<html>
	<head>
		<title>Testformular</title>
	</head>
	<body>
		

		
		
		
		
		

	</body>
</html>

In den nun folgenden Schritten verzichten wir auf die Darstellung dieses HTML-Gerüstes und zeigen nur die Zeile <!-- Hier beginnt unser Formular --> an - so wissen Sie genau, wo Sie den Code aus einem Beispiel einfügen müssen.

Im Grundgerüst sind nur zwei Anweisungen wichtig: die Formular-Einleitung via <form... und die Angabe der Empfänger-Adresse - also der Mailadresse, an die der Formular-Chef die Formular-Daten schicken soll. Ersetzen Sie die Beispiel-Mailadresse im Grundgerüst durch Ihre eigene Mailadresse, um das Formular testen zu können.

Abschliessend speichern Sie die HTML-Seite und rufen Sie sie in Ihrem Browser (Firefox, Internet Explorer) auf - entweder indem Sie den Pfad zur Datei in der URL-Zeile angeben oder indem Sie einfach die HTML-Seite mit der Maus in den Browser schieben.

1) Das erste Formular-Feld

In unserem ersten Schritt möchten wir dem Besucher die Möglichkeit geben, seine oder ihre Mailadresse einzugeben - zum Beispiel, um künftig einen Newsletter zu erhalten: 

Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:
Ihre E-Mail-Adresse:
Das erste Beispiel ist zwar absolut funktionstüchtig, aber zugegebenermaßen noch nicht sonderlich ansehnlich. Lassen Sie uns zumindest die Möglichkeiten nutzen, die modernes HTML5 für uns bereithält: 

Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:
Um ein wenig Layout in das Formular zu bekommen, bedienen wir uns beim populären Bootstrap: 

Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:
In den folgenden Beispielen verzichten wir allerdings aus Gründen der Übersichtlichkeit auf das Layouten und konzentrieren uns ganz auf die Formular-Felder.

2) Eine Auswahl-Möglichkeit

Da wir drei verschiedene (fiktive) Newsletter anbieten, soll unser Besucher die Möglichkeit haben, sich für einen Newsletter zu entscheiden. Wir platzieren daher eine Liste mit RADIO-Buttons in unser Formular: 

Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:


Bitte wählen Sie einen Newsletter aus:
Wenn unsere Kunden mehrere Newsletter gleichzeitig bestellen können, müssen wir die RADIO-Buttons durch CHECK-Buttons ersetzen - diese erlauben mehr als eine Auswahl gleichzeitig: 

Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:


Bitte wählen Sie einen Newsletter aus:

3) Textfelder hinzufügen

Sie als Anbieter möchten vielleicht dem Besucher auch die Möglichkeit geben, Ihnen seinen Namen und vielleicht einen Kommentar mitzuteilen. Wir bauen dafür ein INPUT- und ein TEXTAREA-Feld ein: 


Sie möchten unseren Newsletter erhalten? Bitte geben Sie die Mailadresse ein, an die Sie den Newsletter erhalten möchten:


Bitte wählen Sie einen Newsletter aus:






Bitte geben Sie Ihren Namen ein:


Möchten Sie uns eine Nachricht zukommen lassen? Dann können Sie das folgende Feld für Ihren Text nutzen:
Weitere Features wie eigene Antwort- und Fehlertemplates, Bestätigungsmails an die Kunden, die Validierung von Pflichtfeldern und mehr erhalten Sie auf den nächsten Seiten und bei den Beispiel-Formularen.