一、前言

在第十三天的學習中，我認識了 Streamlit，並成功建立第一個互動式網頁，學會使用標題、文字輸出、輸入框與按鈕，將原本在終端機執行的 Python 程式轉換成可以透過瀏覽器操作的介面。

不過，目前的網頁仍以簡單的文字顯示與基本互動為主，還沒有真正的健康紀錄表單。

因此，今天將進一步運用 Streamlit 提供的互動元件，設計個人健康習慣追蹤系統的每日紀錄表單，讓使用者可以直接在網頁上輸入日期、喝水量、睡眠時間、運動時間，以及是否攝取蔬菜水果等資訊。

今天的重點是完成健康資料的輸入介面，讓使用者能夠更直覺地填寫每日生活習慣，為明天的資料新增與保存功能做好準備。

二、健康紀錄表單的設計需求

在開始撰寫程式之前，需要先確認表單應該包含哪些欄位，以及每個欄位適合使用什麼樣的輸入元件。

根據前幾天規劃的健康習慣追蹤系統，本次表單將包含以下項目：

透過這些欄位，系統可以收集後續統計分析所需的基本資料。

例如，喝水量與睡眠時間可以用來計算平均值，運動時間可以用來分析每週運動情況，而蔬菜水果攝取紀錄則能協助觀察個人習慣的變化。

三、認識 Streamlit 的表單輸入元件

Streamlit 提供許多適合收集資料的互動元件，可以依照資料的型態選擇適合的輸入方式。

1. 日期選擇器：st.date_input()

日期選擇器可以讓使用者直接在日曆中選擇日期，避免手動輸入時產生格式錯誤。

import streamlit as st
from datetime import date

record_date = st.date_input(
"紀錄日期",
value=date.today()
)

st.write("選擇的日期：", record_date)

這段程式會顯示日期選擇器，並預設為今天的日期。使用者也可以自行選擇其他日期，補登過去的健康紀錄。

2. 數字輸入框：st.number_input()

喝水量、睡眠時間與運動時間都屬於數值型資料，因此適合使用數字輸入框。

water = st.number_input(
"今日喝水量（毫升）",
min_value=0,
max_value=10000,
value=1500,
step=100
)

其中：

min_value：設定可輸入的最小值。

max_value：設定可輸入的最大值。

value：設定預設值。

step：設定每次調整的數值。

本例的數值範圍是為了示範介面操作而設定，實際使用時可以依照專案需求調整。預設值也只是方便測試的初始數字，不代表使用者實際喝水量或健康目標。

3. 核取方塊：st.checkbox()

核取方塊適合用來記錄是否完成某項習慣，例如當天是否有攝取蔬菜水果。

vegetables_fruits = st.checkbox(
"今天有攝取蔬菜水果"
)

st.write("是否完成：", vegetables_fruits)

當使用者勾選時，變數會得到 True；沒有勾選時則為 False。這種布林值可以在後續計算習慣完成率時使用。

4. 多行文字輸入框：st.text_area()

有些生活情況不適合只用數字表示，例如當天因為課業繁忙而減少運動，或是因為外出而改變作息，就可以透過備註欄位補充。

notes = st.text_area(
"今日備註",
placeholder="請輸入今天的生活習慣或其他補充說明"
)

使用者可以在此輸入較長的文字，作為每日健康紀錄的補充資訊。

四、整合健康紀錄表單

了解各種元件後，接下來將它們整合成一個完整的每日健康紀錄表單。

請在 app.py 中輸入以下程式碼：

import streamlit as st
from datetime import date

st.title("個人健康習慣追蹤系統")

st.write("請填寫今天的健康習慣紀錄。")

with st.form("health_record_form"):

record_date = st.date_input(
    "紀錄日期",
    value=date.today()
)

water = st.number_input(
    "今日喝水量（毫升）",
    min_value=0,
    max_value=10000,
    value=1500,
    step=100
)

