How to create a simple web interface for a system using Python and Flask

Based on contributions by Naman.

Use a web interface when you need to control a system remotely from a browser instead of (or in addition to) physical buttons and switches. This guide shows the smallest possible example: one HTML button that triggers a Python function when clicked.

What you need

  • Python 3 with Flask installed.
  • A text editor.
  • The HTML file and the Python file in the same folder — Flask looks for templates relative to the script’s location, and the app will not find the page otherwise.

Steps

1. Install Flask

pip install flask

2. Plan your interface

Decide what controls you need. This tutorial uses the simplest case: a single button that prints a message to the terminal when pressed.

3. Create the HTML page

Create a templates folder next to your Python script (Flask’s default location for templates) and put your HTML file in it. A form with method="POST" sends a signal to the server when the button is pressed.

Example: simpleButton.HTML

A minimal version of that file looks like this — save it as templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Web HMI</title>
</head>
<body>
    <h1>Simple Web HMI</h1>
    <form action="/button" method="POST">
        <button type="submit">Click me</button>
    </form>
</body>
</html>

:warning: Check: the original source used render_template("Example.html") while the attached file was named simpleButton.HTML. Use one consistent filename for your template and make sure it matches the name in render_template(...) exactly, including case.

4. Write the Python (Flask) script

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)


@app.route("/", methods=["GET"])
def home():
    # render_template looks for this file inside the templates/ folder
    return render_template("index.html")


@app.route("/button", methods=["POST"])
def handle_button():
    print("Button was clicked!")  # output to the terminal
    return redirect(url_for("home"))  # send the user back to the homepage


if __name__ == "__main__":
    print("Starting web HMI on http://127.0.0.1:5000")
    app.run(debug=True)

5. Run it

python app.py

Open 127.0.0.1:5000 in your browser to use the interface locally, or <device-ip>:5000 (e.g. 192.168.0.43:5000) from another device on the same network to control it remotely.

The server is reachable by anyone on the same network. Don’t expose it beyond your local network without adding authentication, and don’t leave debug=True on for anything other than local testing — Flask’s debug mode allows arbitrary code execution through its debugger.

Common mistakes

  • HTML and Python files in different folders. Flask expects HTML templates in a templates/ folder next to the script; the app fails to find the page if this isn’t set up correctly.
  • Filename mismatch between the file on disk and the name passed to render_template(...).
  • Leaving debug=True on a server reachable by other devices — fine for development on a closed lab network, not for anything exposed further.

Related


Rewritten and consolidated (Sept 2026) from the original student how-to’s: How to create a simple web interface using Python.