建立互动式表单_第1页
建立互动式表单_第2页
建立互动式表单_第3页
建立互动式表单_第4页
建立互动式表单_第5页
已阅读5页,还剩67页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、著作權所有 旗標出版股份有限公司第第 9 章章建立互動式建立互動式表單表單2本章提要本章提要p9-1 建立表單p9-2 表單的各種輸入欄位p9-3 列表欄的變化p9-4 區塊式文字輸入欄位p9-5 組織表單內容3前言前言p在瀏覽網頁時, 常可看到讓來訪者留下意見、資料的設計, 提供雙向互動的機會, 這些可輸入資料的欄位, 統稱為表單 (Form)。p要設計可輸入資料的網頁並不困難, 麻煩的是如何處理使用者所輸入的資料。以目前而言, 大多數的表單資料都是透過 ASP (Active Server Page)、PHP (PHP: Hypertext Preprocessor)、CGI (Commo

2、n Gateway Interface) 程式來處理。4前言前言p不過也有比較單純的處理方式, 就是將資料以電子郵件的方式寄到自己的電子信箱中, 事後再用人工或程式來處理這些郵件 (資料)。p為避免混入太多的程式設計內容, 在這一章不會詳細介紹 ASP、PHP、或 CGI 程式的寫法, 仍以說明建立表單的 HTML 標籤為主。59-1 建立表單建立表單p所有的表單內容都是放在 . 標籤之中, 包括表單中的說明文字、供使用者輸入的欄位等等。p在文件中可設定多個表單, 但是不能做巢狀的表單, 也就是不能在 標籤中加入第二個 標籤。以下先介紹如何設計表單中的欄位。69-1-1 表單中的輸入欄位表單中

3、的輸入欄位p在一般表單中所看到的輸入欄位, 幾乎都是用 標籤來設定的, 只要修改其中的屬性, 就會出現不同的輸入欄位。 標籤的格式大致如下所示:p其中 type 屬性就是用來設定要使用的輸入欄位種類, 例如一般的文字輸入欄 (text)、單選鈕 (radio)、多選鈕 (checkbox)、或是按下後就會送出表單資料的按鈕 (button) 等等。79-1-1 表單中的輸入欄位表單中的輸入欄位pvalue 屬性所設的初始值, 則是一開始就出現在該輸入欄位中的資料。p當表單資料送出時, 使用者在各欄位輸入的資料是以 欄位名稱 = 資料值 的方式送出, 所以為了方便程式能由其中萃取出合適的資訊 (

4、或是供自己閱讀), 最好用 name 屬性為各欄位取一個比較有意義的名稱。接著會為您介紹各種資料輸入欄位的用法。89-1-2 建立可輸入文字的欄位建立可輸入文字的欄位p這是最常見的輸入欄位之一, 其設定為 type=text, 這樣就會出現一個可供輸入的方框, 例如:99-1-2 建立可輸入文字的欄位建立可輸入文字的欄位p如果想要調整方框的長度, 則可再加上 size 屬性。若要限制使用者輸入的資料長度, 則可用 maxlength 加以設限, 例如:psize 屬性將方框設定成 20 個字元寬, 但 maxlength 則限制了使用者只能輸入 10 個字元, 輸入滿 10 個字後, 就不能再

5、輸入其它的字了。109-1-3 建立可輸入密碼的欄位建立可輸入密碼的欄位p將 type 設為 passward, 則可得到一個與 text 相似的輸入欄位, 不過在這個密碼欄中輸入的文字在螢幕上都會以 * 或 符號取代, 例如:p這是為了達到保密的效果, 所以才以 取代使用者輸入的文字顯示在螢幕上。119-1-4 建立送出資料的按鈕建立送出資料的按鈕p理論上, 所有的表單中都會有一個送出資料的按鈕, 當使用者按下此鈕時, 瀏覽器就會將使用者在表單中所輸入的資料送出。p使用 type=submit 即可做出用來送出資料的按鈕, 由於不須從這個按鈕本身得到資料, 所以不用設定其 name 屬性 (

6、當然您想要用的話仍可加上此屬性)。129-1-4 建立送出資料的按鈕建立送出資料的按鈕p至於此時在 value 屬性所設的文字, 會變成出現在按鈕上的文字, 例如:p按鈕的大小會依 value 中的文字多寡自動調整, 像上面的例子用了 4 個字, 所以按鈕就變得稍微大了些。139-1-5 建立清除輸入資料的按鈕建立清除輸入資料的按鈕p有一個送出資料的按鈕, 相對的還有一個清除表單中已輸入資料的重設鈕 (Reset), 其目的是讓使用者在發現有輸入錯誤時, 只要按下此鈕,就能將目前表單中所有的資料都清除掉, 以便重新輸入。149-1-5 建立清除輸入資料的按鈕建立清除輸入資料的按鈕p重設鈕的 t

7、ype 屬性就是要設為 reset, 同樣的我們可在 value 中設定出現在按鈕中的文字:159-1-6 應用實例應用實例p現在就將上述的標籤都組合在一起, 形成一個簡單的表單, 讓大家實際了解表單資料的運作方式。為此, 我們只用了陽春的 標籤, 不加上任何的屬性 (當然在實際的應用上, 需加上後文所介紹的屬性):169-1-6 應用實例應用實例p您可試著在僅有的兩個欄位中輸入資料, 按下清除重填清除重填鈕, 試試 Reset 的功效。最後按下送出資料送出資料鈕送出資料,此時會發現在瀏覽器顯示目前 URL 的地方出現了如下的內容, 也就是在原有的 URL 後面, 被加上了一個問號及瀏覽程式所

8、送出的資料:179-1-6 應用實例應用實例189-1-6 應用實例應用實例p相信由上面這個例子, 應能看出表單資料在傳送時, 其資料的排列方式, 就是依各欄位在表單中出現的先後次序, 依序以 & 分格排列。至於每一欄資料則套上了我們在 標籤中用 name 屬性所設的內容而成為:欄位的名稱=使用者輸入的值的格式。199-1-6 應用實例應用實例p以上面的例子來看可分析如下:p如果設計的表單是將資料寄到電子信箱中, 則郵件的附件內容也會和上面一樣。209-2 表單的各種輸入欄位表單的各種輸入欄位p除了文字輸入欄與按鈕之外, 單選鈕、多選鈕、列表欄、與多列文字欄也都在表單中經常出現, 另外

9、還可以做出類似影像地圖的效果喔。219-2-1 只能選擇一項的單選鈕只能選擇一項的單選鈕p要做出一組供使用者只能選擇其一的選擇項目時,可以使用 type = radio,此時就會出現一個圓圈, 只要用滑鼠在這個圓圈上按一下就會出現一個黑點, 表示已選擇了此項。p至於要讓多個單選鈕成為同一組的選項, 只要將這幾個單選鈕的 name 屬性設定成相同的名稱即可, 例如:229-2-1 只能選擇一項的單選鈕只能選擇一項的單選鈕p此時使用者只能選擇 男 或 女 這兩個性別中的一項。p選好後送出表單資料時, 資料中的 sex 會等於使用者所選欄位的 value 屬性值。例如選擇 女 時, 在表單資料中就會

10、出現 sex=female。239-2-1 只能選擇一項的單選鈕只能選擇一項的單選鈕p另外要提醒您的是, radio 預設的 value 值為 On。也就是說, 如果上例中我們不設定 value 屬性的話, 被勾選的項目將會傳回 sex=“on”。p因此, 在只有單一個單選鈕的情況下, 我們大可不必設定其 value 屬性, 例如:249-2-1 只能選擇一項的單選鈕只能選擇一項的單選鈕p只要在資料中有 male=“on” 這一組資料, 我們就知道使用者有選取此項了。p相反的,若有多個單選鈕, 則務必為每個單選鈕設定不同的 value, 否則不論勾選哪一個單選鈕都傳回 on, 就搞不清楚使用者

11、倒底勾選了哪一項。259-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p若要提供可讓使用者複選的選項, 則可使用 type=checkbox 設定, 一般也是將同一組的選項設為相同的名稱:269-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p雖然它們的name都相同, 但若使用者選擇了一個以上的選項時, 在傳回的資料中就會出現一個以上的 leisure=. 的結果。p例如上圖勾選的 2 項, 其傳回的資料就會是 leisure=日本賞櫻之旅& leisure=加拿大賞楓之旅。279-2-2 可重複選擇的多選鈕可重複選擇的多選鈕p和單選鈕一樣, 多選鈕預設 value 值也是 On, 所

