Erstes Erscheinen: 14.11.1999

Formulare in HTML-2

von Thomas Salvador.

Teil 1

Dieses Tutorial erläutert ausgiebig Formulare in HTML. Sie werden hier alles Wesentliche dazu lernen.

Mehrzeilige Eingabefelder

Bislang waren alle Eingabefelder einzeilig. Es besteht aber auch die Möglichkeit, ein mehrzeiliges Feld zur Verfügung zu stellen, praktisch einen kleinen Editor:

<textarea name="einname" cols="XX" rows="XX">
Voreingestellter Text
</textarea>

cols legt die Breite des Feldes in Zeichen und rows entsprechend die Höhe in Zeilen an. Üblicherweise stellt der Browser das Feld mit Scrollbars dar, die die Eingabe und das Scrollen durch längere Ausführungen erlauben. Der durch textarea gekapselte Text, sofern vorhanden, wird als voreingestellter Text in das Feld aufgenommen.

Hinweis: Üblicherweise wird der Text in einem (einzeiligen) Feld in Proportionalschrift, in einem mehrzeiligen Feld in Schreibmaschinenschrift dargestellt. Daher meinen gleiche size und cols Werte oft verschiedene Breiten.

Obiges Beispiel (Ausschnitt) können wir also nun etwas eleganter darstellen:

Beispiel:

<form method=post action="irgendwas"> <pre>
  Name         : <input name="name" size="40" maxlength="80" type="text" />
  Anschrift    :
                 <textarea name="an" cols="40" rows="2"></textarea>
</pre> </form>

liefert

    Name         : 
    Anschrift    :
                     

Hier ist es nun für den Benutzer möglich, umfangreichere Angaben zu machen, etwa neben Straße und Ort noch Postfach oder Land oder sonstwas anzugeben.

Das Gestalten von Formularen ist manchmal gar nicht so einfach, wenn es gut aussehen soll. Da muss man halt solange probieren, bis es so erscheint, wie es soll. Setzt man bspw. den textarea-Block in dieselbe Zeile wie Anschrift, so wird häufig der Label (Anschrift) an der unteren Begrenzung des Feldes ausgerichtet, was genauso ungünstig aussieht.

Nützlich sind hier oft Tabellen, die darüber hinaus auch noch das Problem der bündigen Ausrichtung ohne Vorformatierung lösen können:

Beispiel:

<form method="post" action="irgendwas">
<table>
<tr><td>Name</td>
<td><input name="name" size="40" maxlength="80"
    type="text" /></td></tr>
<tr><td valign="top">Anschrift</td>
<td><textarea name="an" cols="40" rows="2"></textarea></td></tr>
</table> </form>

liefert (wenn der Browser des Benutzers den valign unterstützt)

Wenn valign nicht ausgewertet wird, so wäre Anschrift normalerweise zentriert neben dem Zelle, auch nicht so schlecht. Man kann hier seiner Phantasie (fast) freien Lauf lassen.

An den gebrachten Beispielen kann man erkennen, dass die Feldnamen tatsächlich lokal zum Formular gültig sind, also gleichbenannte Felder in anderen Formularen nicht beeinflussen. (Wir hatten z.B. beidesmal an benutzt. Auch wenn Sie in einem der beiden etwas eingeben, bleibt das andere unverändert.)

Teil 1

Teil 3

Verwandte Artikel und Seiten

• Tabellentutorial
• HTML für Fortgeschrittene
• HTML für Einsteiger
• Verweise und Protokolle in HTML
• weitere HTML-Artikel

Copyright © 1999-2010 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei 1 und 1.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.