表单资料的编码方式—enctype属性.ppt

第 10 章 透過表單互動的網頁 本章提要 表單初步 豐富表單的各種輸入欄位 表單的處理 一般常見的表單形式 表單初步 表單中的輸入欄位 應用實例 表單初步 所有的表單內容都必須放在 FORM… /FORM 標籤中, 包括表單中的說明文字、供使用者輸入的欄位等等。 文件中可設定多個表單, 但不能做巢狀的表單, 也就是說 FORM 中不能加入第二個 FORM。 建立表單時必須用 ACTION、METHOD 兩個屬性來設定如何處理使用者所輸入的資料。 表單中的輸入欄位 在一般表單中所看到的輸入欄位, 幾乎都是用 INPUT 標籤來設定, 只要修改其中的屬性, 就會出現不同的輸入欄位： 表單中的輸入欄位 其中 TYPE 屬性是用來設定要使用的輸入欄位種類, 例如一般的文字輸入欄 (TEXT)、單選鈕 (RADIO)、多選鈕 (CHECKBOX)、或是按下會送出表單資料的按鈕 (BUTTON) 等等。 VALUE 屬性所設的初始值, 則是一開始就出現在該輸入欄位中的資料。 表單中常用的輸入欄位 文字欄—TEXT 密碼欄—PASSWORD 送出鈕—SUBMIT 重設鈕--RESET 文字欄—TEXT 文字欄—TEXT 若想調整方框的長度, 可加上 SIZE 屬性；亦可用 MAXLENGTH 限制輸入的資料長度： 密碼欄—PASSWORD 送出鈕—SUBMIT 重設鈕--RESET 應用實例 應用實例 豐富表單的各種輸入欄位 單選鈕—RADIO 多選鈕—CHECKBOX 影像—IMAGE 列表欄 多列的文字輸入欄—TEXTAREA 組織表單內容 查詢用表單--ISINDEX 單選鈕—RADIO 對於只有一個單選鈕的情況下, 可不必設定其 VALUE 屬性, 例如： 多選鈕—CHECKBOX 影像—IMAGE 影像—IMAGE 使用影像輸入欄位時, 只要使用者用滑鼠在圖形上按一下, 資料就會立即送出, 而送出的資料格式像下面這個樣子： 列表欄 列表欄是在文件中常見的下拉選單, 其中列出讓使用者可選取的項目： 列表欄的使用方法 先用一對 SELECT 標籤定義出列表欄及其出現的位置, 在其中加上 OPTION 標籤, 定義每一個出現在列表中的項目： 列表欄的使用方法 當使用者選擇未設定 VALUE 屬性的項目時, 送出的值會恰好是該項目的文字內容： 列表欄的使用方法 當使用者選取的項目是 Basic 時, 瀏覽器傳回的資料會是 Language=Basic, 若我們改為： 列表欄的使用方法 若想設定預設的項目, 可在該項目的 OPTION 標籤中加上 SELECTED 屬性, 例如： 列表欄的變化 調整列表欄方框的大小--SIZE 列表欄的變化 可選擇多項的列表欄--MULTIPLE 多列的文字輸入欄—TEXTAREA 多列的文字輸入欄—TEXTAREA 由於 ROWS 及 COLS 只是設定文字輸入欄在畫面上有幾列幾行, 所以在輸入超過 COLS 所指定的字元數, 或是超過 ROWS 所設的列數時, 捲軸才會自動變為可捲動的： 多列的文字輸入欄—TEXTAREA 自動換行的 WRAP 這個屬性可用來設定在輸入超過欄位寬度的文字時, 是否要自動換行： TEXTAREA WRAP=OFF WRAP=VIRTUAL 及 WRAP=PHYSICAL TEXTAREA WRAP=OFF WRAP=VIRTUAL 及 WRAP=PHYSICAL 讓輸入的文字在超過欄位寬度時自動換行。 但在送出資料時, WRAP=VIRTUAL 只有在按 [Enter] 鍵的地方會換行, 其它部份並不會自動換行。 而 WRAP=PHYSICAL 則會依照螢幕上所見到的方式將輸入的資料送出。 組織表單內容 組織表單內容 組織表單內容 組織表單內容 欄位的存取設定 指定欄位存取方式的屬性為 accesskey, 其作用就是設定一個可直接移到該欄位的快捷鍵, 例如： 組織表單內容 FIELDSET 標籤 LEGEND 標籤 FIELDSET 標籤 FIELDSET 標籤的用途是將多個輸入欄位組合在一起, 瀏覽器會自動用一個方框將這些輸入欄位框起來, 讓使用者能看得比較清楚。 只要將想放在一起的輸入欄位都放在 FIELDSET…/FIELDSET 之中即可。 LEGEND 標籤 套用 FIELDSET 及 LEGEND 標籤的範例 套用 FIELDSET 及 LEGEND 標籤的範例 套用 FIELDSET 及 LEGEND 標籤的範例 套用 FIELDSET 及 LEGEND 標籤的範例 套用 FIELDSET 及 LEGEND 標籤的範例 用 FIELDSET 標籤將欄位分組, 及利用無邊框表格技巧來整理 休閒活動 部分的多選欄, 整個表單看起來就整齊多了： 查詢用表單-