HTML5 CSS3Web前端開(kāi)發(fā)技術(shù)（任務(wù)式）（微課版）（于麗娜第2版） 教案04 《Web前端開(kāi)發(fā)技術(shù)》

《》教案20-20學(xué)年第學(xué)期課程名稱：授課教師：職稱：開(kāi)課部門：年月日

《》教案首頁(yè)課程名稱授課專業(yè)班級(jí)授課教師職稱部門課程類型學(xué)位課□公共必修課□專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課非學(xué)位課□公共必修課專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課課程性質(zhì)□理論□實(shí)踐理論+實(shí)踐考核方式考試□考查課程教學(xué)總學(xué)時(shí)數(shù)64學(xué)分3.5學(xué)情分析大*年級(jí)的學(xué)生首次正式接觸WEB的相關(guān)概念，但是在之前的基礎(chǔ)課程中學(xué)過(guò)***（操作系統(tǒng)、計(jì)算機(jī)原理、Python編程、C語(yǔ)言編程）等相關(guān)專業(yè)方面基礎(chǔ)知識(shí)，具備有一定的計(jì)算機(jī)操作能力，與基礎(chǔ)應(yīng)用知識(shí)；并且在日常中大量使用電腦與手機(jī)等計(jì)算機(jī)設(shè)備，其中日常生活中也對(duì)于網(wǎng)頁(yè)的使用更是頗多。但對(duì)于WEB方面的專業(yè)知識(shí)沒(méi)有一個(gè)準(zhǔn)確、完整的知識(shí)體系構(gòu)建。教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法、抽象法教材名稱《HTML5+CSS3Web前端開(kāi)發(fā)技術(shù)》作者于麗娜出版社及出版時(shí)間人民郵電出版社2021.09參考書(shū)目作者出版社及出版時(shí)間教研室意見(jiàn)教研室主任簽字：年月日注：表中□選項(xiàng)請(qǐng)打“√”。每門課程只需填寫(xiě)一次本表。

《》教案授課教師班級(jí)學(xué)時(shí)6授課日期教學(xué)任務(wù)《Web前端開(kāi)發(fā)技術(shù)》授課方式講授實(shí)踐授課地點(diǎn)多媒體教室實(shí)驗(yàn)/實(shí)訓(xùn)室□企業(yè)主要參考資料教學(xué)PPT、微課、動(dòng)畫(huà)、思維導(dǎo)圖課程思政視頻習(xí)題等教學(xué)目標(biāo)素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生交流與溝通能力；2.培養(yǎng)學(xué)生探究學(xué)習(xí)的能力。知識(shí)目標(biāo)：1.了解表單元素的定義；2.了解制作語(yǔ)義化的表單；3.了解HTML5屬性初步驗(yàn)證表單。能力目標(biāo)：1.掌握使用表單元素制作登錄頁(yè)面基礎(chǔ)內(nèi)容；2.掌握使用表單元素屬性進(jìn)行簡(jiǎn)單的表單驗(yàn)證功能教學(xué)內(nèi)容Web前端開(kāi)發(fā)技術(shù)表單發(fā)送方式常用表單控件表單驗(yàn)證的作表單驗(yàn)證的方法重點(diǎn)難點(diǎn)教學(xué)重點(diǎn)：HTML5表單屬性HTML5表單常用控件教學(xué)難點(diǎn)：1.在表單中使用正則驗(yàn)證教學(xué)方法談?wù)摲ā⒅v授法、演示法、練習(xí)法素材資源R文本素材R實(shí)物展示RPPT幻燈片□音頻素材R視頻素材R動(dòng)畫(huà)素材R圖形/圖像素材□網(wǎng)絡(luò)資源□其他課后作業(yè)任務(wù)一：總結(jié)提升任務(wù)二：能力進(jìn)階教學(xué)反思注：教案按授課次數(shù)填寫(xiě)，每次授課均應(yīng)填寫(xiě)一份本表。重復(fù)班授課可不另填寫(xiě)教案。?