sleep = st.number_input(
    "今日睡眠時間（小時）",
    min_value=0.0,
    max_value=24.0,
    value=8.0,
    step=0.5
)

exercise = st.number_input(
    "今日運動時間（分鐘）",
    min_value=0,
    max_value=1440,
    value=0,
    step=10
)

vegetables_fruits = st.checkbox(
    "今天有攝取蔬菜水果"
)

notes = st.text_area(
    "今日備註",
    placeholder="記錄今天的生活情況"
)

submitted = st.form_submit_button("送出健康紀錄")

if submitted:
st.success("表單送出成功！")

st.write("### 本次輸入的健康紀錄")

st.write("紀錄日期：", record_date)
st.write("喝水量：", water, "毫升")
st.write("睡眠時間：", sleep, "小時")
st.write("運動時間：", exercise, "分鐘")
st.write(
    "蔬菜水果攝取：",
    "是" if vegetables_fruits else "否"
)
st.write("備註：", notes if notes.strip() else "無")

完成後，在終端機執行：

python -m streamlit run app.py

如果你的環境使用 python3，也可以執行：

python3 -m streamlit run app.py

成功啟動後，網頁就會顯示完整的健康紀錄表單。

使用者填寫完資料並點擊「送出健康紀錄」，系統便會顯示本次輸入的內容，方便確認每個欄位是否正常運作。

五、為什麼要使用 st.form()？

在上面的程式中，使用了 st.form() 與 st.form_submit_button()。這兩個元件能讓多個輸入欄位組成一份完整的表單。

使用表單的優點包括：

集中輸入資料： 使用者可以一次填寫多個欄位。

統一送出： 使用者完成填寫後，再透過送出按鈕提交整份表單。

操作流程更清楚： 可以將資料填寫與送出後的處理分開，讓介面更容易理解。

方便後續整合： 未來可以在送出後加入資料驗證、儲存至 CSV 或 SQLite 等功能。

需要注意的是，目前程式中的「送出成功」只代表表單已送出並顯示輸入結果，還沒有將資料永久保存。如果重新整理網頁或重新啟動程式，目前的版本並不能保證保留這筆紀錄。

這也是下一階段要完成的重要功能。

六、今日實作與測試

完成程式後，可以透過以下方式確認表單是否正常運作：

開啟健康習慣追蹤系統的網頁。

確認日期選擇器是否能正常顯示。

修改喝水量、睡眠時間與運動時間，觀察數字輸入框是否能調整數值。

勾選或取消勾選蔬菜水果攝取欄位，確認狀態是否正確。

在備註欄位輸入文字，測試多行輸入功能。

點擊「送出健康紀錄」，確認頁面是否顯示所有輸入內容。

再次修改資料並送出，觀察畫面是否會依照最新輸入更新。

如果所有欄位都能正常操作，且送出後可以正確顯示資料，就代表今天的表單設計已經完成基本測試。

七、今日成果與學習心得

透過今天的學習，我進一步熟悉了 Streamlit 的互動元件，並將前一天建立的基本網頁擴充成具有實際用途的健康紀錄表單。

今天學習了日期選擇器、數字輸入框、核取方塊、多行文字輸入框與表單送出按鈕，也了解如何將不同型態的資料整合在同一個介面中。

目前的系統已經可以讓使用者輸入每日健康習慣，並查看送出的紀錄內容。不過，資料仍然只在本次操作中被顯示，尚未建立正式的資料保存機制。

因此，下一步需要讓表單輸入的內容真正成為系統中的健康紀錄，而不只是顯示在畫面上的文字。

八、下一步學習方向

Day 15 將學習「新增資料功能：將使用者輸入的資料保存起來」。

接下來會把今天建立的健康紀錄表單與先前學習的資料處理方式整合，練習將使用者輸入的內容整理成 Dictionary，再進一步保存至 CSV 或 SQLite，讓每一次送出的健康紀錄都能被系統保存，逐步建立完整的健康習慣追蹤流程。