學(xué)習(xí)目標(biāo)在完成本章的學(xué)習(xí)后，您將能夠：創(chuàng)建表單 獲取表單提交的數(shù)據(jù) 獲取超鏈接傳遞的數(shù)據(jù) 處理數(shù)據(jù) 了解JavaScript腳本

目錄9.1創(chuàng)建和編輯表單

9.1.1創(chuàng)建表單

9.1.2添加表單元素9.1.3定義表單數(shù)據(jù)提交方式

9.2在PHP中接收和處理表單數(shù)據(jù)

9.2.1

$_GET[]方法獲取表單數(shù)據(jù)

9.2.2

$_POST[]方法獲取表單數(shù)據(jù)

9.2.3使用JavaScript驗證表單的輸入

9.3文件上傳9.3.1使用POST方法上傳文件

9.3.2配置文件上傳9.4

綜合案例9.1.1創(chuàng)建表單9.1創(chuàng)建和編輯表單表單是使用<form></form>標(biāo)簽來創(chuàng)建并定義表單的開始和結(jié)束位置，中間包含多個元素，表單結(jié)構(gòu)如下：<formid="id"name="form_name"method="method"action="url"enctype="value"target="target_win"> ……插入的表單元素</form>9.1.1創(chuàng)建表單9.1創(chuàng)建和編輯表單<form>標(biāo)記的屬性如表9-1所示。函數(shù)描述name表單的名稱id表單的ID號method該屬性用于定義表單中數(shù)據(jù)的提交方式，可取值為GET和POST中的一個。GET方法將表單內(nèi)容附加在URL地址后面進(jìn)行提交，所以對提交信息的長度進(jìn)行了限制，不可以超過8192個字符，同時GET方法不具有保密性，不適合處理如信用卡號等要求保密的內(nèi)容，而且不能傳送非ASCII的字符；POST方法將用戶在表單中填寫的數(shù)據(jù)包含在表單的主體中，一起傳送到服務(wù)器，不會再瀏覽器的地址欄中顯示，這種方式傳送的數(shù)據(jù)沒有大小限制。默認(rèn)為GET方法。action該屬性定義將表單中的數(shù)據(jù)提交到哪個文件中進(jìn)行處理，這個地址可以是絕對URL，也可以是相對的URL。如果這個屬性是空值則提交到當(dāng)前文件。enctype設(shè)置表單資料的編碼格式target該屬性和鏈接中的同名屬性類似，用來指定目標(biāo)窗口或目標(biāo)幀9.1.2添加表單元素9.1創(chuàng)建和編輯表單表單（form）由表單元素組成。常用的表單元素有以下幾種標(biāo)記：輸入域標(biāo)簽<input>、選擇域標(biāo)簽<select>和<option>，文本域標(biāo)簽<textarea>等。1．輸入域標(biāo)簽<input>輸入域標(biāo)簽<input>是表單中最常用的標(biāo)記之一。常用的文本域、按鈕、單選按鈕、復(fù)選框等構(gòu)成一個完整的表單。其語法格式如下：<form><inputtype="type_name"name="field_name"id="ID"/></form>其中參數(shù)name是指輸入域的名稱，參數(shù)type是指輸入域的類型，參數(shù)id是指輸入域的ID。在<inputtype="">標(biāo)簽中一共提供了10種類型的輸入域，用戶所選擇使用的類型有type屬性指定。9.1.2添加表單元素9.1創(chuàng)建和編輯表單2．選擇域標(biāo)簽<select>和<option>通過選擇域標(biāo)簽<select>和<option>可以建立一個列表或菜單。菜單節(jié)省空間，正常狀態(tài)下只能看到一個選項，單擊按鈕打開菜單后才能看到全部的選項。列表可以顯示一定數(shù)量的選項，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項。其語法格式如下：<selectname="select_name"id="ID"size="value"multiple="multiple"><optionvalue="value"selected>選項1</option><optionvalue="value">選項2</option><optionvalue="value">選項3</option></select>其中參數(shù)name表示選擇域的名稱，參數(shù)size表示列表的行數(shù)，參數(shù)value表示菜單選項值，參數(shù)multiple表示以菜單方式顯示數(shù)據(jù)，省略則以列表方式顯示數(shù)據(jù)。9.1.2添加表單元素9.1創(chuàng)建和編輯表單3．文本域標(biāo)簽<textarea>文本域標(biāo)簽<textarea>用來制作多行的文本域，可以在其中輸入更多的文本。其語法格式如下：<textareaname="textarea_name"id="ID"cols="value"rows="value"wrap="value">……文本內(nèi)容</textarea>其中，參數(shù)name表示文本域的名稱，rows表示文本域的行數(shù)（字符為單位），cols表示文本域的列數(shù)（字符為單位）。warp用于設(shè)定顯示和送出時的換行方式，值為off標(biāo)識不自動換行；值為hard表示自動按Enter鍵換行，換行標(biāo)記一同被發(fā)送到服務(wù)器，輸出時也會換行；值為soft表示自動按Enter鍵換行，換行標(biāo)記不會被發(fā)送到服務(wù)器，輸出時任然為一列。9.1.2添加表單元素9.1創(chuàng)建和編輯表單【例9-1】下面創(chuàng)建一個表單，表單元素包含文本域、單選按鈕、復(fù)選框，下拉列表和提交按鈕等，其效果圖如下所示：9.1.3定義表單數(shù)據(jù)提交方式9.1創(chuàng)建和編輯表單表單數(shù)據(jù)的提交方式有兩種，即POST方法和GET方法。設(shè)置表單提交數(shù)據(jù)的方法非常簡單，只需設(shè)置<form>表單中俄method屬性值即可，如下所示：<formid="form1"name="form1"method="post"action="">或<formid="form1"name="form1"method="get"action="">9.1.3定義表單數(shù)據(jù)提交方式9.1創(chuàng)建和編輯表單1．POST方法POST方法不依賴于URL，不會將傳遞的參數(shù)值顯示在地址欄中。另外，POST方法可以沒有限制的傳遞數(shù)據(jù)到服務(wù)器，所有提交的信息在后臺傳輸，用戶在瀏覽器端是看不到這一過程的，安全性高。所以，POST方法比較適合用于發(fā)送一個保密的（如銀行卡號）或者大量的數(shù)據(jù)到服務(wù)器?！纠?-2】下面使用POST方法提交表單信息到服務(wù)器，HTML代碼如下。9.1.3定義表單數(shù)據(jù)提交方式9.1創(chuàng)建和編輯表單<formid="form1"name="form1"method="post"action="9.1.3.php"><tablewidth="500"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="80"height="25">銀行卡號</td><td><labelfor="yhkh"></label><inputtype="text"name="yhkh"id="yhkh"/></td></tr><tr><tdheight="25"> </td><td><inputtype="submit"name="tjBtn"id="tjBtn"value="提交"/></td></tr></table></form>9.2.1

