Formularfelder werden genauso wie alle anderen HTML-Elemente mithilfe von Tags definiert. Wenn Sie beispielsweise auf einer Webseite an der Position der Schreibmarke ein einzeiliges Textfeld einfügen, indem Sie in der Toolbox unter der Kategorie Formularsteuerelemente einen Doppelklick auf Eingabe (Text) ausführen, wird der Code der Webseite um das folgende Tag erweitert:
<input name="Text1" type="text" />
Wie Sie sehen, wird ein einzeiliges Textfeld mit dem Tag <input> definiert. Ein wichtiges Attribut dieses Tags heißt type. Mithilfe dieses Attributs wird das Formularfeld genau spezifiziert. In unserem Fall ist dem type-Attribut der Wert text zugewiesen, der Aufschluss darüber gibt, dass es sich bei dem Formularfeld um ein einzeiliges Textfeld handelt.
Formularfelder besitzen, wie alle HTML-Elemente, bestimmte Eigenschaften, die im Aufgabenbereich Tageigenschaften angezeigt werden. Wenn Sie das soeben eingefügte einzeilige Textfeld markieren, finden Sie in dem Aufgabenbereich solche Eigenschaften wie size oder value. Mithilfe der value-Eigenschaft geben Sie beispielsweise an, welcher Text im Textfeld vorgegeben werden soll, wenn ein Besucher die Webseite aufruft.
Blättern Sie den Aufgabenbereich nach unten, und klicken Sie in das Feld rechts neben der value-Eigenschaft, um einen Eigenschaftswert anzugeben. Geben Sie den Text Willkommen ein, wie in Abbildung 9.10 dargestellt, und drücken Sie die Return-Taste.
Abbildung 9.10 Weisen Sie der value-Eigenschaft einen Wert zu
Wenn Sie nun einen Blick auf das einzeilige Textfeld werfen, werden Sie feststellen, dass der Text Willkommen darin enthalten ist. Ein künftiger Besucher der Seite würde diesen Text somit sehen und könnte ihn mit einem anderen Text überschreiben.
Sie können die Eigenschaften von HTML-Elementen (wozu ebenfalls Formularfelder zählen) aber nicht nur manuell, sondern auch mit JavaScript-Code festlegen. Die dazu notwendige Vorgehensweise lernen Sie später in diesem Kapitel kennen. Die folgenden Abschnitte beschreiben ausführlich die in Tabelle 9.2 aufgeführten Formularfelder.
Schaltflächen
Wenn Sie in der Toolbox unter der Kategorie Formularsteuerelementeeinen Doppelklick auf dem nebenstehend abgebildeten Symbol Eingabe (Schaltfläche) ausführen, wird eine Schaltfläche in das HTML-Dokument an der Position der Einfügemarke eingefügt.
Wenn ein Besucher auf eine Schaltfläche klickt, die sich auf Ihrer Webseite befindet, können Sie mit JavaScript-Anweisungen auf dieses Ereignis reagieren, was später in diesem Kapitel beschrieben wird. Schaltflächen werden vorwiegend in Verbindung mit anderen Objekten, wie z.B. Text-, Listen-und Optionsfeldern, auf einer Webseite verwendet. Der Besucher zeigt mit einem Klick auf die Schaltfläche an, dass er alle erforderlichen Einstellungen und Eingaben vorgenommen hat und diese Daten nun von Ihrem Skript verarbeitet werden können.
Die wichtigsten Eigenschaften einer Schaltfläche, die Sie im Aufgabenbereich Tageigenschaften bestimmen und verändern können, sind size, type und value. Mit size bestimmen Sie die Größe (in Zeichen), in der die Schaltfläche im HTML-Dokument angezeigt werden soll. Die Eigenschaft type bestimmt den Typ der Schaltfläche. Wenn Sie dieser Eigenschaft den Wert submit zuweisen, kann die Schaltfläche später von dem Besucher nicht nur durch Anklicken, sondern ebenfalls durch einen Druck auf die Return-Taste aktiviert werden. Wenn Sie sich für den Wert reset entscheiden, kann der Besucher die Schaltfläche ebenfalls mit der (Esc)-Taste aktivieren. Die Voreinstellung button führt dazu, dass eine Aktivierung der Schaltfläche nur mit einem Mausklick darauf möglich ist. Mithilfe der Eigenschaft value bestimmen Sie die Beschriftung der Schaltfläche.
Zurücksetzen-Schaltflächen
Wenn Sie in der Toolbox unter der Kategorie Formularsteuerelemente einen Doppelklick auf dem nebenstehend abgebildeten Symbol ausführen, wird eine Zurücksetzen-Schaltfläche in das HTML-Dokument an der Position der Einfügemarke eingefügt.
Eine Zurücksetzen-Schaltfläche gleicht einer gewöhnlichen Schaltfläche mit der Ausnahme, dass die Eigenschaft type auf reset gesetzt ist. Dies bedeutet, dass der Besucher die Schaltfläche später mit einem Mausklick darauf oder mit einem Druck auf die (Esc)-Taste aktivieren kann. In Formularen wird diese Schaltfläche häufig verwendet, um die Formularfelder in den ursprünglichen Zustand zurückzuversetzen. Dies ist beispielsweise dann notwendig, wenn der Benutzer feststellt, dass er fehlerhafte Eingaben oder Einstellungen vorgenommen hat.
Absenden-Schaltflächen
Wenn Sie in der Toolbox einen Doppelklick auf dem nebenstehend abgebildeten Symbol ausführen, wird eine Absenden-Schaltfläche in das HTML-Dokument an der Position der Einfügemarke eingefügt.
Eine Absenden-Schaltfläche gleicht einer gewöhnlichen Schaltfläche mit der Ausnahme, dass die Eigenschaft type auf submit gesetzt ist. Dies bedeutet, dass der Besucher die Schaltfläche später mit einem Mausklick darauf oder mit einem Druck auf die Return-Taste aktivieren kann. In Formularen wird diese Schaltfläche in der Regel verwendet, um die Inhalte der Formularfelder an den Webserver zu übermitteln, wo sie mithilfe von Programmcode ausgewertet werden können. Dies ist beispielsweise dann notwendig, wenn der Benutzer in ein Textformularfeld eine Artikelnummer eingegeben hat, nach der die Produktdatenbank auf dem Webserver durchsucht werden soll.
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt