Diese Lektion enthält eine Einführung in HTML-Formularelemente und deren Verwendung auf Webseiten. WordPress-Plugins helfen dir als Blogger normalerweise dabei, solche Formulare mit der Maus zu erstellen. Wir möchten jedoch verstehen, was dort passiert. Auf diese Weise kannst Du die von dir erstellten Formulare reparieren und verbessern.
Schauen wir uns zunächst an, wie ein Formular im Allgemeinen verwendet wird.
1 2 3 | <form action="mailto:user@domain.de" method="POST" enctype="text/plain"> <!-- Some input and/or button elements --> </form> |
Wie Du sehen kannst, heißt das betreffende Tag “form” und weist zwei sehr wichtige Attribute auf: “Action” und “Method”. Die Action ist dafür verantwortlich, was passiert, wenn ein Benutzer in deinem Formular auf die Schaltfläche “Senden” klickt. In dem oben gezeigten Fall werden die Formulardaten vom Webserver per E-Mail gesendet.
Wenn wir unser Wissen über serverseitiges Scripting mit PHP erweitern, werden wir jedoch sehen was wir tun können, wenn die Form-Action ein Ziel wie “target-script.php” enthält. Dann wird auch klar, worum es beim Method-Attribut geht. Denken wir vorerst nur daran, diese beiden Attribute nicht zu vergessen.
Innerhalb eines Formulars möchtest Du möglicherweise mindestens ein Text-Eingabefeld haben:
1 | <input type="text" name="name" value="Your name" /> |
Wenn für deinen Formularanwendungsfall keine anderen Arten von Benutzerdaten als Freitexteingaben erforderlich sind, bist Du fast fertig. Scrolle zum Ende dieses Artikels, um die Syntax deiner Senden-Schaltfläche zu erhalten, und Du hast dein fertiges Formular. Wenn Du noch etwas brauchst, lies einfach weiter.
Es gibt Fälle, in denen Du Benutzereingaben auf bestimmte vordefinierte Werte beschränken möchtest. Wenn Du möchtest, dass sie sich zwischen zwei oder mehr bestimmten Optionen entscheidet, verwende Radio-Buttons:
1 2 | <input type="radio" name="gender" value="m"/>male<br/> <input type="radio" name="gender" value="w"/>female<br/> |
Wenn der Benutzer die Möglichkeit haben soll, mehr als nur einen Eintrag gleichzeitig auszuwählen, verwende Checkboxen:
1 2 | <input type="checkbox" name="Fertigkeiten" value="1"/>Snowboarding<br/> <input type="checkbox" name="Fertigkeiten" value="2"/>Skiing<br/> |
Bitte beachte, dass der Benutzer möglicherweise “Snowboarding” sieht, das Ziel, an das dein Formular gesendet wird, jedoch nur “Fertigkeiten: 1” erhält, da der Wert für eine Checkbox mit dem Namen “Fertigkeiten” 1 ist. Dies gilt auch für alle anderen Eingabeelemente. Werte, die an das Formularziel übertragen werden, können sich von den vom Benutzer angezeigten Werten unterscheiden.
Wenn Du viele Daten anzeigen musst, während der Benutzer nur eine Auswahl hat, möchtest Du dein Formular möglicherweise nicht mit fünfzig Optionsfeldern überfluten. Du kannst stattdessen Dropdown-Menüs verwenden:
1 2 3 4 5 6 7 8 9 | <select name="Staat" size="1"> <option value="0" selected>Bitte wählen</option> <option value="1">Alabama</option> <option value="2">Alaska</option> <option value="3">Arizona</option> <option value="4">Arkansas</option> <option value="5">California</option> <!-- and so on --> </select> |
Hier ist es wichtig zu beachten, dass der Benutzer möglicherweise Text wie “Alabama” sieht, das Zielskript jedoch den Wert “1” für “Staat” erhält.
Warum ist das wichtig? Dies ist fortgeschritten, aber interessant zu wissen, wenn Du etwas erfahrener bist: Möglicherweise hast Du Fälle, in denen Du Dropdown-Listen dynamisch mit PHP basierend auf Datenbankinhalten erstellen möchtest.
Dieser Inhalt kann auch jederzeit geändert werden (dafür sind Datenbanken gedacht). Aber dann hast Du möglicherweise Einträge in deiner Dropdown-Liste, die im schlimmsten Fall alle gleich aussehen (denke beispielsweise an Nachnamen). Der Wert (“value”) ist jedoch unterschiedlich, da Du hier sicher eindeutige Schlüssel wie den Primärschlüssel der Datenbank-Tabelle verwenden möchtest, die immer eindeutig sind. Dann erkennt dein Zielskript den Unterschied zwischen allen Einträgen, selbst wenn sie für den Nutzer im Dropdown-Menü identisch sind. Natürlich solltest Du es dennoch vermeiden, in der Darstellung nicht eindeutig zu sein.
Manchmal möchtest Du, dass der Benutzer beim Tippen etwas Privatsphäre hat. Dazu kannst Du den Eingabetyp “Password” verwenden, wodurch anstelle des tatsächlich eingegebenen Textes Sterne oder Blasen angezeigt werden:
1 | <input type="password" name="entered_user_password"/> |
Es gibt auch Momente, in denen Du andere Daten an dein Ziel senden möchtest (beispielsweise ein PHP-Skript), auf die der Benutzer keinen Einfluss haben soll. Das Senden der IP-Adresse des Clients ist ein Beispiel für ein solches verstecktes Feld, das Du wie folgt verwenden kannst:
1 | <input type="hidden" name="sec" value="abc"/> |
Im letzten Schritt muss ein Formular gesendet und gelöscht werden können, was Du wie folgt bewerkstelligen kannst:
1 2 | <button type="submit" value="Submit">Submit</button> <button type="reset" value="Reset">Reset</button> |
Um zusammenzufassen, was wir bisher gelernt haben, könntest Du ein sehr einfaches HTML-Formular wie das folgende haben:
1 2 3 4 5 6 | <form action="mailto:user@domain.de" method="POST" enctype="text/plain"> <input type="text" name="name" value="Your name" /> <input type="radio" name="gender" value="m"/>male<br/> <input type="radio" name="gender" value="w"/>female<br/> <button type="submit" value="Submit">Submit</button> </form> |
Übrigens ist es eine gute Idee, Formulareingabeelemente mithilfe einer HTML-Tabelle im Formular zu strukturieren. Auf diese Weise stehen die Eingabefelder ordentlich untereinander. Damit ist diese Lektion abgeschlossen.