SELFHTML: HTML / Formulare / Einzeilige Eingabefelder

SELFHTML/Quickbar HTML Formulare

	Einzeilige Eingabefelder
	Einzeilige Eingabefelder definieren Textvorbelegung bei einzeiligen Eingabefeldern Eingabefelder für Paßwörter Eingabefelder auf "nur lesen" setzen Weitere Möglichkeiten

Einzeilige Eingabefelder definieren

Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl.

Anzeigebeispiel: So sieht's aus

Beispiel:

Ihr Spitzname: <input name="Spitzname" size=60 maxlength=60>
<br>
Ihr Lieblings-Star: <input type=text name="LieblingsStar" size=40 maxlength=40>
<br>
Ihre heimliche Leidenschaft: <input name="Leidenschaft" size=30 maxlength=60>

Erläuterung:

<input ... > definiert ein einzeiliges Eingabefeld (input = Eingabe). Der Vollständigkeit halber können Sie die Angabe type=text dazusetzen.

Jedes Eingabefeld muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Setzen Sie den Namen in Anführungszeichen.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen mit size= sowie die interne Feldlänge in Zeichen maxlength= bestimmen. Beide Angaben bedeuten die Anzahl Zeichen (size = Größe, maxlength = maximal length = maximale Länge). Wenn die interne Feldlänge maxlength größer ist als die angezeigte Feldlänge size (wie im dritten der obigen Beispiele), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).

Beispiel 2:

<form>
<table>
  <tr>
    <td align=right>Ihr Vorname:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr><tr>
    <td align=right>Ihr Zuname:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr>
</table>
</form>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer blinden Tabelle Beschriftung und Eingabefelder eines Formulars ordentlich formatieren können.

Beachten Sie:

Mit Hilfe von JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. So können Sie zum Beispiel erzwingen, daß in einem Eingabefeld eine Zahl in einem bestimmten Wertebereich eingegeben wird usw. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel Formulareingaben überprüfen.

Textvorbelegung bei einzeiligen Eingabefeldern

Anzeigebeispiel: So sieht's aus

Sie können ein einzeiliges Eingabefeld mit einem Inhalt vorbelegen.

Beispiel:

Ihre Lieblings-URL: 
<input name="LieblingsURL" maxlength=40 size=40 value="http://www.teamone.de/selfhtml/">

Erläuterung:

Eingabefelder mit vorbelegtem Inhalt werden wie gewöhnliche Eingabefelder definiert. Mit dem zusätzlichen Attribut value= können Sie einen Text angeben, mit dem das Feld vorbelegt wird (value = Wert). Der Text muß in Anführungszeichen stehen.

Eingabefelder für Paßwörter

Anzeigebeispiel: So sieht's aus

Für die Eingabe von Geheimnummern, Paßwörtern usw. gibt es einen speziellen Typ von Eingabefeld. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt, so daß Personen im Raum des Anwenders nicht zufällig das eingegebene Paßwort mitlesen können.

Beispiel:

Ihre Zugangsnummer: <input type=password name="Zugangsnummer" maxlength=10 size=10>

Erläuterung:

Eingabefelder für Paßwörter werden wie gewöhnliche Eingabefelder definiert. Mit der zusätzlichen Angabe type=password bestimmen Sie, daß es sich um ein Paßwort-Feld handelt.

Beachten Sie:

Paßwörter werden trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin.

Ein Paßwortfeld in HTML allein ist noch keine Abfrage für geschützte WWW-Seiten. Bitte kontaktieren Sie beim Wunsch, paßwortgeschützte WWW-Seiten anzubieten, Ihren Provider. Lesen Sie zu diesem Thema auch aufmerksam den Abschnitt WWW-Projekte publizieren.

Eingabefelder auf "nur lesen" setzen

Anzeigebeispiel: So sieht's aus

Sie können erzwingen, daß ein "Eingabefeld" kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld. Das kann beispielsweise interessant sein, wenn Sie JavaScript-ermittelte Werte in einem Formularfeld ausgeben möchten.

Beispiel:

<input name="Ausgabe" maxlength=10 size=10 readonly>

Erläuterung:

Mit dem Attribut readonly können Sie ein Eingabefeld (<input>) auf "nur lesen" setzen.

Beachten Sie:

Der MS Internet Explorer interpretiert diese Angabe seit Version 4.x, Netscape in der Version 4.x noch nicht.

Weitere Möglichkeiten

Das <input>-Tag kann Universalattribute enthalten.

Es ist durchaus auch erlaubt, CSS Style-Sheets auf Formularelemente anzuwenden. Leider interpretiert Netscape solche Möglichkeiten in der Produktversion 4.x noch nicht. Der MS Internet Explorer 4.x interpretiert CSS Style-Sheets im Zusammenhang mit Formularelementen. Dazu müssen Sie zunächst wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Auf das <input>-Tag können Sie beispielsweise folgende Style-Sheet-Angaben anwenden:
Schriftformatierung
Hintergrundfarben und -bilder
Elemente positionieren


weiter:	Mehrzeilige Eingabefelder
zurück:	Formulare definieren

SELFHTML/Quickbar HTML Formulare