Eingabefelder
<input>
In diesem Kapitel werden die
einzeiligen Eingabefelder besprochen. Der Einsatz dieser Felder beschränkt sich auf die Eingabe von einem bis
wenige Wörter und Zahlen.
Um umfangreichere Texte zu schreiben, empfiehlt es sich ein
Eingabebereich (
<textarea (...)> </textarea>
, mehrzeiliges Eingabefeld) zu nutzen.
Folgende Möglichkeiten gibt es:
Innerhalb dieser Befehle können
bzw. müssen verschiedene Attribute gesetzt werden:
(fett geschriebene Attribute sind Pflicht)
-
type
-
name
-
value
-
size
-
maxlength
-
readonly
einfaches Eingabefeld
Hier ein Beispiel für ein einfaches Eingabefeld:
Quelltext-Auszug:
<input type="text" name="einfache-eingabefelder" size="20">
Das obige Beispiel zeigt ein einfaches Eingabefeld mit den Standardwerten.
Eingabefelder werden mit dem
HTML-Befehl
input
erstellt.
Darüber hinaus sind folgene Attribute zu setzen:
type="text"
Dieses Attribut definiert das Eingabefeld als ein einfaches Textfeld.
name="einfache-eingabefelder"
Die Angabe des
name
-Attributs ist bei Formularen mit mehreren Formularfeldern notwendig um die einzelnen Angaben zuordnen zu können. Dies gilt sowohl für Eingabefelder,
Eingabebereiche,
Auswahllisten usw.
Daher ist es wichtig, dass bei Nutzung mehrerer Formularfelder die Werte im
name
-Attribut stets unterschiedlich sind, da es sonst ein gleichnamiges Feld das vorhergehende Feld überschreibt.
Zum Beispiel:
Eingabefeld für die eMail-Adresse:
name="eMail"
Eingabefeld für die Website-Adresse:
name="Website"
Eingabebereich für eine Nachricht:
name="Nachricht"
usw.
size="20"
Mit diesem Attribut wird die Feldgrösse in Zeichen angegeben: Das obige Feld ist somit 20 Zeichen lang. Wenn mehr Zeichen geschrieben werden, wird im Feld nach links gescrollt.
↑
zum Seitenanfang ↑
Eingabefelder mit einer Textvorbelegung
Eingabefelder kann man auch schon mit einem Text vorbelegen:
Quelltext-Auszug:
<input type="text" name="eingabefeld-mit-textvorbelegung" value="Textvorbelegung" size="20">
Zu den bereits erklärten Attributen
type
,
name
&
size
kann das
value
-Attribut verwendet werden um einen bestimmten Text vorzugeben.
Häufig findet man dies bei Formularen, wo man seine Website-Adresse angeben kann. Das Textfeld ist dann meistens mit einem "http://" vorgegeben.
↑
zum Seitenanfang ↑
Eingabefelder mit einer Zeichenbeschränkung
Eingabefelder kann man mit einer Zeichenbeschränkung versehen:
Quelltext-Auszug:
<input type="text" name="eingabefeld-mit-zeichenbeschraenkung" size="20" maxlength="10">
Mit dem
maxlength
-Attribut kann man Eingabefelder mit einer Zeichenbeschränkung belegen.
Im oberen Beispiel hat das Eingabefeld die Grösse 20 (
size="20"
), aber eine maximale Zeichenlänge von 10 (
maxlength="10"
).
Man kann dies zum Beispiel bei einer Angabe der Postleitzahl nutzen:
Quelltext-Auszug:
<input type="text" name="Postleitzahl" size="10" maxlength="5">
↑
zum Seitenanfang ↑
Eingabefelder für Passwörter (Passwort-Felder)
Dieses Feld findest du sehr häufig auf verschiedenen Webseiten wie eMail-Anbietern, Foren
usw., wo man sich anmelden muss.
Dabei wird das Passwort nicht im Klartext, sondern (je nach Betriebssystem & Browser) in Sternchen oder Punkte dargestellt.
Quelltext-Auszug:
<input type="password" name="Passwort" size="20">
type="password"
Um ein Passwort-Feld zu erzeugen, wird anstatt
type="text"
(wie bei einem einfachen Eingabefeld), der Wert im Attribut
type
geändert:
type="password"
.
!!! Achtung !!!
Bei Nutzung eines solchen Passwortfeldes in einem Formular in Verbindung mit einer Übertragung mittels des normalen HTTP-Protokolls wird das Passwort im Klartext übertragen, auch wenn die Zeichen im Feld maskiert werden. Hierauf muss man den Anwender hinweisen.
Der Einsatz einer verschlüsselten Übertragung mittels HTTPS ist zu bevorzugen!
Beispiele für Formulare mit einem Passwortfeld findest du hier in diesem Workshop:
Das jeweilige Passwortfeld ist mit der Passwortfunktion des
Formmailers von
Onlex.de verknüpft.
↑
zum Seitenanfang ↑
Eingabefelder auf "nur lesen" setzen (nicht beschreibbar)
Eingabefeldern kann man die Eigenschaft geben, dass sie nicht beschreibbar, sondern nur lesbar sind.
Quelltext-Auszug:
<input type="text" name="eingabefeld-nur-lesbar" size="30" value="Diesen Text kann man nicht löschen! ;-)" readonly">
Mit dem Attribut
readonly
kann man beispielsweise in einem Eingabefeld Ergebnisse einer Rechnung als "nur lesbar" deklarieren.
↑
zum Seitenanfang ↑
versteckte Eingabefelder
Eingabefelder in einem Formular können auch versteckt werden. Sie haben einen Inhalt, den der Benutzer jedoch nicht sieht.
Quelltext-Auszug:
<input type="hidden" name="versteckes-eingabefeld" value="Dieses Feld sieht der Benutzer nicht">
Versteckte Eingabefelder können sehr vielseitig eingesetzt werden:
Möchte man
z.B. mehrere Formulare über den selben
Formmailer von
Onlex.de nutzen, weil sie an die selbe eMail-Adresse geschickt werden sollen, dann setzt man am Anfang jedes Formulars (also direkt nach dem einleitenden
<form ...>
-Befehl) ein verstecktes Eingabefeld um das Formular zu bezeichnen:
Quelltext-Auszug:
<input type="hidden" name="Formular" value="Kontaktformular von www.onlex.de">
Die Ausgabe zum obigen Beispiel sieht dann in etwa so aus:
[...]
Formular : Kontaktformular von www.onlex.de
[...]
Dieses Attribut wurde in den Praxisbeispielen dieses Workshops verwendet:
↑
zum Seitenanfang ↑