表單制作教學設(shè)計

1、“注冊頁表單的應用教學設(shè)計課題“注冊頁一一表單的應用所屬模塊網(wǎng)頁制作授課者楊成授課班級授課類型理實一體化、網(wǎng)絡(luò)化授課時間3月26第4節(jié)授課地點6樓機房方案課時1教學目標知識與 能力1. 體驗網(wǎng)站中常見的注冊網(wǎng)頁；2. 掌握表單屬常見元素的創(chuàng)立；3. 理解腳本語文對表單的簡單驗證。過程方 法米用理實一體的教學模式，通過在線討論、小組合作探究等教學方法， 給學生提供學以致用的表單制作與實際應用體驗。情感態(tài) 度價值 觀通過制作注冊表單學習，提高學生的信息化效勞意識。利用注冊數(shù)據(jù) 的提交與驗證，增強學生的信息平安觀念。教學重點創(chuàng)立表單及其對象；教學難點調(diào)試表單JavaScript腳本教學資源序號名稱類

2、別形式1搜索“注冊頁面習題設(shè)計網(wǎng)絡(luò)考試平臺2解密“表單屬性微課MP33直播表單制作課堂形式浙江省普通咼中選 修課網(wǎng)絡(luò)直播中心4制作“注冊頁教學課件Flash學習者特 征分析學生有一疋的Dwearmweave知識根底，在日常生活中接觸過注冊 頁，但是對表單制作缺乏了解。教 學 設(shè) 計教學內(nèi)容課前 預習搜集網(wǎng)絡(luò)上常見的注冊頁面，觀看表單制作微課，自主練習和測試導入一、課前預習，情景導入1.課前預習。師：同學們，上周，我們在網(wǎng)上考試系統(tǒng)中預習了表單制作，這是 同學們的預習效果一一大屏幕投影同學考試分數(shù)，可見大家對表單已 經(jīng)有一定的了解。2情景導入。師：老師最近看了一個很有趣的視頻，想和大家分享播放美

3、團外賣 視頻。同學們，美團外賣是我們生活中常用的 APP它的用戶數(shù)已 達2.5億，合作商戶數(shù)超過200萬家，覆蓋城市超過1300個，日完成 訂單1800萬單?，F(xiàn)在老師給你們布置一個任務：每位同學都在美團外 賣上點個外賣。生：網(wǎng)上操作老師，登錄要用戶名和密碼，我沒有用戶名和密碼，沒法下單，怎么辦？師：哦，網(wǎng)頁中除了登錄，還有沒有其它的可操作鏈接？仔細看邊 上有沒有“注冊，它能否幫你解決問題？生：思考，討論。師：注冊登錄的意義。師：很多網(wǎng)站功能都離不開和用戶的交互。 而人機對話的平臺，基 本上是靠相應的文本框、列表框進行輸入，然后通過按鈕提交送至后 臺數(shù)據(jù)庫，用戶登錄時就可以進行身份驗證，確保信息

4、的平安。那么 如何將網(wǎng)頁中的數(shù)據(jù)與數(shù)據(jù)庫中的數(shù)據(jù)進行比照呢？生：可以利用表單實現(xiàn)。師：那就開始我們的表單制作吧。教二、新課講解，學做合一。1.創(chuàng)立表單注冊網(wǎng)頁是網(wǎng)站的一個網(wǎng)頁，所以首先要建立網(wǎng)站，其次在網(wǎng)站中 建立注冊網(wǎng)頁reg.html ,最后在注冊頁中插入表單域。1新建web文件夾；在web文件夾下新建images文件夾；新建 站點myweb將下發(fā)文件放入images文件夾下。2翻開reg.html文件；3插入表單域：將光標定位在要插入表單位置的中間單元格區(qū) 域，設(shè)置此單元格左對齊、頂端對齊，翻開“插入面板，選擇“表單類別，單擊“表單按鈕或者執(zhí)行菜單“插入一 > “表單一> “

5、表單命令，在表格里插入表單域?qū)ο蟆Ｔ趯傩詸z查器中設(shè)置表 單屬性：表單ID為form1,方法為POST動作為result.html 。2.在表單域中插入各種表單兀素 首先要創(chuàng)立一個表格，然后在各個單元格中插入相應的表單元素。1插入單元格：在表單內(nèi)插入一個行 列，100淞的表格，單學過程元格間距為5.2插入表單元素，并調(diào)整表格單元格及數(shù)據(jù)對齊方式。A. 用戶名文本子段username:單擊插入面板表單中的 文本子段in put text ，生成一個文本域表單。在屬性檢查器中設(shè) 置如下屬性：B. 添加密碼文本子段password:文本子段，類型為 密碼， 寬度為10，最多10個字符。C. 添加密碼確

6、認文本字段password2:寬度為10，最多10個字 符。D. 添加按鈕butt on :提交submit 按鈕：值為“提交；動作為“提交表單。重置reset 按鈕：值為“重置；動作為“重設(shè)表單。3.檢驗表單為表單添加JavaScript腳本效果，驗證兩次密碼是否相同。密碼驗證在單擊提交按鈕時進行，當兩次輸入密碼不相同時，清 空密碼重新輸入，只有在兩次密碼相同時，才能完成正常的提交。在 “提交按鈕上單擊右鍵，選擇“編輯標簽命令，進入“變遷編輯 器，單擊“ on Click 事件，輸入代碼：如果要同時對密碼長度進行驗證，可輸入以下代碼：4.預覽網(wǎng)頁，查看網(wǎng)頁效果。一、任務實施請同學們到下載專區(qū)，下載任務實施文件夾，完成QC注冊界面的 表單制作。并在賬號注冊成功后，登錄賬號。三、總結(jié)，拓展師：從提交的練習成果看出，絕大局部同學已經(jīng)掌握了表單的制 作過程。網(wǎng)上考試是我們學校自行開發(fā)的的網(wǎng)上學習與考試的一個平臺， 為廣闊師生提供實時在線教學效勞，為了網(wǎng)絡(luò)平安，同樣在進入