項目五任課老師：XXX應(yīng)用和美化表單PRESENTATION//SLIDE1制作“反饋意見”頁面2制作“學(xué)員信息登記表”頁PRESENTATION//SLIDE任務(wù)一制作“反饋意見”頁面一、任務(wù)引入通過前面的學(xué)習(xí)，小H已經(jīng)掌握了很多網(wǎng)頁設(shè)計和美化的方法，自己也能獨立的制作頁面了，他很有成就感。但是，他有一個大大的疑惑，就是網(wǎng)站上那些可以填寫個人信息并且能夠進行提交的網(wǎng)頁頁面又是怎么制作的呢？比如注冊頁面、登錄頁面、還有問卷調(diào)查類頁面。通過上網(wǎng)搜索，小H知道這類型的頁面需要通過“表單”來實現(xiàn)。那什么是表單、怎樣制作帶有表單內(nèi)容的頁面，以及怎樣對這類頁面進行美化，小H開啟了本次學(xué)習(xí)之旅。15.1認(rèn)識表單表單是HTML網(wǎng)頁中的重要元素，它通過收集來自用戶的信息，并將信息發(fā)送給服務(wù)器端程序來處理，以實現(xiàn)網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。簡單的說，“表單”是網(wǎng)頁上用于輸入信息的區(qū)域，用來實現(xiàn)網(wǎng)頁與用戶的交互、溝通。二、相關(guān)知識二、相關(guān)知識15.1.1表單的構(gòu)成在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構(gòu)成（如圖15-1所示）。15.1.2創(chuàng)建表單在HTML中，<form></form>標(biāo)記被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，<form></form>中的所有內(nèi)容都會被提交給服務(wù)器。二、相關(guān)知識15.2表單屬性在HTML5中，表單擁有多個屬性，通過設(shè)置表單屬性可以實現(xiàn)提交方式、自動完成、表單驗證等不同的表單的功能。二、相關(guān)知識1action屬性4autocomplete屬性3name屬性2method屬性二、相關(guān)知識表單屬性5novalidate屬性input元素及屬性123

Input元素的type屬性表單對象分組

提示信息二、相關(guān)知識15.3input元素1、教學(xué)設(shè)備與工具（1）電腦/每人一臺；（2）U盤、相關(guān)的軟件（AdobeDreamweaverCS6或HBuilder）。三、資源準(zhǔn)備2、職位分工（如表15-3所示）三、資源準(zhǔn)備表15-13職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進行統(tǒng)一安排，下一個項目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實踐操作制作“反饋意見”頁面步驟1：任務(wù)引入、效果圖展示前面講解了HTML5中創(chuàng)建表單的方法，也介紹了表單中常用控件的添加方法，以及提示信息、控件分組的設(shè)置方法，本次實訓(xùn)將結(jié)合這些知識點制作一個“反饋意見”的頁面，頁面效果（如圖15-2所示）。步驟2：任務(wù)分析分析“反饋意見”頁面的構(gòu)成元素，將其拆解為3個部分。其中，“反饋意見”幾個字采用標(biāo)題標(biāo)簽，表單部分由兩個分組構(gòu)成，分別是“用戶信息”和“反饋內(nèi)容”，表單底部的“提交”和“重置”按鈕可用一個div單獨放置。四、實踐操作（1）啟動Hbuilder，并新建項目文件夾example15，再將index.html改為“feedback.html”。（2）根據(jù)上述分析，使用相應(yīng)的HTML5元素搭建網(wǎng)頁結(jié)構(gòu)四、相關(guān)知識步驟3：任務(wù)實現(xiàn)五、總結(jié)評價1、小組互評（如表15-4所示）組別：

組員：

任務(wù)名稱：

制作“反饋意見”頁面教學(xué)環(huán)節(jié)

被評組別評分細則第

組課前預(yù)習(xí)基礎(chǔ)知識完整、正確（10分）得分：

實施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：

2：

3：

4：

質(zhì)量檢驗1、學(xué)習(xí)態(tài)度（5分）1：

2：

3：

