Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex auf Twitter verwenden

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)

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:

Postleitzahl: (maximal 5 Zeichen)

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 ↑



© 2002 - 2022 · www.onlex.de - HomepageTools | Impressum | Sitemap