$_GET[]方法獲取表單數(shù)據(jù)9.2在PHP中接收和處理表單數(shù)據(jù)使用$_GET[]方法獲取表單數(shù)據(jù)的格式如下：$_GET["name"]【例9-4】創(chuàng)建一個表單，設(shè)置表單以get方式提交數(shù)據(jù)，在表單中加入一個文本框，設(shè)置name屬性為username，表單代碼如下：<formid="form1"name="form1"method="post"action="9.2.1.php"><tablewidth="500"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="80">用戶名</td><td><labelfor="username"></label><inputtype="text"name="username"id="username"/></td></tr><tr><td> </td><td><inputtype="submit"name="tjBtn"id="tjBtn"value="提交"/></td></tr></table></form>9.2.1

$_GET[]方法獲取表單數(shù)據(jù)9.2在PHP中接收和處理表單數(shù)據(jù)獲取表單元素的頁面9.2.1.php代碼如下：<?php$username=$_GET["username"];//定義變量username獲取表單數(shù)據(jù)echo$username;//顯示已獲取的數(shù)據(jù)?>9.2.2

$_POST[]方法獲取表單數(shù)據(jù)9.2在PHP中接收和處理表單數(shù)據(jù)使用$_POST[]方法獲取表單數(shù)據(jù)的格式如下：$_POST["name"]【例9-5】將【例9-4】中的表單設(shè)置為以post方式提交數(shù)據(jù)，其獲取表單元素的頁面9.2.1.php代碼如下：<?php$username=$_GET["username"];//定義變量username獲取表單數(shù)據(jù)$username=$_POST["username"];//定義變量username接受表單數(shù)據(jù)echou$username;//顯示已獲取的數(shù)據(jù)?>9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)JavaScript腳本語言與其他語言一樣，有其自身的基本數(shù)據(jù)類型、表達(dá)式和運算符以及程序的基本框架結(jié)構(gòu)。1．JavaScript簡介JavaScript是世界上最流行的編程語言。這門語言可用于HTML和web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。JavaScript是腳本語言，也是一種輕量級的編程語言。它可插入HTML頁面的編程代碼，插入HTML頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)2．JavaScript用法HTML中的腳本必須位于<script>與</script>標(biāo)簽之間，腳本可被放置在HTML頁面的<body>和<head>部分中。其語法格式如下：<scripttype="text/javascript"> ......javascript代碼</script>JavaScript語法規(guī)則和語句書寫方法在本章節(jié)不做詳細(xì)講述，請讀者自行查看JavaScript手冊。9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)3．JavaScript數(shù)據(jù)類型JavaScript主要有6種數(shù)據(jù)類型，如表9-4所示。數(shù)據(jù)類型描