教學(xué)過(guò)程及內(nèi)容一、導(dǎo)入新課【約5分鐘】教師：良好的溝通和交流是架起人與人之間友好往來(lái)的橋梁。而若想在頁(yè)面中實(shí)現(xiàn)用戶與后臺(tái)的信息交流，表單是這里離不開(kāi)的重要橋梁。通過(guò)在網(wǎng)頁(yè)中添加表單元素，可以實(shí)現(xiàn)如會(huì)員注冊(cè)、登錄，問(wèn)卷調(diào)查，在線考試，論壇分享、評(píng)論等功能。表單涉及到了信息的交互，自然也離不開(kāi)數(shù)據(jù)驗(yàn)證的需求，對(duì)于數(shù)據(jù)的驗(yàn)證通常使用HTML表單元素與頁(yè)面中的JavaScript腳本配合實(shí)現(xiàn)。但HTML5的規(guī)范中，新增了對(duì)表單內(nèi)容的簡(jiǎn)單驗(yàn)證功能，我們應(yīng)對(duì)其有一個(gè)初步的了解。新云課堂項(xiàng)目中需要實(shí)現(xiàn)登錄頁(yè)，注冊(cè)頁(yè)以及用個(gè)人信息登記頁(yè)。這里就需要用的本單元的表單知識(shí)與表單驗(yàn)證來(lái)實(shí)現(xiàn)。二、新知識(shí)點(diǎn)、技能點(diǎn)講解【約x分鐘】新課講解1：【約20分鐘】教師：表單用來(lái)進(jìn)行前后端的數(shù)據(jù)交互，用戶在頁(yè)面中的表單內(nèi)提交給服務(wù)器的數(shù)據(jù)，打包發(fā)送給接收的服務(wù)器，從而實(shí)現(xiàn)了數(shù)據(jù)在互聯(lián)網(wǎng)上的傳遞。在表單元素內(nèi)的用來(lái)接受用戶輸入的組件，我們稱之為表單控件。這些控件有文本輸入框，下拉列表，單選多選框等等，基本上滿足了大多數(shù)的數(shù)據(jù)傳遞需求。并且在各種各樣的表單中通常都至少有一個(gè)提交功能的按鈕，用來(lái)觸發(fā)以填寫(xiě)數(shù)據(jù)的提交動(dòng)作的進(jìn)行。例如：網(wǎng)站的登錄頁(yè)面，需要獲取用戶的登錄名稱，登錄密碼。網(wǎng)上商城的購(gòu)物車，需要用戶進(jìn)行商品種類和內(nèi)容的確定。搜索引擎，需要用戶傳遞要搜索的內(nèi)容和搜索方式。網(wǎng)上考試，需要考生進(jìn)行題目答案的書(shū)寫(xiě)。在HTML中如何去實(shí)現(xiàn)一個(gè)表單？我們需要使用form元素去實(shí)現(xiàn)。form元素，即表單元素，表單元素本身并沒(méi)有任何顯示效果，僅用來(lái)設(shè)定表單的一些特性與包裹相關(guān)表單控件。<form><inputtype="text"name="username"placeholder="請(qǐng)輸入登錄名稱"/><inputtype="password"name="userpwd"placeholder="請(qǐng)輸入登錄密碼"/><inputtype="submit"value="提交"/></form>action 設(shè)定表單數(shù)據(jù)提交的目標(biāo)地址method 設(shè)定表單的提交方式（GET或POST）enctype 用于指定表單內(nèi)容編碼方式（application/x-www-form-urlencoded、multipart/form-data或text/plain）name 用于指定表單的唯一名稱target 用于指定使用哪種方式打開(kāi)目標(biāo)URL（_blank、_parent、_self、_top）那么method的方法中g(shù)et與post有什么區(qū)別呢？先讓大家看看采用post方法和get方法提交表單信息后瀏覽器地址欄的變化。分別使用兩種方法提交表單，分別輸入用戶名123456和密碼123456并進(jìn)行表單提交。GET方式跳轉(zhuǎn)到的頁(yè)面：<formmethod="get"><inputtype="text"name="username"placeholder="請(qǐng)輸入登錄名稱"/><inputtype="password"name="userpwd"placeholder="請(qǐng)輸入登錄密碼"/><inputtype="submit"value="提交"/></form>POST方式跳轉(zhuǎn)到的頁(yè)面：<formmethod="post"><inputtype="text"name="username"placeholder="請(qǐng)輸入登錄名稱"/><inputtype="password"name="userpwd"placeholder="請(qǐng)輸入登錄密碼"/><inputtype="submit"value="提交"/></form>采用get方法提交表單信息之后，在瀏覽器的地址欄中，URL信息會(huì)發(fā)生變化。仔細(xì)觀察不難發(fā)現(xiàn)，在URL信息中清晰地顯示出了表單提交的數(shù)據(jù)內(nèi)容，即剛剛輸入的用戶名和密碼都完全顯示在地址欄中，清晰可見(jiàn)。通過(guò)對(duì)比，可以發(fā)現(xiàn)兩種提交方式之間的區(qū)別如下。（1）post方法提交方式不會(huì)改變地址欄狀態(tài)，表單數(shù)據(jù)不會(huì)被顯示。（2）使用get方法提交方式，地址欄狀態(tài)會(huì)發(fā)生變化，表單數(shù)據(jù)會(huì)在URL信息中顯示?；谝陨蟽牲c(diǎn)區(qū)別，post方法提交的數(shù)據(jù)安全性明顯高于get方法提交的數(shù)據(jù)。在日常開(kāi)發(fā)中，建議大家盡可能地采用post方法來(lái)提交表單數(shù)據(jù)。學(xué)生：在開(kāi)發(fā)中，會(huì)怎么選擇method的方式？教師：開(kāi)發(fā)過(guò)程中，凡是涉及到用戶信息、長(zhǎng)文本數(shù)據(jù)或有文件、圖片上傳的一律使用post方式進(jìn)行提交，這樣能夠用戶信息的泄露；而例如分頁(yè)頁(yè)碼，搜索內(nèi)容關(guān)鍵字或不記名推廣來(lái)源等非敏感信息則可以使用get方式提交，且進(jìn)行手動(dòng)修改也較為便捷，并有可以提高搜索引擎收錄概率。新課講解2：【約20分鐘】教師：我們將表單中為用戶提供數(shù)據(jù)發(fā)送能力的各種組件稱之為，表單控件。，欸個(gè)表單控件都有相應(yīng)的屬性進(jìn)行特性設(shè)定。在表單控件中使用多的控件便是input控件。表單中大多數(shù)文本類型的輸入控件都是由input標(biāo)簽實(shí)現(xiàn)的。通過(guò)設(shè)定不同的type屬性值進(jìn)行切換。文本框：在表單中最常用、最常見(jiàn)的表單輸入元素就是文本框，它用于輸入單行文本信息，如用戶名的輸入文本框。若要在文檔的表單里創(chuàng)建一個(gè)文本框，將表單元素type屬性設(shè)為text類型就可以了。密碼框：在一些特殊情況下，用戶希望輸入的數(shù)據(jù)被處理，以免被他人得到，如密碼。這時(shí)候使用文本框就無(wú)法滿足要求，需要使用密碼框來(lái)完成。單選框：用于一組相互排斥的值，組中的每個(gè)單選按鈕控件應(yīng)具有相同的名稱，用戶一次只能選中一個(gè)單選按鈕。只有從組中選中的單選按鈕才會(huì)在提交的數(shù)據(jù)中提交對(duì)應(yīng)的數(shù)值，在使用單選按鈕時(shí)，需要一個(gè)顯示的value屬性。復(fù)選框：與單選按鈕有些類似，只不過(guò)復(fù)選框允許用戶選擇多個(gè)選項(xiàng)。復(fù)選框的類型是checkbox，即將表單元素的type屬性設(shè)為checkbox就可以創(chuàng)建一個(gè)復(fù)選框了。復(fù)選框的命名與單選按鈕有些區(qū)別，既可以多個(gè)復(fù)選框選用相同的名稱，也可以各自具有不同的名稱，關(guān)鍵是看如何使用復(fù)選框。用戶可以選中某個(gè)復(fù)選框，也可以取消選中。一旦用戶選中了某個(gè)復(fù)選框，在表單提交時(shí)，會(huì)將該復(fù)選框的name值和對(duì)應(yīng)的value值一起提交。單選框、多選框有一個(gè)先天的“缺點(diǎn)"，就是有效地點(diǎn)擊范圍，只能通過(guò)點(diǎn)擊圓形或方形的選擇控件觸發(fā)選擇功能，實(shí)際上用戶體驗(yàn)非常不好。第一，控件體積小，不容易選中；第二，控件與相關(guān)文本的關(guān)聯(lián)關(guān)系相對(duì)不明確，可能因?yàn)榕虐娴葐?wèn)題，選項(xiàng)換行容易看串行，導(dǎo)致錯(cuò)誤選擇的問(wèn)題。學(xué)生：那么改變選擇空間的大小，是否能解決呢？教師：設(shè)定合適的控件大小雖然能夠解決不容易選中的問(wèn)題，但并不是最佳方式。HTML中的label標(biāo)簽可以有效地解決上述問(wèn)題。label標(biāo)簽標(biāo)記作用，可將其他元素的點(diǎn)擊事件綁定給指定控件，也就是說(shuō)可以讓某個(gè)元素有了一個(gè)“分身代表"，讓"分身的點(diǎn)擊“可以出發(fā)自己的點(diǎn)擊效果。<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>文本框</title></head><body><formmethod="post"action="">性別：<!--label的用法一--><inputid="gen_id"name="gen"type="radio"class="input"value="男"><labelfor="gen_id">男</label><!--label的用法二--><label><inputname="gen"type="radio"value="女"class="input"/>女</label></form></body></html>首先給文字部分使用label包裹形成以的”分身代理“，然后給要被綁定的元素設(shè)定一個(gè)唯一id屬性，再讓label元素的for屬性值完全等于被綁定元素的id值，就實(shí)現(xiàn)了點(diǎn)擊觸發(fā)的綁定。除了上面的方法還有方便的方式，不需要去設(shè)定id屬性和for屬性，而是直接將要被綁定的元素與”分身代理“元素或內(nèi)容都放到label元素的內(nèi)容中，他們就會(huì)自己綁定為一個(gè)整體。前者要比后者靈活，因?yàn)楹笳叩姆绞奖仨毐ＷC選項(xiàng)的文字等內(nèi)容與選項(xiàng)控件必須緊鄰。新課講解3：【約30分鐘】教師：列表框的目的主要是使用戶快速、方便、正確地選擇一些選項(xiàng)，并且節(jié)省頁(yè)面空間。它是通過(guò)<select>標(biāo)簽和<

