2. 使用者輸入介面設計

 一、本學期製作主題：「我的學習收藏」系統

1. https://picasaweb.google.com/117697545020572482261/axQzxC#
2. 使用者範圍：所有社大學員、社大工作人員。系統需求如下：
   • (1) 可以讓學員方便快速的填寫學習收藏，考量學員特質，界面應簡單易操作。
   • (2) 副班長可以從線上掌控使用者填寫狀況，並做篩選。
   • (3) 所有人都可以線上瀏覽，僅社大人員可以進行 PDF 輸出列印。
   • (4) 需能每一學期使用，並可觀看之前學期的內容。
   • (5) 可讓社大人員匯入掃瞄圖檔（舊的我的學習收藏掃瞄文件）。
3. 行政面該如何與系統搭配？

1. 需要幾個資料表？（資料表規劃日後會有詳細說明）
2. 請根據資料表來設計使用者操作界面。

1. <form action="接收程式.php" method="傳送方式">表單</form>
   • (1) action 屬性：用來指定使用者填好的東西，要送去給哪個程式來執行。
   • (2) method 屬性：指定傳送方法，可以是 POST（建議）或 GET（預設）
   • (3) 如果希望表單可以上傳，必須加入 enctype="multipart/form-data"

1. <input type="格式" name="名稱" size="大小" value="預設值">
2. 其中的 name 最重要！一定要有！因為 name 送出後，會變成 PHP 的變數名稱。例如表單有個：<input type="text"  name="tel">，表單送出後，方法若用 post，那麼會得到 $_POST['tel'] 變數；若是用 get，那就是 $_GET['tel']

1. 文字框：<input type="text" name="名稱" value="預設值" size="大小">
2. 隱藏框：<input type="hidden" name="名稱" value="預設值">
3. 密碼框：<input type="password" name="名稱" size="大小">
4. 上傳框：<input type="file" name="名稱" size="大小">
5. 送出鈕：<input type="submit" value="按鈕文字">
6. 單選框：<input type="radio" name="名稱"  value="值 1">選項文字 1
   • (1) 單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
   • (2) 若要預設選取，要加上 checked="checked"
   • (3) 可以用<label for="id">選項</label>，以便點選文字就可以勾選該項目。
7. 複選框：<input type="checkbox" name="名稱[]"  value="值 1">選項文字 1
   • (1) 複選框通常同時會有好幾個選項，一組選項就要一組<input>
   • (2) name 都要一樣才行！而且因為是複選，所以 name 要加上[]，如此會送出陣列。
   • (3) 若要預設選取，要加上 checked="checked"
8. 下拉選單：<select name="名稱" size=1>選項</select>
   • (1) 選項：<option value="值">選項文字</option>
     • a. 一組選項，就是一組<option>
     • b. 若要預設選取：要在<option>中加入 selected="selected"
   • (2) 若希望下拉選單可以複選，除了 name 要加上[]外，還要加上 multiple 屬性。
9. 大量文字框：<textarea name="名稱" cols="欄寬" rows="列高">預設值</textarea>