Verwenden weiterer Formularfeld-Elemente im HTML

Input-Element und Formularfelder Button und Textarea

Zusätzlich zu  Formularfeldern, die Sie mit Hilfe des <input>-Elements erstellen können, gibt es drei Elemente, die selbst noch Inhalte aufweisen.

Verwenden des Button-Elements

Eine mit dem <button>-Element erstellte Schaltfläche gleicht den Schaltflächen, die man mit dem <input>-Element erstellen kann. Diese ersteren Schaltflächen können aber innerhalb der einleitenden und abschließenden Tags einen Inhalt aufweisen, der dann auf den Schaltflächen erscheint.

Um diese zu erstellen, öffnen Sie als Erstes das einleitende <button>-Tag und geben Sie anschließend das name-Attribut ein. Das name-Attribut legt den Namen für die Schaltfläche fest. Geben Sie als Nächstes das type-Attribut ein und wählen Sie den Schaltflächentyp, den Sie verwenden möchten. Schließen Sie danach das Tag und geben Sie den Text ein, der auf der Schaltfläche erscheinen soll. Fügen Sie schließlich ein abschließendes <button>-Tag hinzu. Der folgende Code-Ausschnitt dient zur Erstellung der drei verschiedenen Schaltflächen.

In Abbildung sehen Sie drei <button>-Tag. Jedes dieser Tags dient einem anderen Zweck. Beachten Sie, dass ich zwei Zeilenumbruch-Tags verwendet habe, <br />, um genügend Abstand zwischen den Schaltflächen zu schaffen.

<button name="mysubmitbutton" type="submit">
	<b>Submit</b> Form
</button>
<br />
<br />
<button name="myresetbutton" type="reset">
	<u>Clear</u> Form Contents
</button>
<br />
<br />
<button name="mycustombutton" type="button">
	Verify <code>Data</code>
</button>

Verwenden weiterer Formularfeld-Elemente im HTML

Da Sie verschiedene HTML-Elemente in ein <button>-Tag integrieren können, ist das folgende Beispiel durchaus möglich:

<button name="myresetbutton" type="reset">
	<b>Clear</b> Form Contents
</button>

Wenn Sie das <b>-tag innerhalb einer Schaltfläche verwenden, erscheint das Wort "Clear" fettgedruckt.

Sie können auch Bilder einfügen, die auf den Schaltflächen erscheinen sollen. Geben Sie einfach das <img>-Tag zum Inhalt der Schaltflächen, wie im folgenden Beispiel, ein:

<button name="mysubmitbutton" type="submit">
	<img src="customimage.gif" width="50" height="10" />
</button>

Erstellung von umfassenden Texterfassungsfeldern mit <textarea>

Mit dem <textarea>-Tag erstellen Sie ein umfassendes Texterfassungsfeld, in dem Besucher so viel Text eingeben können, wie Sie es wünschen. Um ein solches Textfeld zu erstellen, beginnen Sie mit dem einleitenden <textarea>-Tag des Elementnamens und geben Sie dann die rows- und cols-Attribute ein, bevor Sie das Tag schließen. Diese obligatorischen Attribute definieren die Größe des Texterfassungsfelds in Zeilen und Spalten. Sie können auch eine hilfreiche Information, die im Texterfassungsfeld als Anfangswert erscheint, eingeben. Vergessen Sie am Ende nicht das abschließende </textarea>-Tag.

In Abbildung sehen Sie, das Ergebnis.

<p>
	Please comment on our customer service. 
	<textarea name="question4" rows="10" cols="60"> 
	Enter your answer here
	</textarea>
</p>

Verwenden weiterer Formularfeld-Elemente im HTML

Sie mögen sich fragen: "Aber wo ist denn das <isindex>-Tag?" Über das <isindex>-Tag erzeugen Sie, ähnlich wie die mit dem Typ text des <input>-Elements, ein einzeiliges Textfeld. Allerdings wurde es vom  World Wide Web Consortium (W3C) verworfen. Die Syntax ist <isindex prompt="prompt for user input">. Eine detaillierte Besprechung ist deshalb nicht notwendig.