HTML - Elemente - Formulare - Textfelder
1. <input type="text">
Dies ist ein einzeiliges Eingabefeld und wird für kurze Inhalte genutzt. Die klassische Anwendung
ist die Erfassung von Adressdaten in mehreren <input>-Feldern. Da es sich dabei um ein so genanntes "singuläres"
Tag handelt, gibt es hier je nach DTD zwei Schreibweisen. Die Syntax sieht dann so aus:
<!-- HTML 4 -->
<input type="text" name="feldname">
<!-- XHTML 1 -->
<input type="text" name="feldname" />
name
Dieses Attribut muss immer angegeben werden, damit ein serverseitiges Script den Inhalt des Feldes verarbeiten kann.
maxlength
Hiermit kann man die maximale Anzahl von Zeichen festlegen, die der Anwender in das jeweilige Feld eingeben darf.
<!-- Maximal 30 Zeichen -->
<input type="text" name="feldname" maxlength="30" />
value
Legt eine Vorbelegung des Inhalts fest. Die ist besonders praktisch, wenn man zum Beispiel serverseitig
Pflichtfelder überprüfen möchte, gleichzeitig aber dem Anwender nicht zumuten will, bei einem Fehler alle Angaben neu
einzutippen. In diesem Fall wird der Wert des value-Attributs per Programmierung gesetzt.
<!-- Ihr Name erscheint im Feld -->
<input type="text" name="feldname" value="Ihr Name" />
size
Legt die Breite eines Eingabefeldes fest. Laut SelfHTML soll man diese Angabe unbedingt benutzen. Allerdings bin ich und wohl auch etliche Andere der Meinung, dass es sich hierbei um eine optische Auszeichnung mittels HTML handelt und stattdessen besser per CSS festgelegt wird.
<input type="text" name="feldname" size="30" />
readonly, disabled
Damit können die vorgegebenen Werte eines Feldes nicht mehr geändert werden. Der Unterschied zwischen beiden Attributen ist
folgendermaßen. Bei readonly bleiben alle Funktionalitäten eines <input>-Elementes erhalten. Man kann
es per Tabulator-Taste ansteuern, der Wert wird übertragen, man kann einen accesskey festlegen, nur kann man
nicht den Inhalt ändern.
Bei disabled dagegen geht gar nichts mehr. Kein tabindex, keine accesskey und die Daten
werden auch nicht übertragen. Wichtig ist hier wieder, dass es je nach DTD zwei Schreibweisen gibt.
<!-- HTML 4 -->
<input type="text" name="blubb" value="Bla" disabled>
<input type="text" name="blubb" value="Bla" readonly>
<!-- XHTML 1 -->
<input type="text" name="blubb" value="Bla" disabled="disabled" />
<input type="text" name="blubb" value="Bla" readonly="readonly" />
2. <input type="password">
Funktioniert genau wie ein text-Typ des <input>-Elements. Allerdings wird die Angabe nicht angezeigt, sondern
nur dicke Punkte. Wie bei Passworteingaben halt üblich.
<!-- HTML 4 -->
<input type="password" name="pw">
<!-- XHTML 1 -->
<input type="password" name="pw" />
3. <textarea>
Dies ist ein mehrzeiliges Eingabefeld. Es wird immer benutzt, wenn man viel Inhalt in einem Feld erfassen
mochte, also Anfragen, Kommentare oder Mitteilungen. Allerdings unterscheidet sich die Syntax sehr stark vom
<input>-Element und sieht so aus:
<textarea name="blubber">Hier kommt der Inhalt</textarea>
Der Inhalt steht also zwischen dem öffnenden und dem schließenden Tag. Darüber hinaus kann man auch noch die Größe festlegen.
Im Gegensatz zu size bei <input>-Elementen sind hier die Angaben laut Spezifikation aber definitiv vorgeschrieben.
rows, cols
rows legt die Anzahl der angezeigten Zeilen fest und cols die Breite, also genauer gesagt, die
Anzahl von Zeichen in einer Zeile.
<textarea name="blubber" rows="10" cols="10">Hier kommt der Inhalt</textarea>
name
Muss wie bei den input-Textfeldern auf jeden Fall gesetzt werden, damit die Daten übertragen
und ausgewertet werden können.
readonly, disabled
... können auch hier eingesetzt werden.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt