brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Formulare in HTML

von Thomas Salvador.

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

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 ggf. 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 ggf. 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, dass 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, dass der Wert in Gänsefüßchen eingeschlossen ist.

Beispiel:

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

erzeugt ein Feld, dass 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, dass wir eben kennengelernt haben.
type="password"
Dieser Typ dient dazu, wie der Name vermuten lässt, um geheime Dinge eingeben zu lassen. Im Textfeld selbst werden stets nur Sternchen dargestellt. Damit wird verhindert, dass 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 muss 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

Ausgabe auf Ihrem Browser
    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 weiter

Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

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

zurück zum Inhaltsverzeichnis der 12. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/57.html .