今天先做一個可以輸入作品資訊的表單。表單會包含作品名稱、類型、年份、分類、狀態、評分、心得。
步驟 1：在 app.py 加入 request 和 redirect
把檔案最上方的 import 改成：
from flask import ( Flask, render_template, request, redirect, url_for, flash)

這些工具的用途：

• request：讀取使用者送出的表單。
• redirect：完成操作後跳轉到另一個網址。
• url_for：依路由名稱產生網址。
• flash：顯示操作成功或失敗的提示訊息。
  步驟 2：在 app.py 加入新增路由
  把下面程式碼放在 movies() 路由前後皆可，但必須放在 if name == "main": 之前。
  @app.route("/add", methods=["GET", "POST"])def add_media(): if request.method == "POST": # 目前先接收資料，Day 12 再寫入資料庫 title = request.form.get("title", "").strip() media_type = request.form.get("media_type", "") year = request.form.get("year", "") genre = request.form.get("genre", "").strip() status = request.form.get("status", "") # 先做最基本的檢查 if not title: flash("作品名稱不能空白。", "error") return render_template("add.html") if media_type not in ("movie", "game"): flash("請選擇正確的作品類型。", "error") return render_template("add.html") return render_template( "add.html", submitted_title=title ) return render_template("add.html")

目前這個版本只驗證輸入資料，還沒有將作品保存到資料庫。
步驟 3：建立 templates/add.html

{% extends "base.html" %}

{% block title %}新增收藏 - My Media Library{% endblock %}

{% block content %}

{% with messages = get_flashed_messages(with_categories=true) %}
{% for category, message in messages %}
{{ message }}
{% endfor %}
{% endwith %}

{% if submitted_title %}
已收到作品名稱：{{ submitted_title }}
{% endif %}

<label for="media_type">作品類型 *</label>
<select id="media_type" name="media_type" required>
    <option value="">請選擇</option>
    <option value="movie">電影</option>
    <option value="game">遊戲</option>
</select>

<label for="year">年份</label>
<input id="year" name="year" type="number"
       min="1888" max="2100">

<label for="genre">分類</label>
<input id="genre" name="genre" type="text"
       maxlength="50">

<label for="status">狀態</label>
<select id="status" name="status">
    <option value="backlog">待觀看／待遊玩</option>
    <option value="watched">已看電影</option>
    <option value="playing">遊玩中</option>
    <option value="completed">已通關</option>
</select>

<button class="button" type="submit">送出</button>

步驟 4：新增表單樣式
在 static/style.css 最後加上：
.media-form {
display: grid;
gap: 10px;
max-width: 560px;
padding-bottom: 40px;
}

.media-form label {
margin-top: 8px;
font-weight: 700;
}

.media-form input,
.media-form select,
.media-form textarea {
width: 100%;
padding: 11px;
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
font: inherit;
}

.media-form button {
margin-top: 16px;
justify-self: start;
}

.notice {
padding: 10px 14px;
border-radius: 8px;
background: var(--panel);
}

步驟 5：將新增功能放進導覽列
打開 templates/base.html，在導覽列加入：
新增收藏

測試

1. 開啟 http://127.0.0.1:5000/add。
2. 不填名稱直接送出，應看到錯誤訊息。
3. 輸入「星際效應」，選擇電影，再送出。
4. 應看到程式收到的作品名稱。