Beispiel zu Affenformular

webmaster3000 · 11. Oktober 2011

Hallo an alle,

hier ein Beispiel für ein gut funktionierendes Affenformular.

PHP

<?php
    if ((isset($_POST['name'])) and (isset($_POST['anfrage']))){
        $name = htmlentities($_POST['name']);
        $telnr = htmlentities($_POST['telnr']);
        $email = htmlentities($_POST['email']);
        $anfrage = htmlentities($_POST['anfrage']);
        $ich = $_SERVER['PHP_SELF'];
        if (($name=="") or ($anfrage=="")){
            echo "<form action=\"$ich\" method=\"post\">";
            if ($name==""){
                echo "<p>Bitte geben Sie Ihren Namen ein:</p>";
            }
            echo "<div><span>Name:</span><input type=\"text\" name=\"name\" value=\"$name\" /></div>";
            echo "<div><span>Telefonnummer:</span><input type=\"text\" name=\"telnr\" value=\"$telnr\" /></div>";
            echo "<div><span>E-Mail:</span><input type=\"text\" name=\"email\" value=\"$email\" /></div>";
            if ($name['anfrage']==""){
                echo "<p>Bitte geben Sie Ihre Anfrage ein:</p>";
            }
            echo "<div><span>Anfrage:</span><textarea name=\"anfrage\" cols=\"20\" rows=\"5\">$anfrage</textarea></div>";
            echo "<div><span>&nbsp;</span><input type=\"submit\" name=\"\" value=\"absenden\" /></div>";
            echo "</form>";
            echo "<p>Die Felder \"Name\" und \"Anfrage\" sind Pflichtfelder. Alle restlichen Felder m&uuml;ssen Sie nur ausf&uuml;llen, wenn Sie eine R&uuml;ckmeldung erwarten.</p>";
            echo "<p class=\"wichtig\">Vielen Dank f&uuml;r Ihre Anfrage.</p>";
        }
        else{
        }
    }
    else{
          // Hier kann man dann festlegen, was man mit den Daten machen will (E-Mail senden, Datenbankabfrge o.ä.)
    ?>
    <form action="kontakt.php" method="post">
    <div><span>Name:</span><input type="text" name="name" value="" /></div>
    <div><span>Telefonnummer:</span><input type="text" name="telnr" value="" /></div>
    <div><span>E-Mail:</span><input type="text" name="email" value="" /></div>
    <div><span>Anfrage:</span><textarea name="anfrage" cols="20" rows="5" ></textarea></div>
    <div><span>&nbsp;</span><input type="submit" name="" value="absenden" /></div>
    </form>
    <?php
    }
?>

Alles anzeigen

Es bietet folgende Features:
1. Automatisches escapen der Eingaben
2. Anzeigen der gemachten Eingaben, falls Formular nicht vollständig ausgefüllt wurde

Mit folgenden CSS-Code wird es auch als Tabelle angezeigt:

Code

form {
    display: table;
}
form div {
    display: table-row;
}
form span {
    display: table-cell;
    vertical-align: middle;
}
form p {
    font-weight: bold;
}
input,textarea {
    display: table-cell;
    margin-bottom: 0.3em;
}

Alles anzeigen

Falls noch Fragen offenbleiben, einfach an mich wenden!

lauras · 11. Oktober 2011

Mh, ich finde über den HTML-Code kann man sich streiten
Ob die divs da so passend sind? Eventuell lieber label und fieldset noch zur Strukturierung verwenden

Sarkkan · 11. Oktober 2011

Heyho^^
Dann will ich doch mal dich mit der harten Wirklichkeit Konfrontieren :p
(Hoffe entmutige dich damit aber nicht all zu sehr^^)

1. Zu deinem CSS (weil es mir als erstes Aufgefallen ist): Der IE kleiner 8 versteht immer noch nichts mit deinen Display-Eigenschaften anzufangen.
Man sollte derzeit doch noch bis auf den 7'ner Rücksicht nehmen
2. Bei deinem Affenformular muss ich ja 2x mein Formular schreiben. Das ist doppelte Arbeit wenn ich mal ein Feld hinzufüge oder Entfernen möchte
3. Du hast da eine geschweifte Klammer falsch gesetzt Da wo das Formular komplett ausgefüllt ist, passiert nicht, komme ich aber zum ersten mal auf deine Seite so würde eine E-Mail verschickt (wenn ich es bei deinem Kommentar einsetzten würde wie du es uns rätst).
4. Deine Eingaben werden nur auf das nötigste Escaped. Gegen E-Mail-Injection bist du mit dem leider Machtlos und auch Spam ist bei dir sehr Willkommen.
5. <label>'s sind sooooooo toll, warum verwendet man Sie den nicht? =( Sie erzeugen direkte Verbindungen, erleichtern die Bedienung und sind zum Stylen von Formularen soooo nützlich

Gruß
Dustin, alias Sarkkan