12、以如果您不想設定那麼多個 value 屬性, 不妨將同一組的選項也都設定不同的 name, 只要在傳回的資料中看看有哪幾個等於 On 的值就可以了。289-2-3 送出圖片的座標值送出圖片的座標值p使用影像做為輸入欄位時是以圖片做為使用者輸入的界面, 不過使用影像的輸入欄位時, 使用者所輸入的資料將是滑鼠在圖形上的座標值, 例如下面這個例子:299-2-3 送出圖片的座標值送出圖片的座標值309-2-3 送出圖片的座標值送出圖片的座標值p在這個影像輸入欄位中也可加入 align 標籤來調整圖形影像與後面文字的對齊方式。p此外使用影像輸入欄位時, 我們甚至不需使用 按鈕, 因為只要使用者用滑鼠在

13、圖形上按一下, 資料就會立即送出, 送出的資料格式則如下所示:319-2-4 下拉式的列表欄下拉式的列表欄 與與 p假設想設計在網頁上選擇月份, 使用者要在 12 個選項中選擇其中 1 個。如果我們使用單選鈕或多選鈕來設計, 則在畫面上就必須列出 12 個月份。p這時不妨考慮使用列表欄。列表欄就是在文件中常見的下拉式選單, 其中所列出的就是可供使用者選取的項目:329-2-4 下拉式的列表欄下拉式的列表欄 與與 p列表欄的製作方式要先用一對 標籤定義出列表欄及其出現的位置, 接著在其中加上 標籤, 定義每一個出現在列表中的項目:339-2-4 下拉式的列表欄下拉式的列表欄 與與 p基本上, 製

14、作列表欄就是這麼簡單, 不過如果要讓它真正能夠將使用者所選取的資料傳回, 必須再加上 name 及 value 屬性。pname 屬性要加在 標籤中, value 屬性則是要加在 標籤中,不過 value 屬性是可有可無的, 因為當使用者選擇了未設定 value 屬性的項目時, 送出的值就會是該項目的文字內容, 例如下面這個列表欄:349-2-4 下拉式的列表欄下拉式的列表欄 與與 p當使用者選取的項目是日本賞櫻之旅日本賞櫻之旅這一項時, 瀏覽器傳回的資料會是 album=日本賞櫻之旅日本賞櫻之旅。359-2-4 下拉式的列表欄下拉式的列表欄 與與 p但這時會出現一個問題, 因為日本賞櫻之旅日

15、本賞櫻之旅是中文, 傳回的資料會變成亂碼, 可能造成錯誤。如果我們將它改成:369-2-4 下拉式的列表欄下拉式的列表欄 與與 p則選取日本賞櫻之旅日本賞櫻之旅這一項時, 瀏覽器傳回的資料會變成 album=“3”。如此就能避免中文變成亂碼的問題了。p因此, 我們可以適時地依自己的需要, 選擇是否要在 標籤中加上 value 屬性。37設定預設項目設定預設項目p在一般情況下, 網頁中的列表欄預設顯示第一個項目, 如果使用者未做其它選擇的時候,該列表欄傳回的值就是第一個項目的 value 值或其文字內容。p如果想將其它的項目設定成預設的項目, 可在該項目的 標籤中加上 selected 屬性,

16、例如:38設定預設項目設定預設項目p則一開始出現在列表欄中的就是第三個項目了。399-3 列表欄的變化列表欄的變化p除了 name 屬性外, 標籤中還可以加入其它屬性來控制列表欄的外觀或行為。n9-3-1 調整列表欄方框的大小n9-3-2 可選擇多項的列表欄409-3-1 調整列表欄方框的大小調整列表欄方框的大小p列表欄預設的大小只有一列, 要檢視列表中的其它選項都必須按下右邊的向下箭頭才會列出。p使用 size 屬性則可自由設定方框的大小, 例如改成 3 列, 這樣就只會列出 3 個選項供使用者選擇, 而使用者也可用列表欄右邊的捲軸來捲動列表的內容, 例如:419-3-1 調整列表欄方框的大

17、小調整列表欄方框的大小p當我們用 size 屬性設定一個多列的列表欄時, 列表欄右邊的按鈕就被換成一個可上下捲動的捲軸了。429-3-2 可選擇多項的列表欄可選擇多項的列表欄p如果設定的列數超過 項目的個數, 例如將上例改成 size=7, 則多出的三列都會變成空白。p如果列表欄是個複選題, 而不是只能選擇一項的單選題, 那麼只要加上 multiple 屬性即可, 此時使用者可同時按下 Ctrl 鍵及滑鼠左鈕,就可以在列表欄中選擇一個以上的項目, 例如:439-3-2 可選擇多項的列表欄可選擇多項的列表欄449-4 區塊式文字輸入欄位區塊式文字輸入欄位p使用 時, 雖然可用 size 屬性設定

