Erstes Erscheinen: 14.11.1999

Formulare in HTML

von Thomas Salvador.

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

• Grundlagen
• Eingabefelder
  • einzeilige Eingabefelder

Grundlagen

Formulare werden durch den form-Tag gekapselt. Die allgemeine Form ist

<form method="post" action="URL">
  ...
  Formular-Elemente
  ...
</form>

Das Attribut method bestimmt die Methode, mit der das Formular an die URL weitergereicht wird. Mögliche Werte sind post und get. Welcher Wert nun zu nehmen ist, hängt von dem Programm ab, an das die Formulardaten übermittelt werden(siehe action). (Manche kommen mit beiden Arten klar, andere wurden nur auf eine Übergabeart programmiert und erfordern das dann natürlich auch so.

Das Attribut action bestimmt den Dienst und ggfs. die Datei oder das Programm, an die/das das Formular weitergereicht wird. Die Form des URL ist im Kapitel Verweise und Protokolle beschrieben.

Sämtliche Stile sind innerhalb der form Umgebung gültig, insbesondere kann - und dies wird besonders gern gemacht - vorformatierter Text benutzt werden.

Das Formular selber kann aus einzelnen Feldern zusammengesetzt werden. Als Formular-Elemente bietet HTML an:

Eingabefelder

Hier kann der Benutzer i.a. beliebige Eingaben vornehmen. Wir unterscheiden zwischen einzeiligen und mehrzeiligen Eingabefeldern.

Auswahl-Boxen

Hier kann der Benutzer aus einer angebotenen Menge von Möglichkeiten wählen. Wir unterscheiden zwischen Boxen zur einfachen Auswahl, wo der Benutzer aus der Menge genau eine auswählen kann, und zur mehrfachen Auswahl, wo der Benutzer aus der Menge auch mehrere (oder ggfs. auch keine) selektieren kann. Erstere eignen sich z.B. für single-choice-Fragen, letztere entsprechend für multiple-choice-Fragen.

Auswahl-Listen

Hier kann der Benutzer ählich wie bei Auswahl-Boxen wählen, die Möglichkeiten werden allerdings in einer Liste angeboten, was sich insbesondere für größere Mengen von Möglichkeiten eignet. Auch hier unterscheiden wir zwischen einfacher und mehrfacher Auswahl.

Kommandos

Ohne Kommandos zum Absenden des Formulars bzw. zum Rücksetzen der Felder wäre das ganze Formular ohne Nutzen.

Eingabefelder

Einzeilige Eingabefelder

Syntax und Beispiel:

<input name="einname" type="text" />

erzeugt eine Eingabezeile (type="text"). Die einzelnen Felder werden zur Unterscheidung benannt, damit das Programm, an das das ausgefüllte Dokument weitergeleitet wird, eine Zuordnung treffen kann. Achten Sie darauf, daß der Name in Gänsefüßchen eingeschlossen ist.

Das obige Beispiel erstellt ein irgendwie eingestelltes Eingabefeld. Wie es genau aussieht, hängt vom Browser ab. Es gibt einige Attribute bei input, mit denen man das Aussehen nach Bedarf anpassen kann:

size="XX"

Das Eingabefeld ist XX Zeichen breit.

maxlength="XX"

Die Eingabe kann bis zu XX Zeichen lang sein. Ist der für size eingestellte Wert kleiner als die Maximallänge, so wird im Eingabefeld bei Bedarf gescrollt.

value="..."

Der angegebene Wert wird als Vorgabe im Feld plaziert und kann editiert bzw. ersetzt werden. Achten Sie bitte darauf, daß der Wert in Gänsefüßchen eingeschlossen ist.

Beispiel:

<input name="einname" size="40" maxlength="80" value="Vorgabe" />

erzeugt ein Feld, daß als einname bekannt ist und 40 Zeichen breit dargestellt wird. Die mit "Vorgabe" vorbesetzte Eingabe kann bis zu 80 Zeichen lang werden.

Darüber hinaus gibt es einige Varianten dieses Eingabefeldes. Die Variante wird durch den Wert des type bestimmt:

type="text"

Dies ist das normale Textfeld, daß wir eben kennengelernt haben.

type="password"

Dieser Typ dient dazu, wie der Name vermuten läßt, um geheime Dinge eingeben zu lassen. Im Textfeld selbst werden stets nur Sternchen dargestellt. Damit wird verhindert, daß jemand über Ihre Schulter spicken kann.

type="hidden"

Dieser Typ nimmt eine Sonderstellung ein, da er kein Feld erzeugt. Man kann ihn vielmehr als eine reine Wertzuweisung auffassen.

<input type="hidden" name="id" value="dieseId" />

weist der Namen id den (festen) Wert dieseId zu. Damit kann man beispielsweise Werte setzen, die das Formular identifizieren, und muß den Benutzer nicht mit der Eingabe belästigen.

Beispiel:

<form method="post" action="irgendwas"> <pre>
  Name         : <input type="text" name="name" size="40" maxlength="80" />
  Anschrift    : <input type="text" name="an1" size="40" maxlength="80" />
                 <input type="text" name="an2" size="40" maxlength="80" />
  Passwort     : <input type="password" name="pwd" size="8" maxlength="8" />
</pre> </form>

liefert

    Name         : 
    Anschrift    : 
                   
    Passwort     : 
  

Die action ist hier in der Tat noch nicht interessant. Die Namen müssen (innerhalb des Formulars) eindeutig und sollten nicht allzu lang sein. Erlaubte Zeichen sind Buchstaben a bis z, A bis Z und Zahlen 0 bis 9.

Grundsätzlich sollten Sie sowohl die Darstellungsbreite als auch die maximale Länge angeben (was im Sinne eines "hübschen" Formulars wahrscheinlich sowieso gemacht wird).

Teil 2

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.