HTML verstehen Teil 9: Das Formular IV

Fortsetzung von Teil 9. Hier beginnt der Artikel!

Zurück zur Auswahl…

<input>-Tag: hidden

Nehmen Sie an Sie haben ein Produkt und wollen es verkaufen, hierzu fertigen Sie ein Formular an, wo der Kunde seinen Vornamen und seine Email eintragen soll. Im Hintergrund wartet ein Programm, das das Formular annimmt und auf Ihre Datenbank speichern soll.
Dummerweise haben Sie jetzt aber nicht nur ein Produkt sondern mehrere. Wie soll jetzt das Hinterprogramm wissen zu welchem Produkt der Kunde gehört? Gut, Sie können ein Feld anbieten, wo der Kunde eine Produktnummer anbietet. Aber wenn Sie ein Produkt mit der Nummer 1 haben, kann der Kunde auf die Idee kommen, mal eine 2 einzugeben! Wollen Sie das?

Mit dem Attribut hidden, können Sie Formular-Variablen definieren, die nicht angezeigt werden. Sie können das Attribut nutzen um, dem Hintergrundprogramm mitzuteilen, dass es bei erfolgter Zahlung, doch bitte die Seite „….danke_produkt1.html“ anzeigen soll. Im Quelltext sieht man zwar diese html-Attribute, aber Sie haben doch genügend Phantasie, um diese Angaben nicht zu offensichtlich werden zu lassen, oder?

Sie können nahezu beliebig viele hidden-Formular-Variablen definieren. Dies geht mit der folgenden Anweisung

<input type=“hidden“ name=“xxxx“ value=“yyyy“ />

Sie geben hier den Namen und den Wert der Variablen vor. Das Hintergrundprogramm wird diese Namen erhalten und damit umgehen können 🙂

Zurück zur Auswahl…

<input>-Tag: Dateiupload

Ja Sie können mit einem Formular auch einen Upload von Dateien anstoßen. Der Browser meldet sich in diesem Fall mit dem gewohnten Windows Dateidialog, denn die Datei wird von Ihrem PC auf eine temporäre Datei im Webspace geladen. Mit

<input type=“file“ name=“xxx“ />

meldet sich ein „zweifacher Dialog“ mit dem Sie die Datei zunächst suchen können und dann beim Absenden des Formulars die Datei hochgeladen wird. Das Inputfeld sieht dabei so aus:

Wie gesagt, die Datei wird vom PC in eine temporäre Datei Ihres Webspaces geladen. Dann muss das Hintergrundprogramm diese Datei aus dem temporären Speicher in eine Datei in IHREM Webspace schieben. Dazu hat z.B. ein PHP-Hintergrundprogramm eigene Funktionen.
Zurück zur Auswahl…

<input>-Tag: Submitbutton

Alle Eingaben in die unterschiedlichen Felder können Sie bzw. Ihr Leser tun, aber es wird erst dann etwas passieren, wenn Sie das Formular auch absenden. Erst wenn das Hintergrundprogramm gerufen wird, kann es arbeiten. Und die einzige Möglichkeit dem Programm Arbeit zu geben ist das Formular zu senden.
Dazu gibt es den Type submit. Durch klicken auf diesen Button, wird der Link der im &ltform&gt-Tag als action= steht angesprungen und die Verarbeitung kann beginnen.

Es gibt mehrere Möglichkeiten für ein Absenden des Formulars: Die einfachste ist:

<input type=“submit“ value=“Senden“ />

Hier in echt:

Den relativ simplen Button können Sie mittels des value-Attributs beschriften. Es wird der Windows-Button dargestellt, wie er auch sonst im Windows mit Ihrer Einstellung dargestellt wird. Langweilig nicht wahr?
Es gibt noch eine weitere Darstellungsmöglichkeit mit einer Grafik:

<input type=“image“ name=“submit“ src=“http://marketer.blog.sybeklue.de/images/firefox_logo.jpg“ width=“30″ height=“30″ alt=“text im Button“ />

Wie Sie sehen ist hier das Firefox Logo als Button verwendet worden. Dazu geben Sie im src-Attribut den Link auf das Bild an und Sie können mit width und heigth die Breite und die Höhe des Bildes in Pixeln wählen.

Zurück zur Auswahl…

<textarea>-Tag:Textareafeld

Das normale input-Feld haben Sie ja oben kennengelernt. Mit einem sog. Textareafeld können Sie das input-Feld auf mehrere Zeilen erweitern. Hier können Sie fast beliebiglange Texte eingeben. Wenn Sie einen Blog haben, dann stellt der Bereich, wo Sie im WordPress Ihren Artikel eingeben ein derartiges Textareafeld dar.
Fehlt nur noch wie man eine Textarea in HTML angibt:

<textarea name=“xxx“ cols=“sss“ rows=“zzz“>
Hier kommt der Inhalt
</textarea>

Dabei sollte natürlich wieder das name-Attribut vergeben werden. Das Attribut cols=“sss“ gibt die Breite in Buchstaben an, und das Attribut rows=“zzz“ die Anzahl der Zeilen, die ohne Scrollen angezeigt werden. Werden mehr als zzz Zeilen eingeben, erscheint ein rechter Scrollbalken, mit dem Sie die Sichtbarkeit verschieben können.

Achtung: Innerhalb eines <textarea>-Tags werden keine anderen HTML-Codes angenommen! D.h. Alle Zeichen wie < und > und & müssen als Ersatzzeichen geschrieben werden. (&lt, &gt; &)
Ein value-Attribut hat das <textarea>-Tag nicht
Sie können mit dem Attribut readonly=“readonly“ auch bei diesem Feld eine Eingabe verhindern.

Ist Ihnen was aufgefallen? Der Inhalt der Textarea wird zwischen <textarea> und </textarea> angezeigt. Wenn Sie sich jetzt vorstellen, die wollen diesen Text aus einer Datenbank holen und anzeigen, dann haben Sie mit reinem HTML keine Chance dazu. Sie müssen sich überlegen, wie es das Hintergrundprogramm, das ja die Datenbank kennt, es schafft, den Inhalt der Datenbank zu lesen und Ihnen diesen Inhalt für Ihr Textfeld bereitstellt.

Tipp das geht nur wenn Sie auf dieser Seite dann auch via PHP-Programm eine PHP-Variable füllen und hier zwischen den beiden Tags anzeigen.!
Ich habe Ihnen ja schon erklärt, dass die richtige Formulardarstellung auch das Vorhandensein von PHP im Hintergrund, jetzt sogar im „Vordergrund“ erfordert.

Zurück zur Auswahl…

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar