《PHP Web應(yīng)用開(kāi)發(fā)案例教程》630-9（阮云蘭）教案 第12課 表單及常用表單元素

PAGE6PAGE6PAGE7PAGE7

課題表單及常用表單元素課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握表單和常用表單元素的創(chuàng)建方法（2）掌握表單提交和參數(shù)值獲取方式素質(zhì)目標(biāo)：（1）能夠領(lǐng)會(huì)PHP中表單及其元素在生活中的作用（2）培養(yǎng)為人民服務(wù)、樂(lè)于奉獻(xiàn)的精神教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：表單和常用表單元素的創(chuàng)建方法教學(xué)難點(diǎn)：表單提交和參數(shù)值獲取方式教學(xué)方法案例分析法、問(wèn)答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（38min）第2節(jié)課：→傳授新知（20min）→課堂實(shí)訓(xùn)（15min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，使學(xué)生預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)，增加學(xué)生的學(xué)習(xí)興趣考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：很多網(wǎng)頁(yè)在搜集用戶信息的時(shí)候都使用到了表單，常見(jiàn)的表單元素有哪些？你知道如何使用PHP制作表單來(lái)搜集信息嗎？通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（38min）【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解PHP中的表單，以及常用表單元素的創(chuàng)建方法7.1表單及常用表單元素?【教師】安排學(xué)生掃碼觀看視頻“表單及常用表單元素”，講解知識(shí)?【學(xué)生】掃碼觀看、理解、記憶表單主要用于收集用戶信息，它是網(wǎng)頁(yè)程序與用戶交互的重要渠道。例如，用戶在網(wǎng)頁(yè)上進(jìn)行注冊(cè)、登錄和留言等操作時(shí)，都是通過(guò)表單向網(wǎng)站數(shù)據(jù)庫(kù)提交或讀取數(shù)據(jù)的。在用戶填寫完注冊(cè)信息并單擊“提交”按鈕后，程序?qū)⒈韱蝺?nèi)容從客戶端瀏覽器傳送到服務(wù)器端，經(jīng)過(guò)服務(wù)器上的PHP程序進(jìn)行相應(yīng)處理后，再把反饋信息傳送到客戶端瀏覽器，從而實(shí)現(xiàn)客戶端和服務(wù)器端的交互。一個(gè)網(wǎng)頁(yè)表單通常由表單標(biāo)簽和各種表單元素組成，下面分別介紹。?【教師】講解“人民至上”中的內(nèi)容，提醒學(xué)生建立起為人民服務(wù)的理念?【學(xué)生】掃碼觀看、理解、記憶登錄中華人民共和國(guó)中央人民政府網(wǎng)，在“互動(dòng)”模塊“我向總理說(shuō)句話”標(biāo)題下方單擊“我要留言”按鈕，即可給相關(guān)部門留言，反應(yīng)自己對(duì)國(guó)家建設(shè)的建議或想法；單擊“留言選登”按鈕，可以看到其他人的留言。在留言提交后，相關(guān)部門將對(duì)留言進(jìn)行回復(fù)，說(shuō)明國(guó)家對(duì)當(dāng)前問(wèn)題的政策及未來(lái)工作的重心，為廣大群眾解疑釋惑。7.1.1認(rèn)識(shí)及創(chuàng)建表單表單的HTML標(biāo)簽為<form>，添加<form>標(biāo)簽，并在其中放置相關(guān)表單元素，如文本字段、復(fù)選框、單選框、提交按鈕等，即可創(chuàng)建一個(gè)表單，表單結(jié)構(gòu)如下：<formname="form1"method="post"action="">…//省略插入的表單元素</form>下面簡(jiǎn)單介紹<form>標(biāo)簽的常用屬性。name：表單名稱，用戶可自定義表單名稱。method：表單提交方式，通常為post或get，7.2.1節(jié)將會(huì)介紹兩者的區(qū)別。action：指定處理表單頁(yè)面的URL，通常為具有數(shù)據(jù)處理能力的Web程序，如后綴為.php的動(dòng)態(tài)網(wǎng)頁(yè)。?【教師】通過(guò)多媒體展示“插入表單”圖片，并提醒學(xué)生在Dreamweaver中插入表單的方法非常簡(jiǎn)單，在設(shè)計(jì)視圖中定位插入點(diǎn)后，單擊“插入”面板“表單”類別中的“表單”按鈕，即可插入表單?【學(xué)生】注意、理解、記憶7.1.2認(rèn)識(shí)表單元素一個(gè)表單（form）通常包含很多表單元素。常用的表單元素有輸入域<input>、選擇域<select>和<option>、文本域<textarea>等，下面分別介紹。1．輸入域標(biāo)簽<input>輸入域標(biāo)簽<input>是表單中使用最多的標(biāo)簽之一。常見(jiàn)的文本框、密碼框、按鈕、單選按鈕和復(fù)選框等都是由<input>標(biāo)簽表示的。語(yǔ)法格式如下：<formname="form1"method="post"action=""><inputname="element_name"type="type_name"></form>參數(shù)name是指輸入域的名稱；參數(shù)type是指輸入域的類型。type屬性的取值一共有10種。下表列出了其屬性值及應(yīng)用舉例。?【教師】通過(guò)多媒體展示“type屬性取值及舉例”表格，并進(jìn)行介紹type屬性取值及舉例type屬性值示例說(shuō)明效果text<inputtype="text"value="這是文本框"/>文本框，value為默認(rèn)值checkbox<inputtype="checkbox"value="1"name="cbx"/>打球<inputtype="checkbox"value="2"name="cbx"/>照相<inputtype="checkbox"value="3"name="cbx"/>跳舞復(fù)選框，允許用戶選擇多個(gè)選項(xiàng)file<inputtype="file"value=""/>hidden<inputtype="hidden"value="1"/>隱藏域，用于在表單中以隱含的方式提交變量值image

name="img_btn"/>圖像域，可以用在按鈕位置上的圖像，該圖像具有按鈕的功能type屬性值示例說(shuō)明效果password<inputtype="password"value="123456"/>密碼框，用戶在其中輸入的字符將顯示為*，以起到保密的作用，其屬性意義同文本框radio<inputtype="radio"value="1"name="rdo1"/>男<inputtype="radio"value="2"name="rdo1"/>女單選按鈕，用于設(shè)置一組選項(xiàng)，瀏覽者只能選擇其中一項(xiàng)button<inputtype="button"value="這是按鈕"/>普通按鈕，可以激發(fā)提交表單的動(dòng)作，但一般要配合JavaScript腳本才能進(jìn)行表單處理submit<inputtype="submit"name=

"button"value="提交"/>提交按鈕，將表單內(nèi)容提交到服務(wù)器reset<inputtype="reset"name=

"button"value="重置"/>重置按鈕，清除與重置表單內(nèi)容，用于清除表單中所有文本框的內(nèi)容，并使選擇菜單項(xiàng)恢復(fù)到初始值2．選擇域標(biāo)簽<select>和<option>選擇域標(biāo)簽<select>和<option>用于創(chuàng)建列表或菜單。列表可以顯示一定數(shù)量的選項(xiàng)，如果超出該數(shù)量，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，瀏覽者可以拖動(dòng)滾動(dòng)條查看各選項(xiàng)。菜單可以節(jié)省空間，正常狀態(tài)下只顯示一個(gè)選項(xiàng)，單擊右側(cè)的下三角按鈕，可以展開(kāi)菜單項(xiàng)看到全部選項(xiàng)。列表的實(shí)現(xiàn)代碼如下：<selectname="select"size="3"multiple="multiple"><optionvalue="v1">選項(xiàng)1</option><optionvalue="v2">選項(xiàng)2</option><optionvalue="v3">選項(xiàng)3</option>……</select>參數(shù)name表示選擇域名稱；參數(shù)size表示列表行數(shù)；參數(shù)value表示列表選項(xiàng)值；參數(shù)multiple表示以列表方式顯示數(shù)據(jù)，省略則以菜單方式顯示數(shù)據(jù)。?【教師】通過(guò)多媒體展示例7-1的代碼和運(yùn)行結(jié)果，并進(jìn)行講解選擇域標(biāo)簽的用法。實(shí)例代碼如下：<form><p>請(qǐng)選擇所學(xué)專業(yè)：</p><selectname="select"size="4"multiple="multiple"><optionvalue="v1"selected>平面設(shè)計(jì)</option><optionvalue="v2">網(wǎng)頁(yè)設(shè)計(jì)</option><optionvalue="v3">電腦辦公</option><optionvalue="v3">程序開(kāi)發(fā)</option></select></form>3．文本域標(biāo)簽<textarea>文本域標(biāo)簽<textarea>用于制作多行文本框，可以讓用戶輸入多行文本。語(yǔ)法格式如下：<textareaname="t_name"cols="70"rows="5"wrap="value">淘寶有權(quán)根據(jù)需要不時(shí)地制訂（部分文字省略）</textarea>參數(shù)name表示文本域名稱；參數(shù)cols表示文本域列數(shù)；參數(shù)rows表示文本域行數(shù)（cols和rows都以字符為單位），wrap用于設(shè)定文本換行方式（值為“soft”表示不自動(dòng)換行，值為“hard”表示移動(dòng)硬回車換行），換行符一同發(fā)送到服務(wù)器，輸出時(shí)也會(huì)換行。?【教師】通過(guò)多媒體展示例7-2的代碼和運(yùn)行結(jié)果，并進(jìn)行講解文本域標(biāo)簽的用法。本例通過(guò)具體實(shí)例了解wrap屬性的“soft”和“hard”值的區(qū)別，實(shí)例代碼如下：<formname="form1"method="post"action="index.php"><p><textareaname="n1"rows="3"cols="20"wrap="soft">此處使用軟回車，輸出后不換行。</textarea><textareaname="n2"rows="3"cols="20"wrap="hard">此處使用硬回車，輸出后自動(dòng)換行。</textarea></p><p><inputtype="submit"name="submit"value="提交"></p></form><?php //使用nl2br()函數(shù)將換行符“\n”替換成“<br>”標(biāo)簽，并應(yīng)用echo()進(jìn)行輸出 if(isset($_POST['n1']))echonl2br($_POST['n1'])."<br>"; if(isset($_POST['n2']))echonl2br($_POST['n2']);?>換行方式“soft”和“hard”的使用效果一般在瀏覽器中看不出來(lái)，可以使用nl2br()函數(shù)進(jìn)行轉(zhuǎn)換后查看?！緦W(xué)生】聆聽(tīng)、思考、記錄通過(guò)教師的講解和演示，使學(xué)生了解PHP中的表單，以及常用表單元素的創(chuàng)建方法第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：用戶在填寫完表單后，需要將表單內(nèi)容提交到服務(wù)器，那么前端的表單和服務(wù)器的數(shù)據(jù)庫(kù)是如何進(jìn)行交互通信的呢？【學(xué)生】思考、舉手回答通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過(guò)學(xué)生的回答引入新知，介紹PHP中表單的提交方式和參數(shù)值的獲取方式7.2表單提交方式和參數(shù)值獲取方式用戶在填寫完表單后，需要將表單內(nèi)容提交到服務(wù)器，根據(jù)提交方式的不同，參數(shù)值獲取的方式也不一樣。?【教師】安排學(xué)生掃碼觀看視頻“表單提交方式和參數(shù)值獲取方式”，講解知識(shí)?【學(xué)生】掃碼觀看、理解、記憶7.2.1表單提交方式提交表單的方式有兩種：GET方法和POST方法。采用哪種方法由<form>表單的method屬性指定。1．使用GET方法提交表單GET是<form>表單中method屬性的默認(rèn)方法。使用GET方法提交表單數(shù)據(jù)時(shí)，表單發(fā)送的信息對(duì)任何人都是可見(jiàn)的（所有變量名和值都顯示在URL中）。不過(guò)，由于變量顯示在URL中，把頁(yè)面添加到書(shū)簽中也更為方便。此外，GET對(duì)所發(fā)送信息的數(shù)據(jù)量也有限制，在使用GET方法發(fā)送表單數(shù)據(jù)時(shí)，URL的長(zhǎng)度應(yīng)該限制在1MB字符以內(nèi)。如果發(fā)送的數(shù)據(jù)量太大，數(shù)據(jù)將被截?cái)?，從而?dǎo)致意外或失敗的處理結(jié)果。因此GET方法可用于傳送小數(shù)據(jù)量和非敏感信息。使用GET方法傳遞參數(shù)的格式如下：URL參數(shù)URL參數(shù)1參數(shù)2URL為表單響應(yīng)地址；name和password為表單元素的名稱；zhangsan和123為表單元素的值。URL和表單元素之間用“?”隔開(kāi)，多個(gè)表單元素之間用“&”隔開(kāi)。?【教師】通過(guò)多媒體展示例7-3的代碼和運(yùn)行結(jié)果，并進(jìn)行講解創(chuàng)建一個(gè)表單，并用GET方法提交用戶名和密碼。實(shí)例代碼如下：<formname="form1"method="get"action="index.php"><tablewidth="230"border="0"cellpadding="0"cellspacing="0"><tr><tdwidth="230"height="30">  用戶名：<inputname="user"type="text"size="12"></td></tr><tr><tdwidth="230">   密    碼：<inputname="pwd"type="password"id="pwd"size="13"></td></tr><tr><tdalign="right"height="40"><inputtype="submit"name="submit"value="提交"></td></tr></table></form>運(yùn)行頁(yè)面，輸入用戶名“cc”和密碼“123”，單擊“提交”按鈕，輸入的信息顯示在瀏覽器地址欄中，由上述實(shí)例可見(jiàn)，這種方法會(huì)暴露參數(shù)。如果用戶要傳遞的是非保密性參數(shù)，則可以采用GET方法；如果用戶傳遞的是保密性的參數(shù)（如上例中的密碼），這種方法就不可用。2．使用POST方法提交表單使用POST方法提交表單，只需要將<form>表單的method屬性設(shè)置為post即可。通過(guò)POST方法從表單發(fā)送的信息對(duì)其他人是不可見(jiàn)的（所有名稱/值會(huì)被嵌入HTTP請(qǐng)求的主體中），并且對(duì)所發(fā)送信息的數(shù)據(jù)量也無(wú)限制。不過(guò)，由于變量未顯示在URL中，也就無(wú)法將頁(yè)面添加到書(shū)簽。POST方法比較適合發(fā)送一些需要保密或容量較大的數(shù)據(jù)到服務(wù)器。?【教師】通過(guò)多媒體展示例7-4的代碼和運(yùn)行結(jié)果，并進(jìn)行講解創(chuàng)建一個(gè)表單，并用POST方法提交文本框信息。實(shí)例代碼如下：<formname="form1"method="post"action="index.php"><tablewidth="400"border="0"cellpadding="0"cellspacing="0"><tr><tdheight="30">  請(qǐng)輸入快遞單號(hào)：<inputtype="text"name="user"size="26"><inputtype="submit"name="submit"value="提交"></td></tr></table></form>上述代碼中，form表單的method屬性指定了使用POST方法提交表單，action屬性指定了數(shù)據(jù)處理頁(yè)為index.php。所以當(dāng)單擊“提交”按鈕后即提交文本框的信息到服務(wù)器，地址欄中并不顯示參數(shù)。7.2.2參數(shù)值獲取方式PHP獲取參數(shù)值的方式有$_POST[]、$_GET[]和$_SESSION[]，它們分別用于獲取表單、URL和Session變量的值。1．$_POST[]全局變量使用PHP的$_POST[]全局變量可以獲取表單元素的值，其語(yǔ)法格式為$_POST["element_name"]例如，要獲取文本框user和密碼框pass的值，可以使用以下代碼：<?php $user=$_POST["user"];//應(yīng)用$_POST[]全局變量獲取表單元素中文本框的值 $pass=$_POST["pass"];?>這種情況下，表單的method屬性值必須為post。2．$_GET[]全局變量使用PHP的$_GET[]全局變量可以獲取通過(guò)GET方法傳遞過(guò)來(lái)的表單元素的值，其語(yǔ)法格式為$_GET["element_name"]此時(shí)，需要將表單的method屬性設(shè)置為get。$_GET[]的使用方式同$_POST[]。此外，對(duì)于非表單提交過(guò)來(lái)的數(shù)據(jù)，如直接通過(guò)超鏈接附加過(guò)來(lái)的數(shù)據(jù)，也可以使用$_GET[]方法獲取。例如：<ahref="doget.php?user=aaa&pass=123">超鏈接傳遞參數(shù)</a>也就是說(shuō)，只要出現(xiàn)在瀏覽器地址欄中的參數(shù)都可以使用$_GET[]獲取，不管這些數(shù)據(jù)是來(lái)自表單還是普通超鏈接。$_POST[]和$_GET[]全局變量都可以獲取表單元素的值，但獲取的表單元素名稱是區(qū)分大小寫的。3．$_SESSION[]全局變量使用$_SESSION[]全局變量可以獲取表單元素的值，其語(yǔ)法格式為$_SESSION["element_name"]其使用方式同$_POST[]。使用$_SESSION[]獲取的變量值，保存之后任何頁(yè)面都可以使用，但這種方法特別占用系統(tǒng)資源，建議慎重使