BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Formularelemente - Eingabefelder


Einzeilige Eingabefelder

Die Standardversion des Eingabefelds ist einzeilig. Man erzeugt es mittels des Tags:

<input type="text|password" name="sinnvolle Bezeichnung" size="n" maxlength="n">.

Es gibt kein schließendes Tag, außer in XHTML mittels " /". Der type="text" erklärt sich von selbst, der type="password" bewirkt die Umwandlung der Eingabe in Sternchen am Bildschirm, nicht jedoch bei der Datenübertragung.
Beim Attribut name sollte man darauf achten, dass die Bezeichnung etwas mit dem Inhalt des Felds zu tun hat, um das Erstellen und Lesen des Quelltexts allfälligen Bearbeitern zu erleichtern.
Mittels size gibt man die Länge des Eingabefelds am Bildschirm an, mit maxlength beschränkt man die Anzahl der Zeichen, die tatsächlich eingegeben werden können. Dies ist vor allem dann wichtig, wenn der Inhalt in ein Datenbankfeld gespeichert werden soll, das in seiner Länge begrenzt ist.

Eingabefelder können noch mit weiteren Attributen ausgestattet werden. So ergibt value="http://www." bereits eine Vorbelegung mit einem Teil-Url, sodass sich der Eingebende einen Teil der Arbeit sparen kann.
Mit Hilfe des Zusatzes readonly wird genau selbiges erreicht: Es kann nichts eingetragen werden, allerdings nicht in allen Browsern. Dann sollte allerdings mittels value eine Vorbelegung mit Inhalt erfolgt sein.

Mehrzeilige Eingabefelder

Diese erstellt man mit dem Tag

<textarea type="text" rows="n" cols="n" wrap="physical|virtual" name="..." value="..." readonly> </textarea>.

Das Attribut rows legt die Anzahl der angezeigten Zeilen, also die "Höhe", fest, während cols die Breite definiert, so wie bei <input> das Attribut width. Interessant ist das Attribut wrap: Wenn der User Text eingibt, bricht das Formular bei der Eingabe automatisch um. Steht die Wahl auf "physical", dann wird das bei der Email-Übertragung auch an diesen Stellen gemacht, bei "virtual" nicht.


Aufgabe 31

Öffne im Windows-Editor die Datei uebung21.asp und füge ein einzeiliges Texteingabefeld - size="30", maxlength="250", name="username" -, ein einzeiliges Passwortfeld - size="15", maxlength="15", name="userpass" - und ein mehrzeiliges Eingabefeld - rows="7", cols="50", name="nachricht" - ein. Speichere das Ergebnis als uebung22.asp mit dem <title> Formular 2 ab.