网页设计进阶班- PHP 与资料库整合.PPT

網頁設計實務-PHP 與資料庫整合 本週的主題 網頁互動的開始-HTML表單復習 PHP在電腦中都裝些什麼-資料的種類與型態 要想記住事情，就得有腦細胞-變數(儲存資料的空間)與運算式 HTML表單 互動式的網頁就必須製作一個使用者介面讓使用者可以做輸入資料的動作 簡單的HTML表單例 HTML原始碼 表單概念 表單標籤主要有兩個作用 提供各種輸入資料的形式 能讓使用者通知WWW瀏覽器已經完成輸入了 表單處理 表單將使用者輸入的內容傳給指定的處理程式進行處理 此程式是在網頁伺服器端稱為CGI（Common Gateway Interface）程式 表單標籤 FORM標籤 構成表單主體的標籤，以FORM…/FORM形式開頭與結束，其它表單相關的標籤都必須包含在其中 FORM標籤有兩個屬性： ACTION：在網頁伺服器端接收表單資料進行後續處理的CGI程式之位置 METHOD：選擇表單資料的傳送方法，有GET與POST兩種 在HTML標籤中雖然沒有規定屬性值一定要以「」（雙引號）括起來，但仍建議養成此習慣 表單標籤 INPUT標籤 用以輸入資料，可以用來在網頁中設定欄位讓使用者將資料輸入 主要屬性有 NAME，代表輸入資料的欄位名稱 TYPE代表資料輸入的形式 VALUE則代表此欄位的值 依TYPE屬性的不同，附帶的其它屬性亦不一樣 INPUT標籤屬性 文字輸入框：TYPE=TEXT。例如， ＜INPUT TYPE=TEXT SIZE=8 NAME=Name＞ 其中SIZE屬性是用以指定顯示在WWW瀏覽器上文字框長度 可用MAXLENGTH屬性限制輸入資料的最大長度 VALUE屬性則是設定此文字欄位的預設值 INPUT標籤屬性 密碼欄：TYPE=PASSWORD。例如， ＜INPUT TYPE=PASSWORD SIZE=8 NAME=Password＞ 和文字輸入框一樣具有VALUE、MAXLENGTH、SIZE等屬性 不過密碼欄設定預設值是很奇怪的事 密碼欄的特色為使用者輸入資料到此欄位中時，其內容會自動隱藏起來，以防止輸入的密碼遭偷看到、外洩 INPUT標籤屬性 單選鈕：TYPE=RADIO。例如， ＜INPUT TYPE=RADIO NAME=Sex VALUE=男 CHECKED＞男 ＜INPUT TYPE=RADIO NAME=Sex VALUE=女＞女 TYPE為RADIO的標籤往往多個一起出現且其NAME屬性具有相同的值 以上例而言，即為二選一，選項是以小圓圈的形式出現 CHECKED字樣只能出現在其中一個選項中，代表此欄位的預選值 INPUT標籤屬性 核取方塊：TYPE=CHECKBOX。例如， ＜INPUT TYPE=CHECKBOX NAME=Like VALUE=香蕉＞香蕉 ＜INPUT TYPE=CHECKBOX NAME=Like VALUE=鳳梨＞鳳梨 ＜INPUT TYPE=CHECKBOX NAME=Like VALUE=芒果＞芒果 和單選鈕類似，也可以多個一起出現 其NAME屬性具有相同的值 可以多選，選項以核取方塊形式出現，被選取後會在方塊內打勾 CHECKED也可以用於核取方塊中且不限定只能出現在一個選項中 example-2.htm example-2.htm原始碼 INPUT標籤屬性 提交按鈕：TYPE=SUBMIT。例如， ＜INPUT TYPE=SUBMIT VALUE=完成＞ 這是一個按鈕，按下代表送出表單 並啟動ACTION屬性指定的CGI程式處理之 VALUE屬性的值可以改變按鈕上的文字描述 它可以不需指定NAME屬性 INPUT標籤屬性 重置按鈕：TYPE=RESET。例如， ＜INPUT TYPE=RESET VALUE=取消＞ 這也是一個按鈕 按下代表清除表單中各欄位的內容，回復到預設的初始狀態 Select標籤 SELECT標籤，用以產生下拉式選單來輸入資料。其形式如下： ＜SELECT NAME=Like＞ ＜OPTION VALUE=香蕉＞香蕉＜/OPTION＞ ＜OPTION VALUE=鳳梨 SELECTED＞鳳梨＜/OPTION＞ ＜OPTION VALUE=芒果＞芒果＜/OPTION＞ ＜/SELECT＞ Select標籤 SELECT標籤中包含有若干個＜OPTION＞標籤，每一項OPTION代表一個選項 VALUE屬性為選項被選定時的傳回值，被OPTION起始與結束標籤則是呈現在WWW瀏覽器中的選項內容 SELECTED代表預設值為選取該選項 SIZE屬性可以設定下拉選單的高度 Select標籤 SELECT標籤亦可應用於多選，於＜SELECT＞中加上MULTIPLE即可。如： ＜SELECT MULTIPLE NAME=Li