教案名稱任務(wù)8制作學(xué)生信息注冊表單計劃學(xué)時6學(xué)時知識目標(biāo)掌握創(chuàng)建表單的HTML標(biāo)記掌握表單的CSS樣式控制思政目標(biāo)引導(dǎo)學(xué)生做好職業(yè)規(guī)劃，在課程學(xué)習(xí)中樹立職業(yè)理想。激發(fā)學(xué)生愛國熱情、為科技強國而努力學(xué)習(xí)教學(xué)重點創(chuàng)建表單的HTML標(biāo)記表單的CSS樣式控制教學(xué)難點表單的CSS樣式控制教學(xué)模式教學(xué)做一體化線上+線下混合教學(xué)教學(xué)活動及主要環(huán)節(jié)思政元素切入點第1、2學(xué)時（表單的創(chuàng)建）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）表單的標(biāo)記是什么？表單控件有哪些？=2\*ROMANII.重難點內(nèi)容講授：認(rèn)識表單（5分鐘）表單是允許瀏覽者進行輸入的區(qū)域，可以使用表單從客戶端收集信息。瀏覽者在表單中輸入信息，然后將這些信息提交給網(wǎng)站服務(wù)器，服務(wù)器中的應(yīng)用程序會對這些信息進行處理并響應(yīng)，這樣就完成了瀏覽者和網(wǎng)站服務(wù)器之間的交互。HTML5新增了很多表單控件，完善了表單的功能，新特性提供了更好的用戶體驗和輸入控制。表單的構(gòu)成：表單域（<form>標(biāo)記）：<form>標(biāo)記是一個包含框，是包含表單控件的容器。提示信息：表單控件周圍用于提示輸入內(nèi)容的文字。表單控件（<input>標(biāo)記等）：用于輸入用戶信息的控件，如文本框、密碼框、單選按鈕、復(fù)選框和按鈕等。表單標(biāo)記（10分鐘）表單是一個包含表單控件的容器，表單控件允許用戶在表單中使用表單域輸入信息?？梢允褂?lt;form>標(biāo)記在網(wǎng)頁中創(chuàng)建表單。表單使用的<form>標(biāo)記是成對出現(xiàn)的，在開始標(biāo)記<form>和結(jié)束標(biāo)記</form>之間的部分就是一個表單。表單的基本語法及格式如下。<formname="表單名稱"action="URL地址"method="提交方式"autocomplete=”on|off”novalidate>……</form><form>標(biāo)記主要用于處理和傳送表單信息，其常用屬性的含義如下。（1）name屬性。給定表單名稱，以區(qū)分同一個頁面中的多個表單。（2）action屬性。指定處理表單信息的服務(wù)器端URL。（3）method屬性。用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中，get為默認(rèn)值，以這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，使用method="post"可以大量提交數(shù)據(jù)。（4）autocomplete屬性。用于指定表單是否有自動完成功能。所謂“自動完成”，是指將用戶在表單控件中輸入的內(nèi)容記錄下來，當(dāng)再次輸入時，會將輸入的歷史記錄顯示在一個下拉列表中，以實現(xiàn)自動完成輸入。該屬性的取值有on和off，若該屬性值為on，則表示有自動完成功能，否則表示沒有。該屬性是HTML5的新增屬性。（5）novalidate屬性。指定在提交表單時，取消對表單進行有效性檢查。為表單設(shè)置該屬性時，可以關(guān)閉整個表單的驗證。該屬性的取值有true和false，當(dāng)為true時，表示取消表單驗證。該屬性是HTML5新增屬性。表單控件（60分鐘）1．input控件input控件用于定義文本框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。其基本語法格式如下。<inputtype="控件類型"/>表8-1input控件的type屬性屬性屬性值作用typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailEmail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)值的輸入域date、time等日期和時間的輸入search搜索域color選擇顏色tel電話號碼的輸入表8-2input控件的其它屬性屬性屬性值作用name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)autocompleteon/off設(shè)置是否自動完成表單字段的內(nèi)容autofocusautofocus設(shè)置頁面加載后是否自動獲取焦點formform元素的id設(shè)置字段隸屬于哪個表單listdatalist元素的id設(shè)置字段的數(shù)據(jù)值列表multiplemultiple設(shè)置輸入框是否可以選多個值min、max、step數(shù)值設(shè)置最小值、最大值及步進值pattern字符串設(shè)置正則表達(dá)式，驗證數(shù)據(jù)合法性placeholder字符串提供提示requiredrequired輸入框中不能為空=2\*ROMANIV.課堂小結(jié)：（5分鐘）理解表單的概念及組成，能夠利用表單控件書寫簡單的表單。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)。課后作業(yè)2：借助超星學(xué)習(xí)平臺的教學(xué)視頻進行線下自學(xué)第3、4學(xué)時（表單控件、CSS設(shè)置表單樣式）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.復(fù)習(xí)提問：創(chuàng)建表單域的標(biāo)記？=2\*ROMANII.導(dǎo)入新課：（5分鐘）分組討論：利用前面所學(xué)知識，能否實現(xiàn)下拉菜單及多行文本框？（學(xué)生討論，參與互動）=2\*ROMANIII.重難點內(nèi)容講授：一、表單控件（30分鐘）1．textarea控件當(dāng)定義input控件的type屬性值為text時，可以創(chuàng)建一個單行文本輸入框。如果需要輸入大量信息，且字?jǐn)?shù)沒有限制時，就需要使用<textarea>和</textarea>標(biāo)記。例如，輸入個人簡歷時的控件就是textarea控件。其基本語法格式如下。<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">文本內(nèi)容</textarea>舉例說明其常用屬性：2．select控件select控件提供下拉列表選項，供用戶進行選擇。下拉框通過select標(biāo)記和option標(biāo)記來定義。例如，在用戶注冊表單中，職業(yè)的選擇項就使用下拉列表實現(xiàn)。其基本語法格式如下。<select><option>選項1</option><option>選項2</option><option>選項3</option>...</select>舉例說明其常用屬性需要注意的是：多選和單選下拉列表的區(qū)別在于是否設(shè)置<select>標(biāo)記的“multiple”屬性，顯示成下拉列表和帶箭頭的列表的區(qū)別在于是否將“size”屬性設(shè)置為大于1的值。二、CSS設(shè)置表單樣式（50分鐘）在項目chapter08中再新建一個網(wǎng)頁文件，創(chuàng)建用戶登錄表單，使用CSS設(shè)置表單樣式，效果如圖所示，文件名為login.html。搭建頁面結(jié)構(gòu)添加表單樣式=2\*ROMANIV.課堂小結(jié)：（5分鐘）在使用CSS控制表單樣式時，需要注意以下幾個問題：（1）由于form是塊元素，所以重置瀏覽器的默認(rèn)樣式時，需要清除其內(nèi)邊距padding和外邊距margin。（2）input控件默認(rèn)有邊框效果，當(dāng)使用<input>標(biāo)記定義各種按鈕時，通常需要清除其邊框。（3）通常情況下，需要對文本框和密碼框設(shè)置2～3px的內(nèi)邊距，以使用戶輸入的內(nèi)容不會緊貼輸入框。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)。課后作業(yè)2：借助超星學(xué)習(xí)平臺的教學(xué)視頻進行線下自學(xué)第5、6學(xué)時（制作學(xué)生信息注冊頁面）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.重難點內(nèi)容講授：（70分鐘）【任務(wù)實現(xiàn)】制作學(xué)生信息注冊頁面使用前面所學(xué)的表單知識構(gòu)建學(xué)生信息注冊表單，并使用CSS定義表單樣式，頁面瀏覽效果如下圖所示。具體要求如下：（1）定義表單域。（2）使用表單控件定義各輸入控件。（3）使用<input>標(biāo)記的按鈕屬性定義提交和重置按鈕。（4）通過CSS整體設(shè)置表單樣式。分析結(jié)構(gòu)（10分鐘）搭建結(jié)構(gòu)（20分鐘）此時瀏覽網(wǎng)頁，效果如圖所示定義樣式（40分鐘）搭建表單結(jié)構(gòu)后，使用CSS內(nèi)部樣式表定義表單各元素樣式，將該部分代碼放入<head>和</head>標(biāo)記之間，樣式表代碼如下。=2\*ROMANII.拓展練習(xí)（15分鐘）學(xué)生自行嘗試。小組成員之間協(xié)作討論，教師巡視，對疑難問題進行解答。III.課堂小結(jié)：（5分鐘）本任務(wù)圍繞登錄和注冊表單的制作，介紹了表單的創(chuàng)建，主要包括表單相關(guān)標(biāo)記以及如何使用CSS定義表單的樣式，最后綜合利用這些知識完成了學(xué)生信息注冊表單的制作。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)。課后作業(yè)2：借助超星學(xué)習(xí)平臺的教學(xué)視頻進行線下自學(xué)隨著互聯(lián)網(wǎng)的飛速發(fā)展，各種智能終端的普及，前端開發(fā)越來越受到重視，人才需求量巨大，不僅僅是普通的靜態(tài)頁面，更多的是頁面的沖擊和美感的享受。激發(fā)學(xué)生學(xué)好該門課，成為未來的優(yōu)秀Web前端開發(fā)工程師。通過編寫CSS代碼，讓學(xué)生了解代碼書寫要遵循規(guī)范，小錯誤可能會影響大局面，要養(yǎng)成嚴(yán)謹(jǐn)細(xì)致的工匠精神。靈活運用各種表單