實驗十二 PHP表單處理

1、實驗十二 PHP表單處理 一、實驗?zāi)康呐c要求1.復(fù)習(xí)編寫和測試PHP程序的方法。2.掌握創(chuàng)建表單的方法。3.掌握添加和設(shè)置表單元素的方法。4.掌握獲取表單參數(shù)的方法。5.掌握驗證表單數(shù)據(jù)正確性的方法二、實驗內(nèi)容1. GET和POST方法表單屬性中的“方法method”：用于設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器的方法。l POST：用標(biāo)準(zhǔn)輸入方式將表單中的數(shù)據(jù)傳送給服務(wù)器，服務(wù)器用讀取標(biāo)準(zhǔn)輸入的方式讀取表單內(nèi)的數(shù)據(jù)。l GET（默認(rèn)）：將表單內(nèi)的數(shù)據(jù)附加到URL后傳送給服務(wù)器，服務(wù)器用讀取環(huán)境變量的方式讀取表單內(nèi)的數(shù)據(jù)。注意：發(fā)送用戶名和密碼等機密信息時，應(yīng)使用POST方法?！救蝿?wù)1】在網(wǎng)頁中創(chuàng)建2個表單

2、，分別使用POST和GET方法傳遞數(shù)據(jù)，比較二者區(qū)別。要求：（1）新建index1.php網(wǎng)頁，存放在“task1”文件夾中，在該網(wǎng)頁中創(chuàng)建2個表單form1和form2，分別設(shè)置用POST和GET方法來提交表單數(shù)據(jù)，并在表單中添加并設(shè)置表單控件，效果如下圖所示：（2）新建post.php頁面，存放在“task1”文件夾中，在該網(wǎng)頁中輸入PHP代碼，采用POST方法獲取表單form1的數(shù)據(jù)。（3）新建get.php頁面，存放在“task1”文件夾中，在該網(wǎng)頁中輸入PHP代碼，采用GET方法獲取表單form2的數(shù)據(jù)。步驟：（1）將教師機共享的“實驗12”文件夾中的“task1”“task3”文件

3、夾復(fù)制到文件夾“C:phpstudyWWW”中。打開Dreamweaver CS5軟件，把軟件右上角的“設(shè)計器”模式換成“經(jīng)典”。如下圖所示：（2）新建一個PHP頁面，并保存在文件夾“C:phpstudyWWWtask1”中，命名為index1.php。將網(wǎng)頁文檔的標(biāo)題改成“POST和GET方法比較”。 （3）在index1.php網(wǎng)頁中創(chuàng)建一個表單form1，在“屬性”面板中，修改它的屬性，如下圖所示：在該表單form1中添加表單元素，如下圖所示（其中藍色文字是說明）：設(shè)置“用戶名”之后文本字段的屬性，如下圖所示:設(shè)置“密碼”之后文本字段的屬性，如下圖所示:設(shè)置“提交”按鈕的屬性，如下圖所示

4、:（4）在index1.php網(wǎng)頁中再創(chuàng)建一個表單form2，在“屬性”面板中，修改它的屬性，如下圖所示：（5）在該表單form2中添加表單元素，如下圖所示（其中藍色文字是說明）：設(shè)置“用戶名”之后文本字段的屬性，如下圖所示:設(shè)置“密碼”之后文本字段的屬性，如下圖所示:設(shè)置“提交”按鈕的屬性，如下圖所示:（6）新建一個PHP頁面，并保存在文件夾“C:phpstudyWWWtask1”中，命名為post.php。將網(wǎng)頁文檔的標(biāo)題改成“POST”，然后切換到“代碼”視圖，在和之間添加代碼，如下圖所示：（7）新建一個PHP頁面，并保存在文件夾“C:phpstudyWWWtask1”中，命名為get.

5、php。將網(wǎng)頁文檔的標(biāo)題改成“GET”，然后切換到“代碼”視圖，在和之間添加代碼，如下圖所示：（8）完成后，保存這3個網(wǎng)頁文檔，按下F12鍵在瀏覽器中預(yù)覽index1.php的效果。此時，會彈出設(shè)置服務(wù)器的提示，單擊“是”，就可以在站點設(shè)置中建立一個新站點，如下圖所示：輸入站點名稱：PHP實驗，本地站點文件夾：C:phpstudyWWW。單擊左側(cè)的“服務(wù)器”，會出現(xiàn)一個設(shè)置服務(wù)器的窗口，點擊“+”按鈕，添加一個遠(yuǎn)程服務(wù)器。在彈出的窗口中設(shè)置服務(wù)器的基本和高級選項（如下圖所示），完成后，單擊“保存”按鈕。服務(wù)器設(shè)置完成后，預(yù)覽網(wǎng)頁index1.php，如下圖所示：在“使用POST提交數(shù)據(jù)”中輸入

