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:
| GET | POST | |
| Übergabe von Parameter | über die Adressleiste im Browser, sichtbar | “versteckt” über die Anfrage an den Server |
| Datentyp | es sind nur ASCII Zeichen erlaubt | ASCII Zeichen und binäre Daten |
| maximale Datenlänge | maximal 2048 Zeichen | keine 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 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>
Das Anzeigen der alten Daten wird in einem echten Kontaktformular jedoch selten erfolgen, es wird zumeist angezeigt dass, das Formular erfolgreich abgesendet wurde.
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: