Python Flask #5: Formulare erstellen und Daten verarbeiten

In diesem Beitrag möchte ich dir zeigen wie du HTML Formulare in Flask mit Jinja2 erstellst und die Werte aus diesem in einem Python verarbeiten kannst.

erstellen von Formularen in HTML

Machen wir zunächst ein kleinen Exkurs in das Thema „erstellen von Formularen in HTML“.

Solltest du dich damit jedoch schon auskennen so kannst du diesen Abschnitt überspringen.

Ein Formular bietet dem Besucher die Möglichkeit eingaben an den Server zu senden welche dort ausgewertet / verarbeitet werden können. Du kennst bestimmt einige Formulare bereits wie ein Kontaktformular oder aber auch das erstellen eines Twitter Tweets oder Facebook Posts ist über ein solches Formular möglich.

Die Übergabe der Daten erfolgt dabei entweder per HTTP GET oder POST.

Unterschiede zwischen HTTP GET & POST

Der große Unterschied zwischen der Übergabe der Daten per GET & POST ist:

 GETPOST
Übergabe von Parameterüber die Adressleiste im Browser, sichtbar„versteckt“ über die Anfrage an den Server
Datentypes sind nur ASCII Zeichen erlaubtASCII Zeichen und binäre Daten
maximale Datenlängemaximal 2048 Zeichenkeine Beschränkung

Wenn du die Formulardaten per GET übertragen möchtest so musst du zusätzlich Umlaute und Leerzeichen escapen.

ein kleines Kontaktformular in HTML

Erstellen wir nun ein kleines Kontaktformular in HTML.

HTML Kontaktformular
HTML Kontaktformular

HTML Code

<html>
<head>
    <title>HTML Formular</title>
    <style>
        label{min-width:100px;display:inline-block;}
    </style>
</head>
<body>
    <form method="get">
        <label for="firstname">Vorname</label>
        <input type="text" id="firstname" name="firstname"/>
        <br/><br/>
        <label for="lastname">Nachname</label>
        <input type="text" id="lastname" name="lastname"/>
        <br/><br/>
        <label for="mail">E-Mail Adresse</label>
        <input type="email" id="mail" name="mail"/>
        <br/><br/>
        <textarea rows="4" cols="16" name="message"></textarea>
        <br/>
        <br/>	
        <input type="submit" value="Absenden"/>
    </form>
</body>
</html>
Erläuterungen zum Code

Für die Eingabe von Daten dient der HTML Tag „input“ an welchem wir diverse Typen definieren können. Für unser Formular reichen hier die 3 Typen „text“, „email“ sowie „submit“ aus.

Eine ausführliche Liste mit allen Typen für das Input Feld findest du unter w3schools.com – HTML Input Types.

Zunächst übertragen wir die Daten des Formulares per GET damit wir diese über die Adresse auslesen können. Des Weiteren entfallen Validierungen von Vorname, Nachname sowie E-Mail Adresse.

Absenden der Daten

Wenn das Formular ausgefüllt wurde und die Schaltfläche „Absenden“ betätigt wird, werden die Daten aus den Feldern entnommen und als Parameter an die Adresse angehängt.

http://127.0.0.1:5000/?firstname=Max&lastname=Mustermann&mail=max.mustermann%40mustermann.de&message=Hier+steht+ein+Text%0D%0Amit+einem+Zeilenumbruch

Das Format ist dabei ein Schlüssel / Werte paar wobei der Schlüssel der jeweilige Name  und der Wert der Inhalt des Feldes ist. In der Message siehst du zusätzliche Zeichen „%0D%0A“ dieses sind zwei sogenannte Escapezeichen für einen Zeilenumbruch CR & LF.

Du musst bestimmte Sonderzeichen aus dem ASCII Zeichenraum escapen damit der Browser & Server mit diesen arbeiten können, zumeist wird dir die Arbeit vom Browser entnommen. Aber solltest du die Adresse selber aufbauen wollen so musst du dieses per Hand machen oder ein entsprechendes Modul nutzen.

Eine sehr ausführliche HTML URL-encoding Reference findest du unter https://www.eso.org/~ndelmott/url_encode.html.

Auswerten von Parameter aus einem Formular

Im ersten Abschnitt haben wir ein kleines HTML Formular erstellt welches per GET abgesendet wird und uns den Aufbau angeschaut. Nun möchten wir die Schlüssel / Werte paare in Python auswerten und verarbeiten.

Zunächst müssen wir die neue Klasse  „request“ aus dem Modul „flask“ importieren.

from flask import request

Diese Klasse bietet uns über das integrierte Objekt „args“ die Funktion „get“, über welche wir die Parameter auslesen können.

vorname = request.args.get('firstname')

anzeigen der letzten Werte im Formular

Wenn wir das Formular absenden dann werden die Felder z.Zt. geleert. Das liegt daran das wir das Attribut „value“ an den Eingabefeldern nicht belegt haben. Um diese Felder zu füllen benötigen wir etwas Code und die Übergabe der „alten“ Werte an das neue Formular.

Im letzten Beitrag habe ich dir bereits gezeigt das du beliebig viele Parameter an die Funktion „render_template“ anhängen kannst und diese Werte über die Template Enginge Jinja2 im HTML Dokument anzeigen lassen kannst. Hier müssen wir also „nur“ die alten Daten als Schlüssel / Werte paare anhängen.

@app.route('/')
def hello(): 
    liste = ["Max", "Moritz", "Stefan", "Birgit", "Mathias"]
   
    vorname = request.args.get('firstname')
    nachname = request.args.get('lastname')
    mail = request.args.get('mail')
    msg = request.args.get('message')
   
    return render_template("index.html", vorname=vorname, nachname=nachname, mail=mail, msg=msg)

Und im HTML Code im Attribut „value“ einfügen:

<form method="get" action="">
    <label for="firstname">Vorname</label>
    <input type="text" id="firstname" name="firstname" value="{{ vorname }}"/>
    <br/><br/>
    <label for="lastname">Nachname</label>
    <input type="text" id="lastname" name="lastname" value="{{ nachname }}"/>
    <br/><br/>
    <label for="mail">E-Mail Adresse</label>
    <input type="email" id="mail" name="mail" value="{{ mail }}"/>
    <br/><br/>
    <textarea rows="4" cols="16" name="message">{{ msg }}</textarea>
    <br/>
    <br/>	
    <input type="submit" value="Absenden"/>
</form>
Übergabe der alten Daten aus einem HTML Formular
Übergabe der alten Daten aus einem HTML Formular

Das Anzeigen der alten Daten wird in einem echten Kontaktformular jedoch selten erfolgen, es wird zumeist angezeigt dass, das Formular erfolgreich abgesendet wurde.

Meldung "E-Mail erfolgreich gesendet!"
Meldung „E-Mail erfolgreich gesendet!“

Hier können wir recht einfach mit einer bedingten Abfrage im HTML Code prüfen ob ein Parameter „successfull“ auf den Wert „true“ gesetzt ist und dann ein entsprechendes Feld anstatt des Formulars anzeigen.

Download des fertigen Projektes

Hier nun das fertige Projekt zum herunterladen:

 

 

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.