6、用戶名、密碼，然后點擊“提交”按鈕，將打開post.php網(wǎng)頁，如下圖所示：請注意觀察地址欄的內(nèi)容中不包含用戶名和密碼的值。在“使用GET提交數(shù)據(jù)”中輸入用戶名、密碼，然后點擊“提交”按鈕，將打開get.php網(wǎng)頁，如下圖所示：請注意觀察地址欄的內(nèi)容中包含了用戶名username2和密碼password2的值。2. 驗證表單數(shù)據(jù)的正確性驗證表單數(shù)據(jù)的正確性是指檢查訪問者在表單中輸入的數(shù)據(jù)類型是否正確，以防表單提交到服務(wù)器后指定的文本域或所有文本域中包含無效的數(shù)據(jù)?！救蝿?wù)2】制作一個“用戶注冊”頁面，并使用PHP代碼驗證表單數(shù)據(jù)的正確性。步驟：（1）打開Dreamweaver CS5軟件，新建一

7、個PHP頁面，并保存在文件夾“C:phpstudy WWWtask2”中，命名為index2.php。將網(wǎng)頁文檔的標(biāo)題改成“用戶注冊”。 （2）在index2.php網(wǎng)頁中創(chuàng)建一個表單form1，在“屬性”面板中，修改它的屬性，如下圖所示：（3）在該表單form1中添加文字“請?zhí)顚懸韵伦孕畔ⅲ骸?，然后插入一個8行2列的表格，表格的屬性如下圖所示：合并表格最后一行的2個單元格，將表格的背景顏色修改成淺藍色（可以根據(jù)你自己喜好來修改顏色）。然后在該表單form1中添加表單元素，如下圖所示（其中藍色文字是說明，*代表必填信息）：設(shè)置“用戶名”之后文本字段的屬性，如下圖所示:設(shè)置“密碼”之后文本字段

8、的屬性，如下圖所示:設(shè)置“重復(fù)密碼”之后文本字段的屬性，如下圖所示:設(shè)置“性別”單選按鈕“男”和“女”的屬性，如下圖所示:設(shè)置“E-mail電子郵箱”之后文本字段的屬性，如下圖所示:設(shè)置“手機號碼”之后文本字段的屬性，如下圖所示:設(shè)置“興趣愛好”之后的各個復(fù)選框?qū)傩?，如下圖所示:其他復(fù)選框的設(shè)置屬性的方法類似，只需設(shè)置“選定值”為各個名稱，然后初始狀態(tài)都是“未選中”初態(tài)。設(shè)置“提交數(shù)據(jù)”按鈕的屬性，如下圖所示:（4）新建一個PHP頁面，并保存在文件夾“C:phpstudyWWWtask2”中，命名為getuser.php。將網(wǎng)頁文檔的標(biāo)題改成“用戶注冊”，然后切換到“代碼”視圖，在和之間添加代

9、碼，如下圖所示：（5）完成后，保存這2個網(wǎng)頁文檔，按下F12鍵在瀏覽器中預(yù)覽index2.html的效果。如下圖所示：在頁面中輸入“注冊信息”，然后點擊“提交數(shù)據(jù)”按鈕，將打開getuser.php網(wǎng)頁，顯示出提示信息及注冊成功的用戶名，如下圖所示：如果沒有輸入用戶名、密碼或手機號碼，或者兩次輸入的密碼不一致，將會彈出對應(yīng)的提示錯誤對話框。如下圖所示： 【任務(wù)3】制作一個PHP頁面，用于計算2個數(shù)的加減乘除，并將結(jié)果輸出顯示。(作業(yè))將該PHP頁面保存在文件夾“C:phpstudyWWWtask3”中，命名為index3.php。步驟：（1）打開Dreamweaver CS5軟件，新建一個PH

10、P頁面，并保存在文件夾“C:phpstudy WWWtask3”中，命名為index3.php。將網(wǎng)頁文檔的標(biāo)題改成“計算”。 （2）在index3.php網(wǎng)頁中創(chuàng)建一個表單form1，在“屬性”面板中，修改它的屬性，如下圖所示：（3）在該表單form1添加表單元素，完成加法計算，如下圖所示（其中藍色文字是說明）：設(shè)置第一個文本字段的屬性，如下圖所示:設(shè)置第二個文本字段的屬性，如下圖所示:設(shè)置第三個文本字段的屬性，如下圖所示:設(shè)置“等于”按鈕的屬性，如下圖所示:（4）切換到“代碼”視圖，在和之間添加代碼，如下圖所示：（5）完成后，保存index3.php網(wǎng)頁文檔，按下F12鍵在瀏覽器中預(yù)覽效果。在表單中輸入2個數(shù)字，然后點擊“等于”按鈕，看看右側(cè)的文本框中是否能顯示出正確的結(jié)果。如下圖所示：（6）用類似的方法，在表單中繼續(xù)添加表單元素，完成減法、乘法和除法運算，并將結(jié)果輸出顯示。表單如下圖所示，請同學(xué)們分析題意，自己修改相應(yīng)代碼。編程提示：可以使用ifelse if分支結(jié)構(gòu)來編程。注意除法的除數(shù)不能為0，如果用戶輸入0，需彈出對應(yīng)的提示錯誤對話框。如下圖所示：乘法計算的結(jié)果文本框的字符寬度和最多字符數(shù)應(yīng)設(shè)置為30，其他計算結(jié)果的文本框?qū)挾瓤梢允?0。在顯示某一個計算結(jié)果時，除了當(dāng)前輸入的2個