HTML und XHTML

Formulare

Text Input

eine Zeile

Das erste Element, das wir im Zusammenhang mit Formular-Eingaben kennen lernen, heisst <input>. (Na, das kann man wenigstens im Kopf behalten.)

Du wirst feststellen, dass fast alle Eingabefelder <input>-Elemente sind. Wenn sie sich voneinander unterscheiden, dann wird das mit dem Attribut type gesteuert. Ein Eingabefeld zum Beispiel ist ein <input>-Element vom Typ text oder korrekter ausgedrückt: ein <input>-Element, dessen type-Attribut den Wert text hat.

Übung 47

Auf unserem Formular, mit dem die Besucher ihre eigenen Lieblingsrezepte einsenden können, wollen wir als erstes ein Feld für den Namen einrichten, damit die Rezepte nicht anonym bleiben.

Erstelle also im Formular, das du auf der Seite submit.html eingerichtet hast, einen Absatz (mit <p>) und darin ein Text-Eingabefeld.

Denk daran, das <p>-Element zu schliessen und das <input>-Element mit " />" abzuschliessen, da es sich hierbei um ein leeres Element handelt.

Hier ist das Resultat, das dabei herausgekommen sein sollte:

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

Oh ja, und noch was: Natürlich ist das, was unsere Besucher hier eintippen, wichtig. Also sollten wir dafür sorgen, dass es dann auch richtig weiter verwendet wird. Wir sollten daher jedem Eingabefeld auch einen Namen geben, damit wir die verschiedenen Einträge später auch wieder auseinander halten können.

Das <input>-Element kennt daher auch das Attribut name und ich schlage daher vor, dass du es entsprechend ergänzt. Der Name, den du angibst, ist grundsätzlich frei wählbar, ich rate dir aber davon ab, Leerschläge und Sonderzeichen zu verwenden. Wir möchten das Feld eventuell mit Javascript oder einer andern Sprache weiter verwenden, und die meisten dieser Sprachen kennen irgendwelche Regeln, denen solche Namen genügen sollten. In unserem Fall bietet sich "von" als Name an, da das Feld den Namen der Person enthält, von der das Rezept stammt. Damit erweitert sich unser Formular geringfügig und sieht nun so aus:

<form>
<p><input type="text" name="von" /></p>
</form>

Homepapa
MÃ¤rz 2004

Vorheriger Abschnitt:
Text Input

NÃ¤chster Abschnitt:
GEHEIM