TOC

This article is currently in the process of being translated into German (~69% done).

Formulare:

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.

The button is also defined using the <input> element but the value of the type attribute is "submit" as opposed to "text" in the two previous fields and this indicates that this is a submit button. The submit button has an additional attribute, value. The value of the value attribute defines what the button is going to say and for our example I choose "Submit now".
As you have probably noted by now, the <input> element is an empty element and therefore it is self-closing, using the / at the end.

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 />
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!