2、工作效率（5分）3、代碼編寫規(guī)范（10分）總分（100分）PRESENTATION//SLIDE任務(wù)二制作“學(xué)員信息登記表”頁面一、任務(wù)引入通過學(xué)習(xí)，小H已經(jīng)掌握了表單的功能、結(jié)構(gòu)，創(chuàng)建表單的方法，input元素及其相關(guān)屬性。這里，小H將繼續(xù)學(xué)習(xí)表單，主要涉及表單里input元素的其他屬性、其他表單控件(包括多行文本域、下拉列表、datalist元素)以及CSS美化表單的方法。最后通過制作“學(xué)員信息登記表”頁面，進一步美化表單。1.input元素的其他屬性1)autofocus屬性2)form屬性3）list屬性4）multiple屬性5）min、max和step屬性6）pattern屬性7）placeholder屬性8）required屬性二、相關(guān)知識2.其他表單元素1)textarea元素2)select控件3)datalist元素二、相關(guān)知識1、教學(xué)設(shè)備與工具（1）電腦/每人一臺；（2）U盤、相關(guān)的軟件（AdobeDreamweaverCS6或HBuilder）。三、資源準(zhǔn)備2、職位分工（如表15-3所示）三、資源準(zhǔn)備表15-13職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進行統(tǒng)一安排，下一個項目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實踐操作制作“學(xué)員信息登記表”頁面步驟1：任務(wù)引入、效果圖展示前面講解了表單及其屬性、常見的表單控件及屬性，以及如何使用CSS控制表單樣式。為了使同學(xué)們能夠更好地運用表單組織頁面，本次實訓(xùn)將結(jié)合這些知識點制作一個“信息登記表”的頁面，其效果.步驟2：任務(wù)分析四、實踐操作1)結(jié)構(gòu)分析2)樣式分析步驟3：任務(wù)實現(xiàn)1、啟動Hbuilder，并新建項目文件夾example16，再將index.html改為“information.html”；然后將所需圖片素材拷貝至img文件夾中。2、根據(jù)上述分析，使用相應(yīng)的HTML5元素搭建網(wǎng)頁結(jié)構(gòu)3、定義CSS樣式四、實踐操作1)定義基礎(chǔ)樣式首先定義頁面的統(tǒng)一樣式。四、實踐操作2）整體控制界面使用<div>標(biāo)記搭建結(jié)構(gòu)，并設(shè)置其寬高屬性。另外，為了使頁面更加豐富、美觀，可以使用CSS為頁面添加背景圖片，并將平鋪方式設(shè)置為不平鋪。3、定義CSS樣式3)整體控制表單制作頁面結(jié)構(gòu)時，我們使用<form>標(biāo)記對表單界面進行整體控制，設(shè)置其寬度和高度固定。同時，表單需要依據(jù)最外層的大盒子進行絕對定位，并設(shè)置其偏移量。二、相關(guān)知識4）制作標(biāo)題部分對于效果圖16-4中的標(biāo)題部分，需要使其居中對齊。另外，為了使標(biāo)題和上下表單內(nèi)容之間有一定的距離，可以對標(biāo)題設(shè)置合適的外邊距。5)整體控制每行信息觀察效果圖16-4中的表單部分，可以發(fā)現(xiàn)，每行信息模塊都獨占一行，包括提示信息和表單控件兩部分。另外，行與行之間拉開一定的距離，需要設(shè)置上外邊距。二、相關(guān)知識6）控制左邊的提示信息由于表單左側(cè)的提示信息居右對齊，且和右邊的表單控件之間存在一定的間距，需要設(shè)置其對齊方式及合適的右內(nèi)邊距。7)控制右邊的表單控件觀察右邊的表單控件，可以看出表單右邊包括多個不同類型的輸入框，需要定義它們的寬高及邊框樣式。另外，為了使輸入框與輸入內(nèi)容之間拉開一些距離，需要設(shè)置內(nèi)邊距padding。二、相關(guān)知識8）控制下方的兩個按鈕對于表單下方的提交和重置按鈕，需要設(shè)置其寬度、高度及背景色。另外，為了設(shè)置按鈕與上邊和左邊的元素拉開一定的距離，需要對其設(shè)置合適的上、左外邊距。五、總結(jié)評價1、小組互評（如表16-5所示）表16-5實訓(xùn)過程性評價表（小組互評）組別：

組員：

任務(wù)名稱：

制作“學(xué)員信息登記表”頁面教學(xué)環(huán)節(jié)

被評組別評分細則第

組課前預(yù)習(xí)基礎(chǔ)知識完整、正確（10分）得分：

實施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：