webmaster3000 · 12. Oktober 2011

Hi

Sarkkan:
zu 1
Kann man machen, wenn man die Tabellen-Tags nicht zweckentfremdet verwenden will. Ich habe mich so entschieden.
zu 2
Muss man nicht. wenn man nicht alle Pflichtfelder ausgefüllt hat, wird eine meldung angezeigt. die eingaben der ausgefüllten felder werden übernommen (value=\"$name\")
zu 3
stimmt, mein fehler.
zu 4
natürlich kann mans besser machen. info dafür gibts hier und hier.
zu 5
davon wusst ich bis hier noch gar nichts, habs mir aber auf selfhtml angesehen und übernommen.

hier nun der neue php code

PHP

<?php
    if ((isset($_POST['name'])) and (isset($_POST['anfrage']))){
        $name = htmlentities($_POST['name']);
        $telnr = htmlentities($_POST['telnr']);
        $email = htmlentities($_POST['email']);
        $anfrage = htmlentities($_POST['anfrage']);
        $ich = $_SERVER['PHP_SELF'];
        if (($name=="") or ($anfrage=="")){
            echo "<form action=\"$ich\" method=\"post\"><fieldset>";
            if ($name==""){
                echo "<p>Bitte geben Sie Ihren Namen ein:</p>";
            }
            echo "<div><label for=\"name\">Name:</label><input type=\"text\" name=\"name\" value=\"$name\" /></div>";
            echo "<div><label for=\"telnr\">Telefonnummer:</label><input type=\"text\" name=\"telnr\" value=\"$telnr\" /></div>";
            echo "<div><label for=\"email\">E-Mail:</label><input type=\"text\" name=\"email\" value=\"$email\" /></div>";
            if ($name['anfrage']==""){
                echo "<p>Bitte geben Sie Ihre Anfrage ein:</p>";
            }
            echo "<div><label for=\"anfrage\">Anfrage:</label><textarea name=\"anfrage\" cols=\"20\" rows=\"5\">$anfrage</textarea></div>";
            echo "<div><label>&nbsp;</label><input type=\"submit\" name=\"\" value=\"absenden\" /></div>";
            echo "</fieldset></form>";
            echo "<p>Die Felder \"Name\" und \"Anfrage\" sind Pflichtfelder. Alle restlichen Felder m&uuml;ssen Sie nur ausf&uuml;llen, wenn Sie eine R&uuml;ckmeldung erwarten.</p>";
            echo "<p class=\"wichtig\">Vielen Dank f&uuml;r Ihre Anfrage.</p>";
        }
        else{
            // Hier kann man dann festlegen, was man mit den Daten machen will (E-Mail senden, Datenbankabfrge o.ä.)
        }
    }
    else{
    ?>
    <form action="kontakt.php" method="post"><fieldset>
    <div><label for="name">Name:</label><input type="text" name="name" value="" /></div>
    <div><label for="telnr">Telefonnummer:</label><input type="text" name="telnr" value="" /></div>
    <div><label for="email">E-Mail:</label><input type="text" name="email" value="" /></div>
    <div><label for="anfrage">Anfrage:</label><textarea name="anfrage" cols="20" rows="5" ></textarea></div>
    <div><label>&nbsp;</label><input type="submit" name="" value="absenden" /></div>
    </fieldset></form>
    <?php
    }
?>

Alles anzeigen

und der css code

Code

form {
    display: table;
}
form div {
    display: table-row;
}
form label {
    display: table-cell;
    vertical-align: middle;
}
form p {
    font-weight: bold;
}
input,textarea {
    display: table-cell;
    margin-bottom: 0.3em;
}

Alles anzeigen

Sarkkan · 12. Oktober 2011

Zitat von "webmaster3000"

Hi

Sarkkan:
zu 1
Kann man machen, wenn man die Tabellen-Tags nicht zweckentfremdet verwenden will. Ich habe mich so entschieden.
zu 2
Muss man nicht. wenn man nicht alle Pflichtfelder ausgefüllt hat, wird eine meldung angezeigt. die eingaben der ausgefüllten felder werden übernommen (value=\"$name\")

Zu 1: ..sowas habe ich doch gar nicht gemeint Es ging mir um die Kompatibilität für den IE und das es auch per normales Block-System ohne Probleme möglich wäre sauber zu stylen.
Zu 2: Nicht der Benutzer muss seine Angaben noch ein mal machen, stimmt^^ Aber der Programmierer, der deinen Code übernimmt muss sein Formular (wie ich gerade sehe sogar) 3x in das Skript einbauen! :O Wenn ich nun auch noch gerne das Geschlecht abfragen und als Pflichtfeld angeben will müsste ich bei dir das 3x ändern und wenn ich das bei dir richtig sehe noch einmal in eine weitere if-Anweisuung packen. Das ist alles andere als Dynamisch

Beispiel zu Affenformular

Jetzt mitmachen!

Teilen