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

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

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

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

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

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