Online Multi-Matchmaking community where you get paid to build relationships.
Reach your customers at any time & place Market on a one-to-one basis.
Free php, mysql & perl web hosting. 29 Free PHP scripts with 1-click installations.
相信在經過前面五篇的教學後,大家對網頁上的各種元素都有了一定程度的了解~
那教學也進入中段了,所以此篇將延續第一篇的網頁基礎分析,更進一步針對表單的部份來加強~
PS.. 教學從此篇起都有擋修喔!! 前面還看不懂的人,請回頭重修後再來,切記切記~ XD
先複習一下第一篇教過的部份~
如上一份HTML文件會由三個部份構成:HTML版本的資訊(可省略不寫 )、<HEAD></HEAD>間 宣告的HTML前言、由BODY或FRAMESET組成 的HTML本文
而我們的需求無非就是在 填格子、拉選項、按按鈕… 所以就只會是在 BODY或FRAMESET內的FORM上作動作 ~
有了既定範圍後,接著就要來好好的了解一下表單組成的型式!!
如下所示,一個表單(FORM)裏共可宣告七個控制項,而其中 INPUT 控制項內,又可宣告十種屬性!!

以上,看不懂的人,我確定你被當掉了… 請回第一篇重修~ XD
好,現在開始進入此篇的主題~


假設我們寫GDL時,碰到了上面的網頁,相信經過前面五篇的努力,大家現在應該不到一分鐘就可以搞定這頁吧!! (搞不定的人請回第一篇重修 )
所以,現在我要講的重點不在於 格子如何填、選項如何拉,而是 提交表單 的方式~
首先,我們可以看一下此表單的源始碼,其中在表單標籤<FORM> 裏,共宣告了三個屬性,分別是 method 、action 與 name
action 這個屬性則是單表所在URL ( 可以是cgi 、asp 、php …),可用相對路徑(省略域名不寫)或絕對路徑來表示。
name 這個屬性是指表單的名稱
有Method 與 action 屬性存在,即代表這個表單是可以被提交的 ~
接著,再來看要如何提交~
因為必需考量到網頁中可能同時有多個表單存在!! 所以可以從兩個方向來處理~
2.借由該表單內控制項屬性為submit 的物件來提交 ClickButton:B1 或是 提交表單
(若我們是利用程式的DEBUG分析來自動產生指令,就就會得到 ClickButton:B1 來作為送出表單的指令)
順便也看一下表單裏的另外兩個鈕~
第二個鈕:它不屬於 INPUT 下,所以運用上比較有彈性!! 利用 STYLE 屬性來控制鈕面的文字樣式(也可用圖片)。且它的TYPE 也可設為 SUBMIT或BUTTON。
假設第二個鈕,它也有TYPE=SUBMIT 的屬性,那就一樣可以用它來提交表單~ (但這個鈕不屬於INPUT ,所以自動生成裏不會有它,需自行判斷)
而第一個鈕已是INPUT 下屬性為BUTTON的鈕,所以若要其有提交表單的效果,那就必需要借由SCRIPT 來完成~
假設第一鈕的源碼改成如下的~ 那當我們按下它後,就會跑check_form() 這段function
<input type="button" value="按鈕" name="B3" onclick="check_form()"> INPUT_BUTTON </p>
從這段JS 中可看到,變數 theform1 定義為網頁中名為'FORM1'的這個表單,接著再定義其Action與Method,最後補一個SUBMIT 的動作 !!
所以按了這個鈕後,自然也會有表單送出的效果~
好,了解表單提交的運作方式後,再來要介紹一個模擬表單送出資料的指令: 【03-網頁控制類】
輸出串之定義為:Url-action?欄位名1=值&欄位名2=值&欄位名3=值…
參照頁為選擇性參數
Content-Type為選擇性參數,預設為"application/x-www-form-urlencoded"
這個指令就是利用post 的方法把表單中的所有欄位名與其值串加起來,再由Url-action 傳送出去~
所以與我們上面提到的表單送出,是完全同樣的原理!!
而所謂的參照頁,指的就是給定一個表單送出的所在網頁~
比如常會遇見,步驟一 ---> 步驟二 ----> 步驟三 這種循序的申請空間,此時若我們想要跳過步驟一、二直接到三的話
那通常會指定參照頁為步驟一的網頁,再用postdata 送出步驟二的相關資料,就可以直接進入步驟三的頁面了~
來個實例: Xuite 的登入