option>標(biāo)簽來(lái)實(shí)現(xiàn)的。<select>標(biāo)簽用于顯示可供用戶選擇的列表框，每個(gè)選項(xiàng)由一個(gè)<

option>標(biāo)簽表示，<select>標(biāo)簽必須至少包含一個(gè)<option>標(biāo)簽。其中，在有多條選項(xiàng)可供用戶滾動(dòng)查看時(shí)，size屬性確定列表中可同時(shí)看到的行數(shù)；selected屬性表示該選項(xiàng)在默認(rèn)情況下是被選中的，而且一個(gè)列表框中只能有一個(gè)列表項(xiàng)默認(rèn)被選中，如同單選按鈕組那樣。<formmethod="post"action="">出生日期:<inputname="byear"value="yyyy"size="4"maxlength="4"/>年<selectname="bmon"><optionvalue="">[選擇月份]</OPTION><optionvalue="1">一月</option><optionvalue="2">二月</option>......<optionvalue="11">十一月</option><optionvalue="12">十二月</option></select>月<inputname="bday"value="dd"size="2"maxlength="2"/>日</form>按鈕在表單中經(jīng)常用到，在HTML5中按鈕分為三種，分別是普通按鈕（button），提交按鈕（submit）和重置按鈕（reset），普通按鈕主要用來(lái)響應(yīng)onclick事件，提交按鈕用來(lái)提交表單信息，重置按鈕用來(lái)清除表單中已填的信息。<formmethod="get"action=""><p>用戶名：<inputname="name"type="text"/></p><P>密碼：<inputname="pass"type="password"/></P><p><inputtype="reset"name="butReset"value="reset按鈕"/><inputtype="submit"name="butSubmit"value="submit按鈕"/><inputtype="button"name="butButton"value="button按鈕"onclick="alert(this.value)"/></p>當(dāng)需要在網(wǎng)頁(yè)中輸入兩行或兩行以上的文本時(shí)，怎么辦？顯然，前面學(xué)過(guò)的文本框及其他表單元素都不能滿足要求，這就應(yīng)該使用多行文本框，它的標(biāo)簽是<

