Python

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

HTML не подключается к Python так же, как таблица стилей подключается к HTML. Браузер умеет открывать HTML, но не умеет выполнять обычный Python-код из файла .py. Чтобы связать страницу и Python, нужен серверный слой: Python принимает запрос, готовит данные и отдает браузеру HTML-страницу

Для первого проекта проще всего взять Flask. Это легкий веб-фреймворк: вы пишете файл app.py, создаете папку templates, кладете туда HTML и запускаете локальный сервер. После этого браузер открывает страницу по адресу вроде http://127.0.0.1:5000

Что получится в этом уроке

Мы сделаем маленькую страницу, где Python передает имя в HTML. Потом добавим форму: пользователь вводит текст в браузере, Flask принимает его в Python и показывает ответ на странице

Структура проекта будет такой

flask_html_lesson/
  app.py
  templates/
    index.html

Установка Flask

Сначала создайте папку проекта и виртуальное окружение. Это не обязательно для понимания Flask, но это нормальная привычка для любого Python-проекта

mkdir flask_html_lesson
cd flask_html_lesson
python -m venv .venv

На Windows активируйте окружение так

.venv\Scripts\activate

На macOS и Linux так

source .venv/bin/activate

Теперь установите Flask

python -m pip install flask

Проверьте установку

python -m flask --version

Если команда показывает версию Flask, можно писать код

Первый файл app.py

Создайте файл app.py

from flask import Flask, render_template

app = Flask(__name__)

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

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

Здесь @app.route("/") означает главную страницу сайта. Когда пользователь открывает /, Flask вызывает функцию index(). Функция возвращает не строку с HTML вручную, а шаблон index.html

Первый HTML-шаблон

Создайте папку templates, а внутри нее файл index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Python и HTML</title>
</head>
<body>
  <h1>Привет, {{ name }}</h1>
  <p>Эту страницу отдал Flask, а имя пришло из Python</p>
</body>
</html>

Запись {{ name }} — это место, куда Flask подставит переменную из Python. В app.py мы передали name=name, поэтому в браузере появится значение переменной name

Как запустить проект

Находясь в папке проекта, выполните

python app.py

В терминале появится адрес. Обычно это

http://127.0.0.1:5000

Откройте его в браузере. Если вы видите заголовок Привет, Динар, значит HTML и Python связаны правильно

Как передать список из Python в HTML

Теперь передадим в шаблон список уроков. Измените app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    lessons = ["Переменные", "Списки", "Функции", "Flask"]
    return render_template("index.html", lessons=lessons)

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

Измените index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Уроки Python</title>
</head>
<body>
  <h1>Уроки Python</h1>

  <ul>
    {% for lesson in lessons %}
      <li>{{ lesson }}</li>
    {% endfor %}
  </ul>
</body>
</html>

Конструкция {% for lesson in lessons %} запускает цикл прямо в шаблоне. Это не обычный Python-файл, а шаблон Jinja, который Flask обрабатывает перед отправкой страницы в браузер

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

Теперь добавим форму. Она будет отправлять имя пользователя в Python

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    greeting = "Введите имя и нажмите кнопку"

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

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

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Форма Flask</title>
</head>
<body>
  <h1>{{ greeting }}</h1>

  <form method="post">
    <label>
      Ваше имя:
      <input type="text" name="name">
    </label>
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

Обратите внимание на name="name" у поля ввода. Именно по этому имени Python получает значение через request.form.get("name")

Почему нельзя просто вставить Python в HTML

Такой код внутри HTML не заработает в браузере

<p><?python print("Привет") ?></p>

Браузер не понимает Python. Он получает уже готовый HTML. Поэтому Python должен выполниться на сервере до того, как страница попадет в браузер. Flask как раз и играет роль такой связки

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

Ошибка TemplateNotFound: index.html означает, что Flask не нашел HTML-файл. Проверьте, что папка называется именно templates, а файл лежит внутри нее

project/
  app.py
  templates/
    index.html

Если страница не обновляется, убедитесь, что debug=True включен, а файл сохранен. Иногда проще остановить сервер сочетанием Ctrl + C и запустить python app.py заново

Если форма отправляется, но Python получает пустую строку, проверьте атрибут name у поля ввода. Он должен совпадать с тем, что вы читаете в request.form.get()

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

Сделайте страницу, где пользователь вводит два числа, а Python показывает их сумму. В HTML должны быть два поля first и second, а в Python нужно получить их через request.form.get(), преобразовать в int и передать сумму обратно в шаблон

Главное правило: HTML отвечает за форму и разметку, Python отвечает за обработку и данные

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

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

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

Старые

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