相信在經過前面五篇的教學後,大家對網頁上的各種元素都有了一定程度的了解~

那教學也進入中段了,所以此篇將延續第一篇的網頁基礎分析,更進一步針對表單的部份來加強~ 

PS.. 教學從此篇起都有擋修喔!!  前面還看不懂的人,請回頭重修後再來,切記切記~ XD


先複習一下第一篇教過的部份~

<HTML>
     <HEAD>
           <TITLE>我會出現在視窗的標題欄</TITLE>
     </HEAD>
     <BODY>
       終於進入第六篇了,但怎麼還是我在寫教學呀 ~_~
     </BODY>
</HTML>

如上一份HTML文件會由三個部份構成:HTML版本的資訊(可省略不寫 )、<HEAD></HEAD>間 宣告的HTML前言、由BODY或FRAMESET組成 的HTML本文

而我們的需求無非就是在 填格子、拉選項、按按鈕…   所以就只會是在 BODY或FRAMESET內的FORM上作動作 ~

有了既定範圍後,接著就要來好好的了解一下表單組成的型式!!

如下所示,一個表單(FORM)裏共可宣告七個控制項,而其中 INPUT 控制項內,又可宣告十種屬性!! 

以上,看不懂的人,我確定你被當掉了… 請回第一篇重修~  XD

 


好,現在開始進入此篇的主題~

假設我們寫GDL時,碰到了上面的網頁,相信經過前面五篇的努力,大家現在應該不到一分鐘就可以搞定這頁吧!! (搞不定的人請回第一篇重修 )

所以,現在我要講的重點不在於 格子如何填、選項如何拉,而是 提交表單  的方式~

 

首先,我們可以看一下此表單的源始碼,其中在表單標籤<FORM> 裏,共宣告了三個屬性,分別是 method 、action 與  name   

method  這個屬性為定義單表傳送的方式 !!  有 "POST" 與 "GET"  兩種。(前者透過port 來傳送欄位資料,後者是直接把欄位資料加在action後面(有長度限制) )

action    這個屬性則是單表所在URL ( 可以是cgi 、asp 、php …),可用相對路徑(省略域名不寫)或絕對路徑來表示。

name     這個屬性是指表單的名稱

有Method 與 action 屬性存在,即代表這個表單是可以被提交的 ~ 

接著,再來看要如何提交~

因為必需考量到網頁中可能同時有多個表單存在!! 所以可以從兩個方向來處理~

1.指定表單名稱或位於網頁的第i個表單來提交                                 PostForm:FORM1 或是  表單的順序                    

2.借由該表單內控制項屬性為submit 的物件來提交                         ClickButton:B1 或是 提交表單

(若我們是利用程式的DEBUG分析來自動產生指令,就就會得到   ClickButton:B1 來作為送出表單的指令)

順便也看一下表單裏的另外兩個鈕~ 

第一個鈕:它是 INPUT_BUTTON  ,這種鈕若沒加變化的話,只是一個連結的按鈕而已!! 並無法達成提交表單的效果~

第二個鈕:它不屬於 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>

<script language="JavaScript">
function check_form() {
        if( chkCoreProfile()==0 )
        {
          theform1 = document.FORM1;
          theform1.action = "";
          theform1.method = "post";
          theform1.submit();
        }
}
</script>

從這段JS 中可看到,變數 theform1 定義為網頁中名為'FORM1'的這個表單,接著再定義其Action與Method,最後補一個SUBMIT 的動作 !!

所以按了這個鈕後,自然也會有表單送出的效果~

 

 

好,了解表單提交的運作方式後,再來要介紹一個模擬表單送出資料的指令:               【03-網頁控制類】

PostData:輸出串,參照頁,Content-Type                          依參數值在WebBrowser中直接發送POST請求

輸出串之定義為:Url-action?欄位名1=值&欄位名2=值&欄位名3=值…
參照頁為選擇性參數
Content-Type為選擇性參數,預設為"application/x-www-form-urlencoded"

這個指令就是利用post 的方法把表單中的所有欄位名與其值串加起來,再由Url-action 傳送出去~

所以與我們上面提到的表單送出,是完全同樣的原理!!

而所謂的參照頁,指的就是給定一個表單送出的所在網頁~

比如常會遇見,步驟一 ---> 步驟二 ----> 步驟三  這種循序的申請空間,此時若我們想要跳過步驟一、二直接到三的話

那通常會指定參照頁為步驟一的網頁,再用postdata 送出步驟二的相關資料,就可以直接進入步驟三的頁面了~

 

來個實例: Xuite  的登入

若是正常的方式,我們會用DEBUG 來生成指令~

go:http://my.xuite.net/
SetFieldValue:uid=id
SetFieldValue:pw=pw
ClickLink:goRegist()

當然也可改用表單名 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:http://member.xuite.net/HiReg/authenticationv2?version=1.0&curl=http%3A%2F%2Fmember.xuite.net%2FUsers%2FHiMember2A.jsp&siteid=5
&sessionid=&channelurl=http%3A%2F%2Fmember.xuite.net%2FUsers%2FgetInformation.jsp&others=&
checksum=7a18671addd18c02bfc303978bdc69c3&loginurl=loginform2.jsp&uid=帳號&pw=密碼

 

