HTML verstehen Teil 9: Das Formular II

HTML verstehen Teil 9:
Die Formularelemente

In diesem Artikel geht es um die Formularelemente. Ein Beispiel eines Formulars können Sie sich z.B. hier im Blog oben bei „Search“ anschauen. Dies ist einfach nur ein Eingabefeld und ein Übertragungsbutton. Ein OptIn-Formular können Sie z.B. http://marketer.blog.sybeklue.de/ebook-xampp-unabhaengigkeit-mit-eigenem-server/ anschauen. Benutzen Sie die Quelltextanzeige auf den Seiten, um zu sehen, wie das Formular aufgebaut ist. Suchen Sie im Quelltext einfach nach „<form“, dann finden Sie schon einiges.

Nachfolgend lernen Sie die einzelnen Tags zum Formular der Reihe nach kennen. Damit Sie nicht zu viel Blättern müssen, wende ich hier für die einzelnen Abschnitte, die Anker-Link-Technik aus dem 2. Kapitel über Links an. Sie können durch Klick auf die nachfolgenden Links die einzelnen Abschnitte schnell erreichen.[Interessierte können sich diese Technik ja mal im Quellcode anschauen, einfach nach „form“ suchen]

  1. <form>-Tag
  2. <input>-Tag
  3. <input>-Tag: Textfeld
  4. <input>-Tag: Checkbox
  5. <input>-Tag: Radiobutton
  6. <input>-Tag: Hidden
  7. <input>-Tag: Dateiupload
  8. <input>-Tag: Submitbutton
  9. <input>-Tag: Textareafeld
  10. <select>-Tag: Dropdownfelder
  11. Formulare mit CSS


Die Attribute des <form>-Tag

Ein Attribut hatten Sie ja im letztens Artikel schon kennen gelernt, das action-Attribut.
Mit action=“…….“ geben Sie dem Formular bekannt, wo es beim Absenden des Formulars auf dem Server seine Verarbeitung findet. Also z.B. das PHP-Programm, das die Adressen entgegennimmt und auf die Datenbank abspeichert. Geben Sie hier zur Sicherheit immer einen vollständigen Link beginnent mit http://… an! Sie tun sich leichter, wenn sie später einmal Ihre Seiten anders organisieren.

Sie sollten mit dem Attribut name=“…“ dem Formular einen Namen verpassen. Denn auf diesen Namen können Sie ggf. ein Javascript loslassen, das die Eingabe des Formulars analysiert und prüft.

Weiterhin müssen Sie dem Formular sagen, wie es seine Elemente übergeben soll. Hierbei geht es um die Formular-Inhalte, die an das auf dem Server liegende Programm übergeben werden, und wie dieses Programm die Daten erhält. Sie können hierbei die Übertragungsmethode get oder post wählen. method=“get“ übergibt die Formularinhalte über die URL an das Programm, während method=“post“ die Formularinhalte in eigenen nicht sichtbaren Variablen an das Programm übergibt.

Somit sind Sie immer auf der sicheren Seite, wenn Sie mit method=“post“ arbeiten.

Es gibt noch ein Attribut enctype in den meisten Fällen genügt es diesen auf den Wert enctype=“multipart/form-data“ einzustellen.
nach oben…


Die Attribute des <input>-Tag

Immer wenn Sie eine Eingabe vom Benutzer der Seite wollen und er einen Text oder etwas ankreuzen soll, können Sie die unterschiedlichen Typen des <input>-Tags benutzen.
Diese Anweisungen unterscheiden sich in dem Attribut type. Mit diesem Attribut wird gesteuert, was angezeigt werden soll.

Bei Texteingaben, können Sie die Größe der Eingabemaske mit size=“zahl“ bestimmen, wobei zahl hier die Anzahl der Zeichen in der Maske darstellt! Aber Sie können außerdem auch die Maximale Länge mit maxlength=“zahl“ definieren: Soviele Zeichen nimmt das Feld auf.

Bei Letzterem kann eine kleinere Länge angegeben werden, wenn das Feld voll ist, dann wird die Eingabe nach links verschoben. So können Sie in ein Feld mit size=“20″ die ersten 20 Buchstaben eingeben und wenn maxlength=“40″ ist, dann verschiebt sich die Eingabe nach links.

Jedem Input-Feld müssen Sie mit dem Attribut name=“…“ einen für das Formular eindeutigen Namen geben. Dieser Name stellt dann sowohl für die Inputprüfung den Namen der Javascript-Variablen als auch bei der Übergabe an das Hintergrundprogramm den Namen des Feldes an.

Falls Sie einem Feld vorab schon einen Inhalt geben wollen, dann können Sie das mit dem Attribut value=“….“ tun. Oft kommt es vor, dass man hier schon Standardwerte setzt.
nach oben…


Die Attribute des <input>-Tag TEXTFELD

Kommen wir nun zu den Typen des <input>-Tags. Hierbei haben wir zunächst den Typ
type=“text“. Hiermit bestimmen Sie eine Eingabemaske, in die der Kunde Werte eingeben kann.
Somit kann ein solches Input-Tag wie folgt aussehen:

<input type=“text“ name=“vorname“ size=“30″ />

Wie Sie sehen ist das input-Tag ein Tag ohne Endtag (es gibt kein </input>), deshalb schließt es mit “ />“ Und hier ist es in echt:

Sie können gerne in dieses Feld etwas eintragen, es macht nichts aus. Was aber wenn Sie in dieses Feld etwas eintragen:

Sieht komisch aus, nicht wahr? Hier ist der Tag, wie ich es geschrieben habe:

<input type=“password“ name=“vorname“ size=“30″ />

Mit dem type=“password“ können Sie Zeichen in Ihr Feld eintragen, diese werden aber wie in einem Passwort-Feld behandelt, wie sie sehen.

Es kann auch vorkommen, dass Sie das Feld auf dem Formular inaktiv schalten wollen. Der Kunde kann dann keine Eingaben in das Feld machen, obwohl es doch ein Formularfeld ist. Derartige „readonly“-Felder benutzt man, um dem Kunden zwar z.B. den Schlüsselbegriff eines Produktes anzuzeigen, er kann es aber nicht verändern.
Dazu dient das Attribut readonly=“readonly“

<input type=“text“ name=“vorname“ value=“Bernd“ readonly=“readonly“ />

Probieren Sie mal hier in dieses Feld etwas einzugeben, es wird nicht gehen.

Das Readonly-Attribut können Sie auf alle Formularfelder anwenden

Vergessen Sie aber bitte nie die Standardwerte name=“…“ und ggf. value=“….“
nach oben…

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar