Eine Seitenvorlage mit einem Formular als Auswahlliste erstellen
Wie eine einfache Seitenvorlage als Template für statische Seiten erstellt wird, wurde auf der vorausgehenden Seite beschrieben. Auf dieser Seite soll nun das Erstellen einer benutzerdefinierte Seitenvorlage mit einem Formular als Auswahlliste ein wenig näher betrachtet werden.
Übersicht, Varianten und Code-Listings:
- Benutzerdefinierte Seitenvorlagen erstellen
- Eine Seitenvorlage mit Formular für Benutzereingaben (mit Auswertung der Eingaben)
- Formular als Auswahlliste mit Radio-Buttons (als Demo)
- Seitenvorlage zum Auflisten von statischen Seiten (als Übersichtsseite)
- Auflistung von statischen Seiten (Beispielseite)
In Webseiten eingebettete Formulare dienen im Allgemeinen den Besuchern einer Webseite zur Eingabe von Daten, gleich ob es sich dabei um die Übermittlung eines Suchbegriffs handelt, um einen Login-Vorgang oder um eine Online-Bestellung. In der Regel werden die in einem Formular eingegebenen oder ausgewählten Daten bei Betätigung des Submit-Buttons mit den HTTP Request-Methoden GET oder POST an einen Server übermittelt. Doch nicht in jedem Fall ist es erforderlich, die auszuwertenden Daten an einem Server zu senden.
Genügt eine clientseitige Auswertung, so kann die Auswertung und Verarbeitung der Daten mit Hilfe von JavaScript im Browser des Benutzers erfolgen, wobei die Seite weder verlassen noch neu geladen werden muss.
Im Beispiel auf dieser Seite wird bei Betätigung des Sende-Buttons durch den Event-Handler onsubmit zuerst die Funktion sendeDaten() aufgerufen, in der eine Auswertung und Verarbeitung der Daten erfolgt. Verlief diese Auswertung ohne Störungen, wird das Ergebnis mit Hilfe einer DOM-Methode und der Eigenschaft innerHTML ins Dokument geschrieben, vorausgesetzt es existiert ein für die Ausgabe vorgesehenes Element im Dokument.
Nach dem Aufruf der Funktion sendeDaten() liefert (entsprechend der Reihenfolge, an die sich soweit bekannt alle Browser halten) return als Rückgabewert false, woraufhin ein Abbruch erfolgt und kein Request mehr ausgeführt wird.
Die Auswertung der Daten erfolgt im Beispiel durch if-Statements und Switch-Case Fallunterscheidungen. Beides kann, ebenso wie das eigentliche Formular, beliebig erweitert und den jeweiligen Aufgaben angepasst werden. Mit den ersten if-Statements werden dabei die Werte von den Radio-Buttons ausgezählt und innerhalb der for-Schleife wird noch einmal überprüft, ob alle Auswahlmöglichkeiten vom Benutzer berücksichtigt wurden.
Die PHP-Funktion ist eigentlich nicht erforderlich und dient im Beispiel nur der Einrückung des im Editor von WP eingegebenen Textes in der Quelltextansicht. Etwas ungewohnt mag erscheinen, dass die Ausgabe des Formulars und des JavaScripts innerhalb einer While-Schleife erfolgt, doch da nur der Content für eine Seite abgerufen und ausgegeben wird, wiederholt sich die Ausgabe nicht.
Hinweise zum Anlegen und zur Auswahl von benutzerdefinierte Seitenvorlagen finden Sie auf der vorausgehenden Seite und in Kurzform noch einmal unterhalb des Listings.
Code-Listing Formular-Rechnen (page-rechnen.php):
<?php /** * Template Name: Formular-Rechnen * Description: Datei speichern unter page-rechnen.php, eine statische Seite antlegen und unter Attribute als Template Formular-Rechnen auswaehlen. */ function filtere_den_inhalt_vor_dem_formular($content){ if (is_page(565)) { $content = preg_replace("/\n/", "\n\t\t", $content); $content = preg_replace("/\t\t\z/", "", $content); } return $content; } add_filter("the_content", "filtere_den_inhalt_vor_dem_formular"); get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <article> <header class="entry-header"> <h1 class="entry-title"><?php the_title(); ?></h1> </header> <div class="entry-content"> <?php the_content(); ?> <blockquote> <div style="float:left; margin-bottom:38px"> <form name="eingabe" action="#" onsubmit="sendeDaten(); return false" method="get"> <p><strong>Arbeitszeit pro Tag:</strong><br /> <input type="radio" name="arbeitszeit" value="1" /> weniger als 8 Stunden<br /> <input type="radio" name="arbeitszeit" value="2" /> mehr als 8 Stunden</p> <p><strong>Arbeitstage pro Woche:</strong><br /> <input type="radio" name="arbeitstage" value="1" /> weniger als 3 Tage<br /> <input type="radio" name="arbeitstage" value="2" /> mehr als 3 Tage</p> <p><strong>Krankentage pro Jahr:</strong><br /> <input type="radio" name="krankentage" value="1" /> weniger als 20 Tage<br /> <input type="radio" name="krankentage" value="2" /> mehr als 20 Tage</p> <p><strong>Im Haushalt lebende Personen:</strong><br /> <input type="radio" name="personenimh" value="1" /> weniger als 2 Kleinkinder<br /> <input type="radio" name="personenimh" value="2" /> mehr als 2 Kleinkinder<br /> <br /> <input type="reset" value="Leeren"> <input type="submit" value="Senden" /></p> </form> </div> <div style="float:right; margin-bottom:38px"> Beschreibung und Codelisting unter: <br /> <br /> <a href="http://www.coder-welten.com/benutzereingaben-auswerten-und-verarbeiten/"> » Benutzereingaben auswerten und verarbeiten «</a> </div> </blockquote> <div id="ergebnis" class="braunpre" style="clear:both; background-color:#f8f7ea; border:1px solid #e2e2e2; padding:24px"> <em><strong>Ergebnis der Auswertung</strong></em></div> <script type="text/javascript"> "use strict"; function sendeDaten() { var rechne = 0; var pruefe = 0; var schreibe = false; var doc = document.eingabe; if (doc.arbeitszeit[0].checked == true) rechne += 1; else if (doc.arbeitszeit[1].checked == true) rechne += 2; if (doc.arbeitstage[0].checked == true) rechne += 1; else if (doc.arbeitstage[1].checked == true) rechne += 2; if (doc.krankentage[0].checked == true) rechne += 1; else if (doc.krankentage[1].checked == true) rechne += 2; if (doc.personenimh[0].checked == true) rechne += 1; else if (doc.personenimh[1].checked == true) rechne += 2; for (var i = 0; i <= 1; i++) { if (doc.arbeitszeit[i].checked != false) pruefe += 1; if (doc.arbeitstage[i].checked != false) pruefe += 1; if (doc.krankentage[i].checked != false) pruefe += 1; if (doc.personenimh[i].checked != false) pruefe += 1; } if (pruefe < 4) rechne = pruefe; switch (rechne) { case 4: schreibe = "Sie sollten erst einmal arbeiten lernen, bevor Sie an Urlaub denken."; break; case 5: schreibe = "Sie benötigen noch keinen zusätzlichen Urlaub."; break; case 6: schreibe = "Ihnen könnten einige zusätzliche Urlaubstage nicht schaden."; break; case 7: schreibe = "Einige zusätzliche Urlaubstage täten Ihnen gut."; break; case 8: schreibe = "Sie haben sich einige zusätzliche Urlaubstage redlich verdient und bitter nötig."; break; default: schreibe = "Die Eingabe war unvollständig!"; } document.getElementById("ergebnis").innerHTML = "<strong>"+ schreibe +"</strong>"; } </script> </div> </article> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
Benutzerdefinierte Seitenvorlage anlegen und verwenden
In Kurzform: Speichern Sie die Datei unter page-rechnen.php oder unter einem anderen Namen (der jedoch mit page- beginnen und mit .php enden muss) innerhalb ihres Themes. Legen Sie nun im Dashboard ihrer WordPress-Installation mit dem Editor von WP eine statische Seite an. Rechts neben dem Editor können Sie nun unter Attribute als Template das Template mit dem Namen Formular-Rechnen auswählen. Titel, einführender Text und Auszug kann dabei wie bei jeder anderen Seite im Editor von WordPress eingeben werden.
Mehr zum Thema benutzerdefinierte Seitenvorlagen unter:
Benutzerdefinierte Seitenvorlagen erstellen « / » Auflistung von statischen Seiten