了解方式以後,一定會有人問,我用原本的方式來登入不是容易的多嗎? 指令還可自動生成,我幹嘛沒事找事做呀?

用PostData 的好處除了不必先進登入頁(可省掉廣告或頁面本身的錯誤)外,重點在於可以閃掉一些屬於 Client-side 的Validation檢驗或是警告、對話窗口~

所以這個指令可是五星級必學的喔!!

 

好,那接著再來看俱有  file 欄位的表單會是如何?

以 http://www.friendlyshare.de/  這個上傳空間為例子!!

下面是表單內的源始碼 ( 我把文字都去掉, 只留表單內的所有控制項,這樣看起來比較清爽)

<FORM ACTION="cgi-bin/fileuploader.cgi" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="file" size="61">
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit Form" >
</FORM>

大家可以清楚的看到,在表單標籤<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 內的所有控制項都取出來,就行囉~

<FORM ACTION="cgi-bin/fileuploader.cgi" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="file" size="61">
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit Form" >
</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-網頁控制類】

go:about:blank
AddWebHtml:<FORM ACTION="http://www.friendlyshare.de/cgi-bin/fileuploader.cgi" METHOD="post" ENCTYPE="multipart/form-data"><INPUT TYPE="file" NAME="file" size="61"><INPUT TYPE="submit" NAME="Submit" VALUE="Submit Form" ></FORM>

再來,就與我們實際在 http://www.friendlyshare.de/ 這個頁面的操作方式一樣了!!

 

 

接著我們再來看一個例子,它的ACTION是隱藏兼動態的~

例: http://www.mediafire.com/   空間的自訂網頁上傳

根據上面教過的,首先我們要找到上傳欄位所在的表單源始碼,那我們可以利用 "multipart/form-data" 作為關鍵字來搜尋~

然後你會發現在 <FORM></FORM> 間的內容是落落長…

不過別理它,我們只要把控制項相關的標籤留下就好,其它的統統刪掉,自然就會清爽多了~

<form class="form" name="form_upload" method="POST" id="form_upload" action="" ENCTYPE="multipart/form-data" />
</form>

不過這次真是清爽過頭了,怎會只有剩這些而已呢… 

問題一: ACTION 是空的??

問題二:沒有 TYPE=FILE 的欄位 ??

問題三:沒有TYPE=SUBMIT 的送出按鈕??  ( 不過還有表單名,所以問題不大)

 

好,那我們就開始一個一個來看~

首先看上圖中,FILE 那格!! 大家有沒感覺它的樣式粉花俏,與一般我們看到的都不一樣吧!! XD

這種的就是動態生成的 !! 所以在源始碼裏,只能找到動態生成的模式,但卻無法直接看到動態生成後,該欄位的相關屬性~

不過這也不是問題啦 !!  因為NT的DEBUG分析是 讀取已完成的網頁元件 ,所以我們照樣可以用它來得到動態生成後的欄位資訊~

從上圖中可清楚看到,那個 TYPE=FILE 的格子,名字叫 file_name0  !! 這樣一來就解決了第二個問題了!!

有了檔案欄位的屬性資訊後,我們就可以將它加上去剛整理完的表單中!!

<form class="form" name="form_upload" method="POST" id="form_upload" action="" ENCTYPE="multipart/form-data" />
<input type="file" name="file_name0" size="20" >
</form>

 

那處理好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 後,會有二個符合的地方~

<script language="JavaScript1.2" src="/js/updated.js" type="text/javascript"></script>
<script language="JavaScript" src="/js/main.js" type="text/JavaScript"></script>

第一個是叫你把這個網頁加入我的最愛中,沒啥小路用的,不用理它… (你下回去看就知了)

第二個一看就知粉重要,我們要的就是它了!! (記住之前提過相對路徑與絕對路徑的定義,就可以把它下載回來了~)

用文書軟體打開 main.js 後,搜尋剛才在網頁原始碼裏找不到的 "handle_upload",你就會看到如下的function。

function handle_upload() {
        var filefield = document.getElementById('file_name0');
        if (filefield.value == "") {
                alert("Please click the 'Browse' or 'Choose' button and select a file before clicking 'Upload File(s) to MediaFire'");
        }
        else {
                identifier = identifier_seed;
               
document.form_upload.action='http://upload.mediafire.com/' + identifier + 'p';               
                P7_swapClass(1,'none','preupload','progressupload','div');
                Uploading = true;
                flip_links_blank("blank");
                document.getElementById('form_upload').submit();
        }
}

此時,大家應該都看出來了吧!!  黃色標記處說明了action 值是如何產生的。藍色標記處則作了一個表單送出的動作~!

再回到網頁原始檔去搜 identifier_seed ,你就會發現如下的內容~(綠色字的部份是每次都會不一樣的!!)

identifier_seed = 'ozj4kzdk4dm';
identifier = ''; 

所以它的 action 就該是長成如下的模樣~

http://upload.mediafire.com/ozj4kzdk4dmp

這樣子所有的問題都解決了!!

go:about:blank
HttpStrToVariable:http://www.mediafire.com/,identifier_seed = ',',***Variable5***
AddWebHtml:<form name="form_upload" method="post" enctype="multipart/form-data" action="http://upload.mediafire.com/***Variable5***p" ><input type="file" name="file_name0" size="20"></form>

 

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

 

 

Free Web Hosting