textarea>。<formmethod="post"action=""><h4>填寫(xiě)個(gè)人評(píng)價(jià)</h4><P><textareaname="textarea"cols="40"rows="6">自信、活潑、善于思考...</textarea></form>文件域的作用是用于實(shí)現(xiàn)文件的選擇，在應(yīng)用時(shí)只需把type屬性設(shè)為file即可。在實(shí)際應(yīng)用中文件域通常應(yīng)用于文件上傳的操作，如選擇需要上傳的文本、圖片等。<formaction=""method="post"enctype="multipart/form-data"><p><inputtype="file"name="files"/><br/><inputtype="submit"name="upload"value="上傳"/></p></form>新課講解4：【約15分鐘】教師：上圖是用戶進(jìn)行登錄的一個(gè)流程模擬，表單的執(zhí)行原理是用戶通過(guò)網(wǎng)絡(luò)提交表單給服務(wù)器，等待服務(wù)器反饋。如果用戶填寫(xiě)的表單內(nèi)容不進(jìn)行驗(yàn)證就發(fā)給服務(wù)器，那么服務(wù)器發(fā)現(xiàn)填寫(xiě)的不合法，或是沒(méi)有填寫(xiě)，就會(huì)返回響應(yīng)給用戶，用戶重新填寫(xiě)再提交，如此多次持續(xù)直到用戶輸入正確。它們之間的通信是通過(guò)網(wǎng)絡(luò)進(jìn)行的，如果網(wǎng)絡(luò)很差，那么注冊(cè)一個(gè)賬號(hào)就得花很長(zhǎng)時(shí)間，對(duì)用戶來(lái)說(shuō)是非常煩的，對(duì)服務(wù)器來(lái)說(shuō)也增加了其工作壓力。所以在處理用戶業(yè)務(wù)之前進(jìn)行表單基礎(chǔ)格式或內(nèi)容的驗(yàn)證就非常重要，可以有效地減輕服務(wù)器的壓力；保證數(shù)據(jù)的可行性和安全性。新課講解5：【約30分鐘】教師：在HTML5中如何進(jìn)行驗(yàn)證？這里主要了解以下幾種方式。placeholder屬性用于為input類型的文本框提供一種提示（hint）。這種提示可以描述文本框期待用戶輸入何種內(nèi)容。在輸入為空時(shí)顯示，當(dāng)在文本框中寫(xiě)入內(nèi)容時(shí)消失。

