Erstellung des ersten Formulars

Das <form> Tag wird genutzt um das eigentliche Formular zu erstellen. Das sieht dann so aus:

<form>
	Input elements
</form>

Das <form> Tag beinhaltet den eigentlichen Inhalt des Formulars. Dieser Inhalt wird als Formular Widget, Control oder Feld bezeichnet -beschreiben aber alle das gleiche. Der Inhalt besteht meistens aus unterschiedlichen Arten (oder verschiedenen Stati um es korrekt auszudrücken) von Eingabefeldern und hier und da aus einem Button. Lasst uns ein sehr einfaches Beispiel anschauen, dass nur aus zwei Eingabefeldern und einem Sendebutton besteht:

<form>
	First name: <input type="text" name="firstname" /> <br />
	Surname: <input type="text" name="surname" /> <br />
	<input type="submit" value="Submit now" />
</form>

Wie man sehen kann werden die Eingabefelder über das <input> Element definiert. Das Input Element steht hier für ein bestimmtes Datenfeld welches der Nutzer editieren kann. Das Typ-Attribut definiert den Status der genutzt wird. In diesem Fall ist es ein reguläres Textfeld. Das Name-Attribute benennt die einzelnen Input Felder eindeutig. Das Typ Attribut legt im Endeffekt erst wirklich fest was das Input Element an Dateneingaben akzeptiert.

Der Button wird ebenfalls über das <input> Element definiert. Das Typ-Attribut dabei ist jedoch "submit" anstatt "text", wie bei den beiden vorherigen Feldern zu sehen war. Das submit-Attribut zeigt an, dass es sich bei dem Element um einen Sende-Button handelt. Dieser Button hat das zusätzliche Attribut "value". Der Wert dieses Attributs definiert, was der Button anzeigt, wenn man ihn drückt. In unserem Beispiel habe ich mich für "Submit now" entschieden.
Wie dir mittlerweile aufgefallen sein wird, ist das <input> Element ein leeres Element und ist aus diesem Grund Selbstschließend, weshalb man am Ende das / benutzt.

Tipp!

Es ist immer schön, wenn man seinen Code etwas kürzen kann ohne an Qualität einzubüßen. Diese Gelegenheit hat man, wenn man normale Text-Eingabefelder erstellt. Man kann in diesem Fall das Typ-Attribut weg lassen und der Browser wird das Feld trotzdem automatisch als Textfeld interpretieren. Das heißt, die folgenden zwei Eingabefelder werden exakt gleich behandelt:

<input type="text" />
<input />