Issuu on Google+

【第 2 週】使用者輸入界面設計

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

二、根據需求來進行系統規劃 1. 需要幾個資料表?(資料表規劃日後會有詳細說明) 2. 請根據資料表來設計使用者操作界面。

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

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

五、常用的表單元件 HTML 語法及屬性 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>


02