若是正常的方式,我們會用DEBUG 來生成指令~
當然也可改用表單名 PostForm:form1 或表單順序 PostForm:[0] 來提交~
好,那我們先用手動的方式,在帳密的欄位亂填後按登入~
此時頁面沒有正常登入,但已有提交表單的效果!!
再來,便可切換至NT的POSTDATA 標籤去看內容~

上面顯示的資訊:
第一列就是該表單的 Action 值~ ( 可切換DEBUG ,控制項選 FORM 就會看到其Action 值與這列是一樣的)
第二列是post 方法的編碼模式~ ( 這是預設的模式,只要表單內沒有file 屬性的欄位,編碼都會是這個)
Post Data Start (連續) ---------------------------- 下面那一整列指的是,表單內所有欄位與其值,其間是以一個符號"&" 來串加
Post Data Start (分隔) ---------------------------- 以下的每一列,表示表單內的所有欄位與其值
所以,若我要改用 PostData 指令來完成登入的話,就該寫成如下的模式:
"post_Action" ? " Post Data Start (連續) ---------------------------- 下面那一整行"
了解方式以後,一定會有人問,我用原本的方式來登入不是容易的多嗎? 指令還可自動生成,我幹嘛沒事找事做呀?
用PostData 的好處除了不必先進登入頁(可省掉廣告或頁面本身的錯誤)外,重點在於可以閃掉一些屬於 Client-side 的Validation檢驗或是警告、對話窗口~
所以這個指令可是五星級必學的喔!!
好,那接著再來看俱有 file 欄位的表單會是如何?
以 http://www.friendlyshare.de/ 這個上傳空間為例子!!
下面是表單內的源始碼 ( 我把文字都去掉, 只留表單內的所有控制項,這樣看起來比較清爽)
大家可以清楚的看到,在表單標籤<FORM> 裏,除了 METHOD 、ACTION外還有另一個 ENCTYPE,它的值為 multipart/form-data ~
這個屬性代表的是檔案上傳必需指定的編碼模式!! 與一般不俱檔案欄位的編碼方式(application/x-www-form-urlencoded)是不同的喔~
那,我們一樣選個檔案後,按下上傳鈕後,再切換到DEBUG 來看看具有檔案欄位的表單送出,會長成什麼樣子!!