18、欄位的寬度, 不過仍是只有一列的輸入欄位, 如果輸入的文字超過欄位大小, 則文字就會往左推, 前面的字就看不到了。p如果要建立像是在留言板或討論區那樣的文字輸入欄位, 就要使用 標籤了。和一般輸入欄位不同的是, 標籤是成對出現的, 至於欄位的高度與寬度則是分別用 rows 及 cols 屬性來設定:459-4 區塊式文字輸入欄位區塊式文字輸入欄位469-4 區塊式文字輸入欄位區塊式文字輸入欄位p我們可以看到, 一開始欄位右邊及下方的捲軸都是呈現不可使用的狀態。479-4 區塊式文字輸入欄位區塊式文字輸入欄位p由於 rows 及 cols 只是設定文字輸入欄在畫面上有幾列幾行, 所以在某一列輸入

19、超過 cols 所指定的字元數, 或是超過 rows 所設的列數時, 捲軸就會自動變為可捲動的, 讓使用者能捲動欄位內容, 以便查看被捲出欄位外的內容:p另外, 如果想在 的欄位中加上預設的輸入內容, 可以放在 textarea . 標籤之間, 例如:489-4 區塊式文字輸入欄位區塊式文字輸入欄位499-4 區塊式文字輸入欄位區塊式文字輸入欄位509-4-1 設定區塊式文字輸入欄自動換設定區塊式文字輸入欄自動換行行p這個屬性可用來設定在輸入超過欄位寬度的文字時, 是否要自動換行:n1. :當設定 wrap=off 時, 輸入的欄位會出現水平方向的捲軸。當輸入的資料長度超過欄位寬度的時候, 不

20、會自動換行:511. :521. :539-4-1 設定區塊式文字輸入欄自動換設定區塊式文字輸入欄自動換行行n2.wrap=“virtual” 及 wrap=“physical”:這兩項在設定都會讓輸入的文字在超過欄位寬度時自動換行。但是在送出資料時, wrap=“virtual” 只有在按 Enter 鍵的地方會換行, 其它部份並不會自動換行。而wrap=physical 則會依照螢幕上所見到的方式將輸入的資料送出。549-5 組織表單內容組織表單內容p介紹了這麼多的表單欄位後, 可開始著手建立一個完整的表單了。以下就是一個使用了前述五種輸入欄位的簡單範例:559-5 組織表單內容組織表單內

21、容569-5 組織表單內容組織表單內容579-5 組織表單內容組織表單內容p這個範例在 IE 中載入的情形就如圖所示:58欄位的存取設定欄位的存取設定p請注意!在上面的例子中, 每個輸入欄位都加上了一個 tabindex=“編號” 的屬性, 這個屬性的作用是設定使用者按 Tab 鍵時, 切換欄位的順序。p編號小的會先輪到, 在上例中我們為了測試目的, 故意將最後面的清除清除鈕設成tabindex=“1, 也就是使用者按 Tab 鍵時第一個停留的欄位。59欄位的存取設定欄位的存取設定p不過, 順序顛倒的作法不符合使用習慣, 不建議採用。若沒有設定這個屬性, 則各欄位順序預設是由上而下依序照輪。p

22、另一個指定欄位存取方式的屬性則是 accesskey, 其作用就是設定一個可直接移到該欄位的快捷鍵, 例如若設定:60欄位的存取設定欄位的存取設定p使用者只要按了Alt+M和Alt+F就可直接設定這兩個欄位, 不過Alt+M剛好是 IE 檔案功能表的快捷徑鍵, 所以使用者會無法按Alt+M來開啟檔案功能表。p另外 accesskey 也可用在包括 a、area、button、legend (稍後會介紹)、和 textarea 等標籤中, 大家可以善加利用之。619-5 組織表單內容組織表單內容p雖然這樣子的表單已經能正常運作了, 但大家是否覺得表單的內容實在不夠整齊, 在上面的例子我們還得用 來區隔各項的輸入欄位。p其實有幾

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论