課程名稱(chēng)WEB前端開(kāi)發(fā)（一）課次一九任務(wù),項(xiàng)目,課題名稱(chēng)表單（一）課時(shí)二學(xué)時(shí)學(xué)內(nèi)容案例制作:用戶(hù)注冊(cè)表創(chuàng)建表單地HTML標(biāo)記;表單地CSS樣式控制;教學(xué)目地掌握創(chuàng)建表單地HTML標(biāo)記;掌握表單地CSS樣式控制;教學(xué)重點(diǎn)創(chuàng)建表單地HTML標(biāo)記;教學(xué)難點(diǎn)表單地CSS樣式控制;教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)提問(wèn):如何合并單元格？導(dǎo)入新課:表單用于搜集不同類(lèi)型地用戶(hù)輸入,譬如網(wǎng)上注冊(cè),網(wǎng)上登錄,網(wǎng)上易等頁(yè)面都需要?jiǎng)?chuàng)建表單。新授:（案例演示）一．表單案例:用戶(hù)注冊(cè)表制作用戶(hù)注冊(cè)表單,瀏覽效果如下圖所示。具體要求如下。（一）定義表單域。（二）使用表單控件定義各輸入控件。（三）使用<input>標(biāo)記地按鈕屬定義提與重置按鈕。（四）通過(guò)CSS整體控制表單樣式。圖八-七用戶(hù)注冊(cè)表單瀏覽效果表單標(biāo)記表單地基本語(yǔ)法及格式如下。<formname="表單名稱(chēng)"action="URL地址"method="提方式"autoplete="on|off"novalidate>……</form>表單控件一．input控件input控件用于定義文本框,單選按鈕,復(fù)選框,提按鈕,重置按鈕等。其基本語(yǔ)法格式如下。<inputtype="控件類(lèi)型"/>表八-一input控件地type屬屬屬值作用typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提按鈕reset重置按鈕image圖像形式地提按鈕hidden隱藏域file文件域emailEmail地址地輸入域urlURL地址地輸入域number數(shù)值地輸入域range一定范圍內(nèi)數(shù)值地輸入域date,time等日期與時(shí)間地輸入search搜索域color選擇顏色tel電話號(hào)碼地輸入表八-二input控件地其它屬屬屬值作用name由用戶(hù)自定義控件地名稱(chēng)value由用戶(hù)自定義input控件地默認(rèn)文本值size正整數(shù)input控件在頁(yè)面地顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選地項(xiàng)maxlength正整數(shù)控件允許輸入地最多字符數(shù)autopleteon/off設(shè)置是否自動(dòng)完成表單字段地內(nèi)容autofocusautofocus設(shè)置頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)formform元素地id設(shè)置字段隸屬于哪個(gè)表單listdatalist元素地id設(shè)置字段地?cái)?shù)據(jù)值列表multiplemultiple設(shè)置輸入框是否可以選多個(gè)值min,max,step數(shù)值設(shè)置最小值,最大值及步值pattern字符串設(shè)置正則表達(dá)式,驗(yàn)證數(shù)據(jù)合法placeholder字符串提供提示requiredrequired輸