Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Forms > Lektion05

Web Formulare

Kapitel 5 - Eingabefeld (Teil 2)

Feldgröße

Die angezeigte Breite des Eingabefeldes kannst du mit dem Attribut size festlegen:

<form>
<input type="text" name="Familienname" value="Schmidt"

       size="10">
</form>

Der Wert 20 ist bei den meisten Browsern der Vorgabe-Wert (Default). Ein Vorgabe-Wert wird verwendet, wenn kein Wert angegeben ist.

und noch ein höherer Wert:

Hinweis:
Ein Eingabefeld wird nicht von allen Browsern in der gleichen Größe angezeigt. Normalerweise ist das unproblematisch. bei einem kompizierten Formular kannst du das Layout durch Verwenden einer Tabelle unterstützen. Dabei solltest du für einen logischen Aufbau der Tabelle zusammengehörende Elemente - wie beschreibender Text und zugehöriges Eingabefeld - in die selbe Tabellenzelle schreiben. Dieses Vorgehen hilft auch Menschen mit Behinderungen den Inhalt der Seite logisch zusammenhängend zu erfassen.
Ein Test der eigenen Seite mit verschiedenen Browsertypen und -versionen sollte immer selbstverständlich sein.


Eingabelänge begrenzen

Man kann die maximale Anzahl der Zeichen, die ein Benutzer eingeben kann, begrenzen. Ich verzichte ab hier wieder auf den Vorgabewert aus dem letzten Kapitel.

Versuche doch mal in einem obigen und im folgenden Beispiel mehr als 10 Zeichen einzugeben.

<form>
<input type="text" name="Familienname" size="30"
maxlength="10">
</form>

Es ist keine schlechte Idee maxsize zu verwendet. Zwar ist es unwahrscheinlich, aber es könnte ein Benutzer auf die Idee kommen einen ganzen Roman in ein Eingabefeld einzugeben ...


Eingabefelder auf "nur lesen" setzen

Hinweis:
Diese Eigenschaft gibt es seit der HTML-Version 4; der IE kennt sie ab Version 4 und Netscape unterstützt sie bisher gar nicht!
Meine Empfehlung: Nicht verwenden.
Ich will diese Eigenschaft aber trotzdem vorstellen, manchmal macht sie Sinn.

Du kannst erzwingen, dass ein "Eingabefeld" kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld. Das klingt zwar ein erst mal unlogisch kann aber sinnvoll sein, wenn das Textfeld z.B. Ergebnisse aus einer Berechnung mit Javascript aufnehmen soll.

Hinweis:
Mit Unterstützung des JavaScript-Ereignisses onfocus gibt es eine browserunabhängige Lösung, die ich ins Beispiel mit einbaue: onfocus="this.blur()".

<form>
<input type="text" name="Familienname" size="30"
readonly="readonly" onfocus="this.blur()" value="Versuche diesen Text zu ändern !" />
</form>

Zurück Eingabefeld Zum Inhaltsverzeichnis Inhalt Weiter Passwort-Eingabefeld