第一列一樣是指表單的Action
第二列除了編碼方式不同外,還多了一個叫 boundary 的東東!! (這個的值是隨機生成的,目的是用來區隔每個欄位)
再來,Post Data (連續)與(分隔) 都列成一行的樣式,這與之前無 file 欄位的型態是不同的~
之前,每個欄位間是用一個符號 "&" 來串連,而現在是用 "--"+"boundary 的值" 來作為區隔~
那我們是能否利用之前提過的 PostData 指令來提交俱有檔案欄位的表單呢?? 答案暫時保留~
在本教學最後的附錄二裏,將會以此觀念為出發點,作更進一步的詳細探討!!
好,那有了以上的觀念後,接著就可以開始來看如何去設計一份 "自定網頁上傳" 的GDL ~
何謂 自定網頁上傳 呢?? 即是指我們直接在pc裏模擬上傳頁!!
同樣以 http://www.friendlyshare.de/ 這空間為例子~
首先,我們可以在網頁源始碼中找 multipart/form-data 這個關鍵字~! 因為 它所在的表單,肯定是有上傳欄位在的表單~
再來,就是把FORM 內的所有控制項都取出來,就行囉~
那這裏,ACTION 的部份,它是用相對位置來表示,但我們是要架在自已的PC裏,所以一定要列絕對位置 !! (即是加上表單所在網址 http://www.friendlyshare.de/)
<FORM ACTION="http://www.friendlyshare.de/cgi-bin/fileuploader.cgi" METHOD="post" ENCTYPE="multipart/form-data" >
接著就可以在一個空白頁裏,把這個我們摸擬的FORM 給動態架上~ 【03-網頁控制類】

再來,就與我們實際在 http://www.friendlyshare.de/ 這個頁面的操作方式一樣了!!
接著我們再來看一個例子,它的ACTION是隱藏兼動態的~
例: http://www.mediafire.com/ 空間的自訂網頁上傳

根據上面教過的,首先我們要找到上傳欄位所在的表單源始碼,那我們可以利用 "multipart/form-data" 作為關鍵字來搜尋~
然後你會發現在 <FORM></FORM> 間的內容是落落長…
不過別理它,我們只要把控制項相關的標籤留下就好,其它的統統刪掉,自然就會清爽多了~
不過這次真是清爽過頭了,怎會只有剩這些而已呢… ![]()
問題二:沒有 TYPE=FILE 的欄位 ??
問題三:沒有TYPE=SUBMIT 的送出按鈕?? ( 不過還有表單名,所以問題不大)
好,那我們就開始一個一個來看~
首先看上圖中,FILE 那格!! 大家有沒感覺它的樣式粉花俏,與一般我們看到的都不一樣吧!! XD
這種的就是動態生成的 !! 所以在源始碼裏,只能找到動態生成的模式,但卻無法直接看到動態生成後,該欄位的相關屬性~
不過這也不是問題啦 !! 因為NT的DEBUG分析是 讀取已完成的網頁元件 ,所以我們照樣可以用它來得到動態生成後的欄位資訊~

從上圖中可清楚看到,那個 TYPE=FILE 的格子,名字叫 file_name0 !! 這樣一來就解決了第二個問題了!!
有了檔案欄位的屬性資訊後,我們就可以將它加上去剛整理完的表單中!!
那處理好file 的問題後,就再來看 action 的部份!!
這個問題與第三個問題,其實是有關連的,因為我們在網頁源始碼中找不到 type=submit 的控制項,那網頁是如何提交表單的呢?? 這肯定是有鬼的!!
所以我們就再從源始碼裏來找右圖中這個送出鈕的原始碼 ~(找法就是之前教過的,用圖片名字來搜最快!!)
![]()
<a href="Javascript:handle_upload();"><img border="0" name="submit_file" id="submit_file" src="images/upload_button.gif" border="0" alt="Upload File to MediaFire" /></a>
一看!! 原來它只是個連結鈕而已!! 當我們按下它時,並非在送出表單的資料,而是跑 handle_upload() 這個函數!!
所以表單送出的動作一定是寫在這個 script 裏 !! 只要找到它,就可以了解 action 值是如何產生的 ~
那我們就來開始來搜尋看看 "handle_upload" 會不會就直接寫在網頁的原始檔中~ ( 正常來說是不會的,它會掛在 js
檔內,而這個空間也正是如此~ ^^ )
改搜 js 後,會有二個符合的地方~
第一個是叫你把這個網頁加入我的最愛中,沒啥小路用的,不用理它… (你下回去看就知了)
第二個一看就知粉重要,我們要的就是它了!! (記住之前提過相對路徑與絕對路徑的定義,就可以把它下載回來了~)
用文書軟體打開 main.js 後,搜尋剛才在網頁原始碼裏找不到的 "handle_upload",你就會看到如下的function。
此時,大家應該都看出來了吧!! 黃色標記處說明了action 值是如何產生的。藍色標記處則作了一個表單送出的動作~!
再回到網頁原始檔去搜 identifier_seed ,你就會發現如下的內容~(綠色字的部份是每次都會不一樣的!!)
所以它的 action 就該是長成如下的模樣~
這樣子所有的問題都解決了!!

接下來,就與我們實際在 http://www.mediafire.com/ 這個頁面的操作方式一樣了!!