PAGE1《Web前端開(kāi)發(fā)技術(shù)》課程教案適用專(zhuān)業(yè)：授課班級(jí)：授課教師：編制日期：

教案名稱(chēng)單元4制作非遺登錄注冊(cè)頁(yè)面—H5表單計(jì)劃學(xué)時(shí)4學(xué)時(shí)本次授課類(lèi)型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識(shí)目標(biāo)1.理解表單的基本結(jié)構(gòu)。2.掌握表單控件的類(lèi)型和屬性。3.掌握表單的提交方式。4.掌握HTML5的內(nèi)置驗(yàn)證功能。5.能夠使用正則表達(dá)式進(jìn)行更復(fù)雜的數(shù)據(jù)驗(yàn)證。能力目標(biāo)1.能夠獨(dú)立完成登錄和注冊(cè)頁(yè)面的表單設(shè)計(jì)與實(shí)現(xiàn)。2.能夠使用HTML5表單控件屬性進(jìn)行數(shù)據(jù)驗(yàn)證。3.能夠使用正則表達(dá)式優(yōu)化表單驗(yàn)證邏輯。素質(zhì)目標(biāo)1.培養(yǎng)交互設(shè)計(jì)能力。2.培養(yǎng)設(shè)計(jì)思維與創(chuàng)新能力。思政目標(biāo)1.培養(yǎng)團(tuán)隊(duì)合作和溝通能力。2.增強(qiáng)對(duì)非遺文化的保護(hù)意識(shí)，通過(guò)技術(shù)傳承傳統(tǒng)文化。教學(xué)重點(diǎn)1.表單的基本結(jié)構(gòu)與控件類(lèi)型。2.HTML5表單控件的屬性及內(nèi)置驗(yàn)證功能。3.正則表達(dá)式在表單驗(yàn)證中的應(yīng)用。教學(xué)難點(diǎn)1.表單數(shù)據(jù)的動(dòng)態(tài)驗(yàn)證與錯(cuò)誤提示。2.正則表達(dá)式的編寫(xiě)與調(diào)試。3.表單在不同瀏覽器中的兼容性問(wèn)題。教學(xué)設(shè)計(jì)思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識(shí)點(diǎn)和技能，針對(duì)個(gè)別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對(duì)一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動(dòng)的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評(píng)比率，在課上有更多的獎(jiǎng)勵(lì)手段。教學(xué)實(shí)施過(guò)程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動(dòng)、信息化資源、教學(xué)方法等方面進(jìn)行撰寫(xiě)備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開(kāi)發(fā)》MOOC課程里的單元4的相關(guān)微課視頻，完成在線測(cè)試。（二）學(xué)生需嚴(yán)格按照教學(xué)要求完成課前預(yù)習(xí)任務(wù)，包括觀看教學(xué)視頻、閱讀教材相關(guān)內(nèi)容、完成預(yù)習(xí)測(cè)試題等，并在學(xué)習(xí)過(guò)程中詳細(xì)記錄遇到的疑難問(wèn)題，形成書(shū)面預(yù)習(xí)報(bào)告提交至在線學(xué)習(xí)平臺(tái)（三）教師通過(guò)教學(xué)管理平臺(tái)的數(shù)據(jù)分析功能，實(shí)時(shí)監(jiān)控每位學(xué)生的學(xué)習(xí)進(jìn)度和預(yù)習(xí)完成情況，針對(duì)未達(dá)標(biāo)學(xué)生及時(shí)發(fā)送提醒通知，并安排專(zhuān)門(mén)的線上輔導(dǎo)時(shí)間，通過(guò)一對(duì)一或小組輔導(dǎo)的形式確保所有學(xué)生達(dá)到預(yù)期的預(yù)習(xí)效果二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新在掌握HTML5標(biāo)記知識(shí)后，計(jì)劃為非遺網(wǎng)站新增用戶登錄功能，以便記錄用戶交互數(shù)據(jù)并提供個(gè)性化服務(wù)。他認(rèn)識(shí)到HTML5表單是實(shí)現(xiàn)這一功能的關(guān)鍵，并制定了詳細(xì)的學(xué)習(xí)實(shí)踐計(jì)劃：首先設(shè)計(jì)登錄和注冊(cè)頁(yè)面框架，然后創(chuàng)建基礎(chǔ)表單結(jié)構(gòu)，接著添加各類(lèi)表單控件，再設(shè)置表單屬性并實(shí)現(xiàn)數(shù)據(jù)驗(yàn)證，最后運(yùn)用正則表達(dá)式完成復(fù)雜驗(yàn)證功能。（二）任務(wù)1創(chuàng)建表單—制作非遺登錄頁(yè)面（1學(xué)時(shí)）1.任務(wù)描述為非遺網(wǎng)站創(chuàng)建登錄頁(yè)面。已注冊(cè)的用戶填寫(xiě)相關(guān)的信息并提交網(wǎng)站后臺(tái)后，可以通過(guò)該頁(yè)面登錄網(wǎng)站。2.任務(wù)準(zhǔn)備(1)明確表單的概念(2)了解表單的標(biāo)記<form>(3)了解文本框和密碼框(4)了解控件按鈕3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下創(chuàng)建登錄網(wǎng)頁(yè)文件。

(2)創(chuàng)建登錄表單。設(shè)置表單數(shù)據(jù)發(fā)送方式為post，代碼如下

<form

action=“”

method=“post”></form>

(3)為表單分別添加輸入用戶名和密碼的文本框和密碼框。

<input

type=“text”name=“username”>

<input

type=“password”

name=“password”>

(4)創(chuàng)建表單提交按鈕。

<button

type=“submit”>登錄</button>(5)對(duì)表格進(jìn)行布局排布(6)設(shè)置表格寬度與高度(7)CSS美化表格效果圖如下：2.師生活動(dòng)：教師建立在線答疑平臺(tái)，及時(shí)解答學(xué)生疑問(wèn)。學(xué)生隨時(shí)提問(wèn)，獲得針對(duì)性指導(dǎo)。3.教學(xué)方法：運(yùn)用探究式教學(xué)，引導(dǎo)學(xué)生自主發(fā)現(xiàn)問(wèn)題并解決。采用工作坊模式，強(qiáng)化師生互動(dòng)和實(shí)踐指導(dǎo)。（二）任務(wù)2添加表單控件—制作注冊(cè)頁(yè)面（1學(xué)時(shí)）1.任務(wù)描述為非遺網(wǎng)站創(chuàng)建注冊(cè)頁(yè)面。用戶需要在頁(yè)面上填寫(xiě)并提交的信息包括用戶名、姓名、密碼、性別、出生日期、聯(lián)系電話、所在城市、身份證照片等。用戶注冊(cè)頁(yè)面效果如

圖所示。2.任務(wù)準(zhǔn)備(1)了解單選按鈕控件(<input

type=“radio”>)能夠保證用戶在一組數(shù)據(jù)中最多只選擇一項(xiàng)(2)復(fù)選框控件(<input

type-“”>)允許用戶在一組選項(xiàng)中選擇多個(gè)(3)了解文本框和密碼框(4)了解日期控件(5)了解下拉列表(<select>)允許用戶在多個(gè)選項(xiàng)中選擇一個(gè)(6)了解文本域({<}textarea{>})允許用戶輸人多行文本(7)了解文件域3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在站點(diǎn)目錄下創(chuàng)建非遺網(wǎng)站注冊(cè)頁(yè)面文件。(2)創(chuàng)建注冊(cè)表單。