Python

Как подключить HTML к Python: Flask, шаблоны и простой пример

Самая частая путаница в этой теме такая: HTML открывается в браузере, а Python выполняется не в браузере, а на компьютере или сервере. Поэтому нельзя просто написать в HTML «подключи Python» так же, как подключают CSS или JavaScript

Связь HTML и Python обычно делают одним из трех способов: через Flask, через генерацию HTML-файла или через отдельный фронтенд, который обращается к Python-серверу по API

Короткий ответ

Если вам нужно, чтобы Python обработал данные и показал HTML-страницу, используйте Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    name = "Динар"
    return render_template("index.html", name=name)

app.run(debug=True)

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Python и HTML</title>
</head>
<body>
    <h1>Привет, {{ name }}</h1>
</body>
</html>

Python запускает Flask-приложение, Flask берет HTML-шаблон, подставляет переменную name и отдает готовую страницу браузеру

Почему HTML не запускает Python напрямую

Браузер умеет выполнять HTML, CSS и JavaScript. Python в обычном браузере не выполняется как встроенный язык страницы. Поэтому файл index.html не может просто вызвать локальный main.py, если вы открыли его двойным кликом

Правильная схема для веб-приложения такая:

Python работает как сервер
браузер отправляет запрос
Python обрабатывает запрос
Python возвращает HTML или JSON
браузер показывает результат

Именно поэтому в учебных примерах по Python и HTML часто используют Flask

Как создать минимальный проект Flask

Структура папки может быть такой

my_site/
    app.py
    templates/
        index.html

Установите Flask

python -m pip install flask

Создайте app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    title = "Моя первая HTML-страница из Python"
    return render_template("index.html", title=title)

if __name__ == "__main__":
    app.run(debug=True)

Создайте templates/index.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>Эта страница пришла из Python-приложения</p>
</body>
</html>

Запустите проект

python app.py

Откройте в браузере адрес

http://127.0.0.1:5000

Если видите заголовок из переменной title, значит HTML и Python связаны правильно

Как принять данные из формы HTML

Часто HTML нужен не просто для вывода, а для формы. Пользователь вводит данные, Python получает их и возвращает ответ

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    message = ""

    if request.method == "POST":
        name = request.form.get("name", "")
        message = f"Привет, {name}"

    return render_template("index.html", message=message)

if __name__ == "__main__":
    app.run(debug=True)

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Форма Python</title>
</head>
<body>
    <form method="post">
        <input name="name" placeholder="Введите имя">
        <button type="submit">Отправить</button>
    </form>

    <p>{{ message }}</p>
</body>
</html>

Так HTML собирает данные формы, а Python обрабатывает их на серверной стороне

Если Flask не нужен

Иногда нужно не веб-приложение, а просто сгенерировать HTML-файл. Например, Python обработал данные и должен создать отчет

from pathlib import Path

title = "Отчет Python"
items = ["строка 1", "строка 2", "строка 3"]

html_items = ""

for item in items:
    html_items += f"<li>{item}</li>"

html = f"""
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>{title}</title>
</head>
<body>
    <h1>{title}</h1>
    <ul>{html_items}</ul>
</body>
</html>
"""

Path("report.html").write_text(html, encoding="utf-8")

После запуска появится файл report.html, который можно открыть в браузере. Это не сервер, а обычная генерация HTML-документа

Как выбрать подход

Если нужна интерактивная страница с формами, маршрутом и обработкой запросов, берите Flask

Если нужно сделать отчет, карточку, таблицу или статическую страницу из данных Python, можно сгенерировать HTML-файл

Если уже есть отдельный сайт на JavaScript, а Python должен только отдавать данные, тогда понадобится API: Python возвращает JSON, а фронтенд забирает его через запросы

Мини-практика

Сделайте Flask-страницу с формой имени. Пользователь вводит имя, нажимает кнопку, а Python возвращает фразу Привет, имя

После этого добавьте второе поле city и выведите фразу Привет, Динар из Казани. Так вы поймете, как данные из HTML-формы попадают в Python-код

Частые ошибки

Ошибка первая: открывать index.html двойным кликом и ждать, что Flask заработает. Для Flask нужно запускать python app.py и открывать адрес локального сервера

Ошибка вторая: класть шаблон не в папку templates. Flask по умолчанию ищет HTML-шаблоны именно там

Ошибка третья: писать переменную {{ name }} в HTML, но не передавать name в render_template()

Ошибка четвертая: путать Python и JavaScript. Python обрабатывает запрос на сервере, JavaScript работает в браузере

Что почитать дальше по Python

Если нужен общий маршрут по теме, откройте рубрику Python. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные