Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

Python Flask #5: Formulare erstellen und Daten verarbeiten

Posted on 10. März 20213. Mai 2023 by Stefan Draeger

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
    • Unterschiede zwischen HTTP GET & POST
    • ein kleines Kontaktformular in HTML
      • HTML Code
        • Erläuterungen zum Code
      • Absenden der Daten
  • Auswerten von Parameter aus einem Formular
    • anzeigen der letzten Werte im Formular
  • Download des fertigen Projektes

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:

Python Flask – Formulare erstellen und Daten verarbeitenHerunterladen

Schreibe einen Kommentar Antworten abbrechen

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

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}