placeholder屬性適合于input標(biāo)簽：text、search、url、email和password等類型。required屬性用于規(guī)定文本框填寫(xiě)內(nèi)容不能為空，否則不允許用戶提交表單。該屬性適合input標(biāo)簽：text、search、url、email、password、number、checkbox、radio、file等類型。pattern屬性用于驗(yàn)證表單輸入的內(nèi)容，通常情況下email、tel、number等，已經(jīng)自帶了簡(jiǎn)單的驗(yàn)證，加上pattern就會(huì)更加高效。pattern的屬性值為正則表達(dá)式。注意，該屬性在具有novalidate屬性的<form>元素內(nèi)不生效。novalidate屬性規(guī)定，當(dāng)提交表單時(shí)不進(jìn)行驗(yàn)證。如果使用該屬性，則表單不會(huì)驗(yàn)證表單的輸入。以上幾種特殊屬性中，pattern用來(lái)設(shè)定正則驗(yàn)證規(guī)則，是最靈活也是較難理解的。正則表達(dá)式是對(duì)\t"/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/_blank"字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個(gè)“規(guī)則字符串”。起初是科學(xué)家研究出了一種用數(shù)學(xué)方式來(lái)描述神經(jīng)網(wǎng)絡(luò)的新方法，他們創(chuàng)造性地將神經(jīng)系統(tǒng)中的神經(jīng)元描述成了小而簡(jiǎn)單的自動(dòng)控制元，從而作出了一項(xiàng)偉大的工作革新。本質(zhì)上正則表達(dá)式是使用特殊符號(hào)表示一定匹配規(guī)則的字符串，用來(lái)進(jìn)行內(nèi)容比對(duì)。HTML5標(biāo)準(zhǔn)中提供了一種不借助js進(jìn)行