SELFHTML: HTML/XHTML / Formulare / Eingabefelder und Eingabebereiche

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Eingabefelder und Eingabebereiche
	Einzeilige Eingabefelder definieren Textvorbelegung bei einzeiligen Eingabefeldern Eingabefelder für Passwörter Mehrzeilige Eingabebereiche definieren Textvorbelegung bei mehrzeiligen Eingabebereichen Zeilenumbruch bei mehrzeiligen Eingabebereichen Eingabefelder und Eingabebereiche auf "nur lesen" setzen Weitere Informationen

Einzeilige Eingabefelder definieren

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Einzeilige Eingabefelder definieren</title>
</head>
<body>

<h1>Formular f&uuml;r Namenseingabe</h1>

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

</body>
</html>

Erläuterung:

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

Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Der vergebene Name wird bei CGI-Scripts benötigt, um auf die Daten des Eingabefeldes zugreifen zu können. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen mit size sowie die interne Feldlänge in Zeichen mit 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 zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).

Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" Tabelle.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Einzeilige Eingabefelder definieren</title>
</head>
<body>

<h1>Formular f&uuml;r Namenseingabe</h1>

<form action="input_text_tabelle.htm">
  <table border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="zuname" type="text" size="30" maxlength="40"></td>
    </tr>
  </table>
</form>

</body>
</html>

Erläuterung:

Das Beispiel zeigt das gleiche Formular wie im Beispiel weiter oben. Diesmal stehen jedoch Beschriftung und zugehöriges Formularfeld in je einer Tabellenzeile sauber nebeneinander. Die Beschriftungstexte werden dabei rechtsbündig ausgerichtet und erscheinen dadurch bündig zu den Eingabefeldern hin orientiert.

Wichtig ist, dass das form-Element außerhalb der Tabelle steht, oder andersherum, dass die Tabelle als Element innerhalb des Formulars notiert wird.

Beachten Sie:

Das <input>-Tag ist ein so genanntes Standalone-Tag. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das input-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <input ... />. Weitere Informationen finden Sie im Kapitel XHTML und HTML.

Mit Hilfe von JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. So können Sie zum Beispiel erzwingen, dass 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

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textvorbelegung bei einzeiligen Eingabefeldern</title>
</head>
<body>

<h1>Einfach &uuml;berschreiben...</h1>

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30" value="Michaela"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40" value="Mustermann"></p>
</form>

</body>
</html>

Erläuterung:

Mit dem zusätzlichen Attribut value können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird (value = Wert).

Eingabefelder für Passwörter

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Eingabefelder für Passwörter</title>
</head>
<body>

<h1>Nur nicht auf die Tastatur gucken lassen ... :-)</h1>

<form action="input_password.htm">
  <p>Kennwort:<br><input name="kennwort" type="password" size="12" maxlength="12"></p>
</form>

</body>
</html>

Erläuterung:

Eingabefelder für Passwörter werden mit type="password" im <input>-Tag definiert.

Beachten Sie:

Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin. Für eine verschlüsselte Kommunikation zwischen Browser und Server gibt es das HTTPS-Protokoll, das der Web-Server unterstützen muss. Fragen Sie gegebenenfalls Ihren Provider oder Webmaster danach.

Ein Passwortfeld in HTML ist keine Abfrage für geschützte Web-Seiten. Lesen Sie zu diesem Thema den Abschnitt über .htaccess - Server-Reaktionen kontrollieren.

Mehrzeilige Eingabebereiche definieren

Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mehrzeilige Eingabebereiche definieren</title>
</head>
<body>

<h1>Ganz spontan</h1>

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

<textarea ...> leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Jedes mehrzeilige Eingabefeld sollte ebenso wie ein einzeiliges Eingabefeld einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.

Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile).

Mit </textarea> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden - auch in XHTML sollte es immer separat geschrieben werden.

Beachten Sie:

Die Attribute rows und cols bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Die ist theoretisch unbegrenzt. Web-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit Scrollbalken aus, sodass der Anwender bei längeren Eingaben scrollen kann.

Textvorbelegung bei mehrzeiligen Eingabebereichen

Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mehrzeilige Eingabebereiche mit Text vorbelegen</title>
</head>
<body>

<h1>Schreiben Sie eine Geschichte!</h1>

<form action="textarea.htm">
  <p>Hier der Anfang der Geschichte:<br>
    <textarea name="user_eingabe" cols="50" rows="10">Es war dunkel, feucht und neblig ...</textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

Im Gegensatz zu den einzeiligen Eingabefeldern hat <textarea> kein value-Attribut. Um mehrzeilige Eingabefelder mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen den Tags <textarea> und </textarea>. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.

Beachten Sie außerdem, dass innerhalb von <textarea> keine weiteren HTML-Elemente erlaubt sind. Sämtliche Zeichen, die in HTML eine Sonderbedeutung haben, wie <, > und &, müssen zwingend als Entity <, > und & geschrieben werden (siehe Benannte Zeichen für HTML-eigene Zeichen).

Zeilenumbruch bei mehrzeiligen Eingabebereichen

Dies gehört nicht zum HTML-Standard, weil das W3-Konsortium wohl davon ausgeht, dass Text innerhalb eines mehrzeiligen Eingabebereichs bei der Eingabe automatisch umbrochen wird. Nicht so jedoch bei Netscape bis einschließlich Version 4.x. Dort wird automatisch quer gescrollt, solange der Anwender keine Return-Taste drückt, um eine neue Zeile zu beginnen. Um die Option des automatischen Zeilenumbruchs zu erlauben, hat Netscape seinerzeit ein Attribut eingeführt, um den Zeilenumbruch kontrollierbar zu machen. Der Internet Explorer interpretiert dieses Attribut ebenfalls. Aber wie es bei proprietären Sprachbestandteilen so ist - mittlerweile ist ein Wildwuchs an Wertzuweisungen entstanden. Und wenn Sie das Attribut verwenden, erzeugen Sie in jedem Fall ungültiges HTML.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Textumbruch in mehrzeiligen Eingabebereichen</title>
</head>
<body>

<h1>Brechen Sie um, aber nicht ab!</h1>

<form action="textarea_wrap.htm">
  <p>einmal soft:<br><textarea name="soft" cols="30" rows="3" wrap="soft"></textarea></p>
  <p>einmal hard:<br><textarea name="hard" cols="30" rows="3" wrap="hard"></textarea></p>
  <p>einmal physical:<br><textarea name="physical" cols="30" rows="3" wrap="physical"></textarea></p>
  <p>einmal virtual:<br><textarea name="virtual" cols="30" rows="3" wrap="virtual"></textarea></p>
  <p>und einmal off:<br><textarea name="off" cols="30" rows="3" wrap="off"></textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem nicht-standardisierten Attribut wrap können Sie den Zeilenumbruch steuern (wrap = Umbruch). Die folgenden Angaben sind "ohne Gewähr":
wrap="soft" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden an Stellen, wo der Text umbrochen ist, jedoch keine Zeilenumbruch-Zeichen übertragen.
wrap="hard" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden die Zeilenumbruch-Zeichen an Stellen, wo der Text automatisch umbrochen ist, übertragen.
wrap="virtual" wird vom Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="soft".
wrap="physical" wird vom Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="hard".
wrap="off" wird vom Internet Explorer ab Version 4.x, Opera ab Version 7, Netscape, Konqueror, Safari und Firefox interpretiert und ist gleichbedeutend mit der Voreinstellung von Netscape bis einschließlich Version 4.x - nämlich keinen Text automatisch umzubrechen.

Eingabefelder und Eingabebereiche auf "nur lesen" setzen

Sie können erzwingen, dass ein Eingabefeld kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld, und ein Eingabebereich nur ein Ausgabebereich. Das kann beispielsweise interessant sein, wenn Sie JavaScript-ermittelte Werte in einem Formularfeld ausgeben möchten, oder wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Eingabefelder und Eingabebereiche auf "nur lesen" setzen</title>
</head>
<body>

<h1>Kein Rabatt und keine Gnade</h1>

<form action="input_text_value.htm">
  <p>Preis:<br><input name="preis" type="text" size="8" value="&euro; 699.-" readonly></p>
  <p>Lizenzvereinbarung:<br>
    <textarea name="lizenz" cols="50" rows="10" readonly>Mit dem Absenden ...</textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut readonly können Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabebereich auf "nur lesen" setzen.

Beachten Sie:

Bei älteren Browsern funktioniert diese Angabe nicht, und der Feldeintrag ist für den Anwender überschreibbar!

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form readonly="readonly" notieren. Weitere Informationen dazu im Kapitel XHTML und HTML.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Input-Formularelemente (<input>)
Attribut-Referenz für Input-Formularelemente (<input>)
Element-Referenz für mehrzeilige Eingabebereiche (<textarea>...</textarea>)
Attribut-Referenz für mehrzeilige Eingabebereiche (<textarea>...</textarea>)


	Auswahllisten, Radio-Buttons und Checkboxen
	Formulare definieren

SELFHTML/Navigationshilfen HTML/XHTML Formulare