HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第6章 表單

網(wǎng)頁設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評(píng)價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評(píng)價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號(hào)6授課日期月日月日月日月日授課班級(jí)課內(nèi)教學(xué)內(nèi)容：第6章表單課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論網(wǎng)頁表單的相關(guān)內(nèi)容并以PPT的形式記錄下來。（2）課后：=1\*GB3①添加一個(gè)表單，并為表單設(shè)置鏈接跳轉(zhuǎn)和跳轉(zhuǎn)方式。=2\*GB3②使用表單標(biāo)簽創(chuàng)建一個(gè)問題調(diào)查表。=3\*GB3③在表單中添加下拉列表控件。教學(xué)目標(biāo)：知識(shí)目標(biāo)掌握添加表單；掌握添加表單；掌握下拉列表；掌握文本域。能力目標(biāo)能夠掌握表單的各種功能；能夠使用下拉列表和文本域。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識(shí)和自學(xué)能力；豐富知識(shí)結(jié)構(gòu)，提升專業(yè)知識(shí)；掌握表單的使用，理解并應(yīng)用專業(yè)知識(shí)。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：表單元素的使用解決方法：通過知識(shí)點(diǎn)講解+課堂示例相結(jié)合的方法，教師講解表單各種樣式的相關(guān)內(nèi)容內(nèi)容，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識(shí)；同時(shí)通過課堂示例展示，使學(xué)生可以掌握表單的使用規(guī)則；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：下拉列表和文本域解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細(xì)致講解下拉列表和文本域的使用。幫助學(xué)生掌握下拉列表和文本域的使用方法和技巧。從實(shí)用的角度幫助學(xué)生提高專業(yè)知識(shí)。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計(jì)算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評(píng)價(jià)方式：對(duì)理論知識(shí)學(xué)習(xí)效果評(píng)價(jià)：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對(duì)技能的評(píng)價(jià)：教師對(duì)學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評(píng)價(jià)；對(duì)職業(yè)素養(yǎng)的評(píng)價(jià)：采用學(xué)生自評(píng)、小組內(nèi)評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合的方式。課后小結(jié)：填表說明：1.序號(hào)，指該課程授課的順序號(hào)，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過程時(shí)間分配方法及手段1.添加表單表單可以用來收集用戶在客戶端提交的各種信息，例如，在網(wǎng)站登錄或注冊(cè)時(shí)進(jìn)行的鍵盤和鼠標(biāo)操作都是將表單作為載體傳遞給服務(wù)器的。表單其實(shí)是頁面中的一個(gè)特定區(qū)域，由<form>標(biāo)簽和</form>標(biāo)簽定義，所有的表單元素只有在這對(duì)標(biāo)簽之間才有效。表單的基本語法如下。<form表單標(biāo)簽的各種屬性設(shè)置>設(shè)置各種表單元素</form>在<form>標(biāo)簽中可以設(shè)置表單的屬性，包括表單名稱、表單處理程序等?！炬溄犹D(zhuǎn)】action屬性用來設(shè)置鏈接跳轉(zhuǎn)，也就是在提交表單的內(nèi)容時(shí)，按照鏈接地址跳轉(zhuǎn)到相應(yīng)的頁面進(jìn)行處理。由于action屬性用來控制整個(gè)表單的提交內(nèi)容，因此action屬性要寫在<form>標(biāo)簽中。其語法格式如下。<formaction="鏈接跳轉(zhuǎn)的地址">設(shè)置各種表單元素</form>鏈接跳轉(zhuǎn)的地址除了可以是絕對(duì)地址和相對(duì)地址外，還可以是其他的地址形式。如果表單中沒有任何表單元素，這個(gè)表單傳遞給處理程序的內(nèi)容就是空的。如果省略action屬性，則默認(rèn)為提交到本頁，即本頁為接收并處理表單的程序?？梢越邮詹⑻幚肀韱蔚某绦蛘Z言很多，常用的有ASP、ASPX、JSP、PHP等?！炬溄犹D(zhuǎn)方式】設(shè)置鏈接跳轉(zhuǎn)以后，還需要設(shè)置鏈接跳轉(zhuǎn)時(shí)使用的跳轉(zhuǎn)方式。此時(shí)可以通過method屬性來設(shè)置，它決定了表單中已收集的數(shù)據(jù)以什么樣的方式發(fā)送到服務(wù)器。其語法結(jié)構(gòu)如下。<formmethod="表單的鏈接跳轉(zhuǎn)方式">表單元素</form>表單的鏈接跳轉(zhuǎn)方式一般可以設(shè)置為get和post兩種，其具體含義如表6.1所示。表6.1表單鏈接跳轉(zhuǎn)方式跳轉(zhuǎn)方式含義注意事項(xiàng)get表單數(shù)據(jù)會(huì)被視為參數(shù)發(fā)送，用戶輸入的數(shù)據(jù)會(huì)附加在URL之后，由用戶端直接發(fā)送至服務(wù)器，是METHOD屬性的默認(rèn)值其速度較快，但數(shù)據(jù)不能太長(zhǎng)。如果信息超過8192個(gè)字符，則可能會(huì)被截去，另外，該方式不具有保密性post表單數(shù)據(jù)與URL分開，將數(shù)據(jù)寫在表單主體內(nèi)發(fā)送沒有字符長(zhǎng)度的限制，可以發(fā)送較長(zhǎng)的信息，但速度相對(duì)較慢【表單名稱】表單名稱主要是為了區(qū)分各個(gè)表單。因?yàn)橐粋€(gè)頁面中可能會(huì)有多個(gè)表單，或者在一個(gè)表單處理程序中需要處理多個(gè)頁面的表單，這時(shí)表單名稱就顯得尤其重要了。設(shè)置表單名稱的標(biāo)簽是<name>，其語法格式如下。<formname="表單名稱">表單元素</form>其中，name屬性的寫法與超鏈接中name屬性的寫法一樣。在網(wǎng)頁中可以通過表單的name屬性提取指定表單中的數(shù)據(jù)來進(jìn)行使用。2.輸入標(biāo)簽輸入標(biāo)簽<input>是使用最廣泛的表單控件標(biāo)簽，用于定義輸入域的開始。因?yàn)?lt;input>標(biāo)簽是單標(biāo)簽，所以在使用時(shí)，要為<input>標(biāo)簽加上“/”來閉合標(biāo)簽。<input>標(biāo)簽必須嵌套在表單標(biāo)簽中使用。<input>標(biāo)簽的語法格式如下。<form><inputtype=""/></form>其中，type屬性的值有很多，不同的選擇對(duì)應(yīng)不同的輸入方式（下面將詳細(xì)講解）。【文本框】文本框用來輸入數(shù)字、文本及字母等，輸入的內(nèi)容單行顯示在頁面中，可以通過type="text"來設(shè)置，其語法格式如下。<form><inputtype="text"></form>【密碼框】密碼框用來輸入密碼，可以通過type="password"來設(shè)置。在密碼框中輸入的內(nèi)容會(huì)變成小黑點(diǎn)或者“*”，可以用來保護(hù)密碼不被第三者看見。創(chuàng)建密碼框的語法格式如下。<form><inputtype="password"></form>【單選按鈕】單選按鈕是指只能選擇其中一項(xiàng)的選項(xiàng)按鈕。就像很多表單中的“性別”選項(xiàng)一樣，要么是男，要么是女，不可能同時(shí)是男和女。單選按鈕中選中的選項(xiàng)會(huì)以圓點(diǎn)顯示。單選按鈕可以通過type="radio"來設(shè)置，其語法格式如下。<form><inputtype="radio"name="名稱"></form>【復(fù)選框】復(fù)選框與單選按鈕類似，可以是一個(gè)單獨(dú)的復(fù)選框，也可以是由多個(gè)復(fù)選框組成的復(fù)選框組。復(fù)選框可以讓用戶同時(shí)選擇或取消多個(gè)項(xiàng)目，在瀏覽器中通常表示為一個(gè)小方框。用戶選中復(fù)選框時(shí)，會(huì)在小方框里打上一個(gè)鉤（某些瀏覽器會(huì)打上一個(gè)叉）；用戶沒有選中該復(fù)選框或取消該復(fù)選框時(shí)，小方框里為空。復(fù)選框可以通過type="checkbox"來設(shè)置，其語法格式如下。<form><inputtype="checkbox"name="名稱"></form>需要注意的是，同一組復(fù)選框的name屬性值必須相同?！尽疤峤弧卑粹o】“提交”按鈕用于把表單中的信息提交到指定的數(shù)據(jù)庫或者其他地方，可以通過type="submit"來設(shè)置，其語法格式如下。<form><inputtype="submit"name="名稱"value=""></form>value屬性用于設(shè)置按鈕上面出現(xiàn)的文字，以表示該按鈕是“提交”按鈕。文字可以是中文，也可以是英文?！尽爸刂谩卑粹o】“重置””按鈕用于將表單中的用戶輸入內(nèi)容清空，以恢復(fù)到初始狀態(tài)。“重置”按鈕可以通過type="reset"來設(shè)置，其語法格式如下。<form><inputtype="reset"name="名稱"value=""></form>value屬性用于設(shè)置按鈕上面出現(xiàn)的文字，以表示該按鈕是“重置”按鈕。文字可以是中文，也可以是英文。【“圖像”按鈕】圖像”按鈕是指將頁面中的按鈕使用圖片顯示外觀，這樣的圖片具有按鈕的功能，而且頁面也更加美觀?！皥D像”按鈕可以通過type="image"來設(shè)置，其語法格式如下。<form><inputtype="image"src="圖像源文件"></form>由于這里要使用圖像，因此與插入圖像一樣，需要使用src屬性設(shè)置圖像的源文件地址?！疚募颉课募蚩梢宰層脩暨x擇存儲(chǔ)在本地計(jì)算機(jī)上的文件，通常用于在將文件上傳到服務(wù)器時(shí)選擇文件。文件域在瀏覽器中顯示為一個(gè)文本框與一個(gè)按鈕，通常按鈕上會(huì)顯示“選擇文件”字樣。這兩個(gè)組件同時(shí)出現(xiàn)在網(wǎng)頁中，單擊“選擇文件”按鈕，會(huì)彈出一個(gè)“選擇文件”對(duì)話框，在該對(duì)話框中選擇文件后，單擊對(duì)話框中的“打開”按鈕，就會(huì)在文本框中自動(dòng)輸入該文件在本地的絕對(duì)路徑。文件域可以通過type="file"來設(shè)置，其語法格式如下。<form><inputtype="file"name="名稱"></form>【隱藏域】前面介紹的表單元素都是可以在瀏覽器中看到的，在HTML中還有一種表單元素在瀏覽器中是看不到的，這種表單元素稱為隱藏域或隱藏框。隱藏域的作用是在表單中放入一個(gè)不希望被用戶看到或用戶沒有必要看到的內(nèi)容，而這些內(nèi)容往往都是在提交表單時(shí)，服務(wù)器或腳本需要獲取的內(nèi)容。隱藏域可以通過type="hidden"來設(shè)置，其語法格式如下。<form><inputtype="hidden"></form>3.下拉列表下拉列表是一個(gè)下拉式列表或者帶有滾動(dòng)條的列表，用戶可以在列表中選擇一個(gè)選項(xiàng)。創(chuàng)建下拉列表需要用到兩個(gè)元素，首先是<select>標(biāo)簽，用于標(biāo)記下拉列表的開始，然后是<option>標(biāo)簽，用于創(chuàng)建下拉列表中的項(xiàng)目。如果一個(gè)下拉列表中有多個(gè)可選項(xiàng)，只需要重復(fù)使用<option>標(biāo)簽。下拉列表的語法格式如下。<selectname="名稱"><optionvalue="">選項(xiàng)內(nèi)容</option><optionvalue="">選項(xiàng)內(nèi)容</option><optionvalue="">選項(xiàng)內(nèi)容</option>…</select>與單選按鈕和復(fù)選框一樣，<select>標(biāo)簽也需要使用name屬性來告知服務(wù)器該表單的名稱。在提交表單時(shí)，服務(wù)器通過<select>標(biāo)簽的name屬性值來獲得該下拉列表中的選項(xiàng)值，而<select>標(biāo)簽的選項(xiàng)值要通過<option>標(biāo)簽的value屬性來設(shè)置。4.文本域單行文本框只能輸入一行文字，大量的文字（尤其是分段的多行文字）在單行文本框中是無法輸入的。使用<textarea>標(biāo)簽可以在網(wǎng)頁中創(chuàng)建文本域。在多文本域中可以顯示和輸入多行文字，這在很大程度上方便用戶輸入和查看文字。創(chuàng)建文本域的語法格式如下。<textarea>輸入的內(nèi)容</textarea>5.教學(xué)評(píng)價(jià)【組織階段考核與學(xué)生自評(píng)互評(píng)、展示考核結(jié)果】本次課的考核注重過程評(píng)價(jià)：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評(píng)價(jià)表》，組織學(xué)生自評(píng)、互評(píng)。6．上機(jī)指導(dǎo)1．添加一個(gè)表單，并為表單設(shè)置鏈接跳轉(zhuǎn)和跳轉(zhuǎn)方式。2．使用表單標(biāo)簽創(chuàng)建一個(gè)問題調(diào)查表。3．在表單中添加下拉列表控件。7.板書設(shè)計(jì)添加表單輸入標(biāo)簽下拉列表文本域教學(xué)評(píng)價(jià)上機(jī)指導(dǎo)課外學(xué)習(xí)任務(wù)及學(xué)習(xí)指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《分析如何使用表單》要求：以小組為單位，分析如何在網(wǎng)頁中添加和使用表單；同時(shí)制作匯報(bào)PPT，提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對(duì)學(xué)生進(jìn)行指導(dǎo)。【教師對(duì)各組調(diào)研成果進(jìn)行評(píng)價(jià)】教師查閱學(xué)生調(diào)研結(jié)果PPT，對(duì)每個(gè)小組的PPT進(jìn)行評(píng)價(jià)，記錄評(píng)價(jià)成績(jī)，并挑選出優(yōu)秀作品。課后：【添加一個(gè)表單，并為表單設(shè)置鏈接跳轉(zhuǎn)和跳轉(zhuǎn)方式】小組成員團(tuán)結(jié)協(xié)作，使用<form>標(biāo)簽在頁面中插入一個(gè)表單，然后在表單中添加4個(gè)表單輸入文本框，分別用于輸入姓名、年齡、性別、住址，最后添加一個(gè)“提交”按鈕。教師使用“微信群”對(duì)學(xué)生進(jìn)行指導(dǎo)?！臼褂帽韱螛?biāo)簽創(chuàng)建一個(gè)問題調(diào)查表】學(xué)生