述字符串型使用單引號或雙引號括起來的一個或多個字符數(shù)據(jù)型包括整數(shù)和浮點數(shù)布爾型布爾型常量只有兩種狀態(tài)，即TRUE或FLASE對象型用于指定JavaScript程序中用到的對象null值可以通過給一個變量賦null值來清除變量的內(nèi)容undefined表示該變量尚未被賦值9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)4.JavaScript變量變量是用于存儲信息的"容器"。就像代數(shù)那樣x=5、y=6、z=x+y在代數(shù)中，我們使用字母（比如x）來保存值（比如5）。通過上面的表達(dá)式z=x+y，我們能夠計算出z的值為11。在JavaScript中，這些字母被稱為變量。建議的變量命名規(guī)則描述如下：（1）變量必須以字母開頭；（2）變量也能以$和_符號開頭（不過我們不推薦這么做）；（3）變量名稱對大小寫敏感（y和Y是不同的變量）。9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)5．JavaScript表單驗證HTML表單驗證可以通過JavaScript來完成。下面我們以一個實例來看下JavaScript表單驗證的使用辦法。【例9-6】該實例用于判斷表單字段(fname)值是否存在，如果存在，則彈出信息，否則阻止表單提交，其代碼如下：<scripttype="text/javascript"> functionvalidateForm(){ varx=document.forms["myForm"]["fname"].value;//使用Document對象獲取表單內(nèi)元素信息 if(x==null||x==""){//判斷用戶輸入是否為空 alert("需要輸入名字。");//提示 returnfalse; } }</script>9.2.3使用JavaScript驗證表單的輸入9.2在PHP中接收和處理表單數(shù)據(jù)5．JavaScript表單驗證以上JavaScript代碼可以通過HTML代碼來調(diào)用。表單代碼如下：<formname="myForm"action="9.2.3.php"onsubmit="returnvalidateForm()"method="post">名字:<inputtype="text"name="fname"><inputtype="submit"value="提交"></form>執(zhí)行程序，運行結(jié)果如圖9-6所示：9.3.1使用POST方法上傳文件9.3文件上傳在Web開發(fā)中經(jīng)常會遇到從客戶端上傳文件到服務(wù)器端的問題。通常，文件上傳使用的是HTTP的POST方式，使用POST方式傳遞文件到服務(wù)器端。要完成文件上傳處理，首先要定義HTML表單的enctype屬性為“multipart/form-data”，代碼如下：<formenctype="multipart/form-data"method="post"action="url">只有這樣的表單，才能確保文件可以提交并上傳。其中，url要替換為一個可以處理文件上傳的真實PHP文件。9.3.1使用POST方法上傳文件9.3文件上傳例9-7】創(chuàng)建一個支持文件上傳的表單，該表單將一個文件提交至相應(yīng)的php文件中進(jìn)行處理，處理操作稍后在例【例9-8】中完成。創(chuàng)建的支持文件上傳的表單代碼如下：<!--表單的enctype屬性必須指定為multipart/form-data--><formenctype="multipart/form-data"method="post"action="9.3.1_1.php"><labelfor="uploadfile">請選擇上傳文件</label><!--input的type屬性指定為file,name屬性值將會在文件上傳的處理文件中使用--><inputtype="file"name="uploadfile"id="uploadfile"/><inputtype="submit"name="tjBtn"id="tjBtn"value="提交"/></form>9.3.1使用POST方法上傳文件9.3文件上傳在PHP程序中使用全局變量$_FILES處理文件上傳，$_FILES是一個數(shù)組，包含了要上傳的文件的信息。下面以上述HTML表單為例，介紹$_FILES數(shù)組的內(nèi)容。$_FILES["uploadfile"]["name"]表示上傳文件的名稱。$_FILES["uploadfile"]["type"]表示上傳文件的類型，例如“image/gif”。$_FILES["uploadfile"]["size"]表示上傳文件的大小，單位為字節(jié)。$_FILES["uploadfile"]["tmp_name"]表示文件上傳后，在服務(wù)器端存儲的臨時文件名。$_FILES["uploadfile"]["error"]表示和文件上傳的相關(guān)錯誤信息。9.3.1使用POST方法上傳文件9.3文件上傳文件提交后，一般會被存儲到服務(wù)器的默認(rèn)臨時目錄中，可以通過修改php.ini中的upload_tmp_dir項，修改為其他路徑。使用函數(shù)move_uploaded_file()將上傳的文件移動到指定的目錄下。該函數(shù)的原型如下：move_uploaded_file(filename,destination)第1個參數(shù)filename指合法的上傳文件，第2個參數(shù)destination是移動后的目標(biāo)文件。如果上傳的文件不合法，或由于某種原因無法移動文件，該函數(shù)會返回FALSE。9.3.1使用POST方法上傳文件9.3文件上傳【例9-8】處理從例【例9-7】表單中提交的文件上傳信息PHP程序，其代碼如下：<?php//將文件移至服務(wù)器的根目錄的upload目錄下，upload目錄必須事先創(chuàng)建$upload_path=$_SERVER["DOCUMENT_ROOt"]."/upload/";$dest_file=$upload_path.basename($_FILES["uploadfile"]["name"]);//將臨時文件移到目標(biāo)文件夾if(move_uploaded_file($_FILES["uploadfile"]["tmp_name"],$dest_file)){echo"文件已上傳";}else{echo"文件上傳發(fā)生錯誤：".$_FILES["uploadfile"]["error"];}?>9.3.2配置文件上傳9.3文件上傳在php.ini中如果我們不對post_max_size，upload_max_filesize

這些參數(shù)進(jìn)行修改,默認(rèn)最多只能上傳2MB的文件了，如果幾十MB或更大的就無法上傳了，下面我來介紹修改PHP