本篇文章目錄

1. 前言：為什麼需要「每日用藥時間表生成器」？
2. 臨床四大服藥時間點：早、中、晚、睡前與多選（Checkbox）設計思維
3. 實戰切版：Tool 3 HTML 結構解析
4. 視覺亮點與列印導向 (Print-Friendly) 設計
5. 結語

一、 前言：為什麼需要「每日用藥時間表生成器」？

在日常照護與臨床衛教中，許多高齡者或慢性病患者常面臨「一天要吃好幾種藥，搞不清楚什麼時間該吃哪顆」的困擾。傳統藥袋分開標示，缺乏全貌性的彙整。

將病人的每日藥物整理成一張 「早 (Breakfast)」、「中 (Lunch)」、「晚 (Dinner)」、「睡前 (Bedtime)」 的四時段矩陣對照表，並提供 實體列印功能 貼在冰箱或藥盒旁，能大幅降低漏吃或重複吃藥的風險！

今天 [Day 19]，我們正式進入專案的第四階段 [Tool 3 每日用藥時間表生成器]，第一步先來建構清晰、支援多選且可友善列印的 HTML 表單與矩陣表格！

二、 臨床四大服藥時間點與多選 (Checkbox) 設計思維

在設計 [Tool 3] 的輸入表單時，有一個非常關鍵的臨床特性：「同一種藥物，一天可能會在多個時段重複服用」（例如抗生素或降血糖藥可能需要三餐飯後服用）。

因此，我們在「服用時段」使用了 <input type="checkbox"> 多選按鈕，讓使用者輸入一次藥品名稱與備註（如 1 錠 / 飯後）後，勾選 morning、noon、night、bedtime，即可一次將藥物分發至對應的矩陣時段中！

三、 實戰切版：Tool 3 HTML 結構解析

我們的結構分為「上方的操作表單」與「下方的可列印矩陣檢視區」，採用經典的四欄表格 (schedule-table) 呈現：

/index.html

四、 視覺亮點與列印導向 (Print-Friendly) 設計

1. 衛生的 CSS 列印隔離 (.no-print)

我們為「輸入表單」與「下方操作按鈕」加上了 .no-print Class。搭配 CSS @media print 語法，當使用者點擊「列印今日用藥時間表」時，紙張上只會印出乾淨的抬頭與 4 時段矩陣表格，過濾掉不必要的按鈕與輸入框。

2. 均分 25% 的 4 時段矩陣表格

在 <th> 標籤中，我們將四個欄位分別設定 width="25%"，確保產出的表格在不同螢幕尺寸或列印至 A4 紙張時，四個時段（早上、中午、晚上、睡前）都能呈現均等且工整的佈局。

3. 動態掛載點（time-slot）

表格中的 4 個 <td> 分別指定了 #slot-morning、#slot-noon、#slot-night 與 #slot-bedtime 的專屬 ID，這是為明天 JavaScript 動態建立與掛載藥品項目所預留的「插入節點」。

五、 結語

今天我們完成了 [Tool 3] 每日用藥時間表生成器 的 HTML 結構，透過支援多選的表單與四時段矩陣表格，為動態新增藥品與實體列印奠定了完美的基礎。

在明天的 [Day 20] 中，我們將設計 JavaScript 物件陣列 (Array of Objects) 資料結構，實作多選 Checkbox 抓取、自動將藥品動態渲染至表格中，並加上 LocalStorage 自動儲存 功能，讓資料重新整理也不丟失。