Der (<input>)-Tag

Aufbau

Der <input>-Tag ist wieder ein leeres HTML-Element. Es gibt also keinen Endtag und alle wichtigen Informationen werden mittels Attributen übergeben. Das kann dann so aussehen:

<input name="obst" type="text" value="Dein Lieblingsobst">

Mit dem name-Attribut wird dem Formularelement ein Name zugewiesen. Das ist später für die Auswertung wichtig, sollte aber von vornherein im HTML-Code mit angegeben werden. Es bietet sich hier immer ein kurzer, prägnanter Name an, der angibt, welche Information aus dem Inhalt des Formularelements gezogen werden kann. Es gibt auch Formlarelemente, bei denen die Zuweisung eines Namens wichtig für ihre (inhaltliche) Gruppierung ist. Sie bekommen dann nämlich denselben Namen zugewiesen und werden somit als eine Einheit aufgefasst. Das type-Attribut besprechen wir gleich etwas ausführlicher (unten bei den Varianten). Das value-Attribut gibt an, was der Inhalt des Formularelemts sein soll, bevor der Benutzer irgendetwas gemacht hat. In unserem Fall oben wird dem Benutzer ein Textfeld angezeigt, in dem der Text "Dein Lieblingsobst" zu sehen ist. Der Benutzer kann dann diesen Text durch Eingabe seines tatsächlichen Lieblingsobsts ersetzen.

Ohne den Inhalt des value-Attributs könnte der Benutzer in unserem Beispiel überhaupt nicht wissen, welche Daten er in das Formular eingeben soll. Er würde ja nur ein leeres Textfeld sehen, völlig ohne für ihn erkennbare inhaltliche Funktion. Deshalb sollte bei allen Formularelementen, deren Bedeutung nicht völlig selbsterklärend ist, noch ein <label>-Element mit angegeben werden. In diesem kann dann Text stehen, der dem Benutzer (und Suchmaschinen) sagt, was der Sinn des Formularelements ist. Dazu wird zunächst dem <input>-Tag noch das id-Attribut hinzugefügt, mit dem wir dem <label>-Tag dann in dessen for-Attribut mitteilen können, worauf sich das Label bezieht (beachte, dass id-Attribute dokumentweit eindeutig sein müssen, also keine zwei Elemente dasselbe id-Attribut haben dürfen). Das erweiterte Beispiel sieht dann so aus:

<label for="input-obst">Lieblingsobst:
<input name="obst" id="input-obst" type="text" value="Dein Lieblingsobst">
</label>

Varianten

Das grundlegendste Attribut des <form>-Tags ist das type-Attribut. Dieses gibt an, was für eine Art von input-Feld erzeugt werden soll. Wir lernen in den folgenden Abschnitten drei Arten davon kennen: "text", "checkbox" und "radio". Viele weitere Attribute machen erst Sinn, wenn der Typ des input-Felds festgelegt ist. Jeder verschiedene Typ von input-Feld hat in den Browsern seine eigene optische Standarderscheinung. Zur Demonstration der Funktion genügt uns diese Standardanzeige. In vielen Fällen möchte man die Gestalt der Formularelemente genau an die Anwendung anpassen. Das ist aber wieder nicht die Aufgabe von HTML, sondern von CSS, und wird deshalb nicht hier besprochen.