Web前端開發(fā)HTML5 CSS3表單教案

課程名稱WEB前端開發(fā)（一）課次一九任務(wù),項(xiàng)目,課題名稱表單（一）課時(shí)二學(xué)時(shí)學(xué)內(nèi)容案例制作:用戶注冊表創(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ù)提問:如何合并單元格？導(dǎo)入新課:表單用于搜集不同類型地用戶輸入,譬如網(wǎng)上注冊,網(wǎng)上登錄,網(wǎng)上易等頁面都需要?jiǎng)?chuàng)建表單。新授:（案例演示）一．表單案例:用戶注冊表制作用戶注冊表單,瀏覽效果如下圖所示。具體要求如下。（一）定義表單域。（二）使用表單控件定義各輸入控件。（三）使用<input>標(biāo)記地按鈕屬定義提與重置按鈕。（四）通過CSS整體控制表單樣式。圖八-七用戶注冊表單瀏覽效果表單標(biāo)記表單地基本語法及格式如下。<formname="表單名稱"action="URL地址"method="提方式"autoplete="on|off"novalidate>……</form>表單控件一．input控件input控件用于定義文本框,單選按鈕,復(fù)選框,提按鈕,重置按鈕等。其基本語法格式如下。<inputtype="控件類型"/>表八-一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由用戶自定義控件地名稱value由用戶自定義input控件地默認(rèn)文本值size正整數(shù)input控件在頁面地顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選地項(xiàng)maxlength正整數(shù)控件允許輸入地最多字符數(shù)autopleteon/off設(shè)置是否自動(dòng)完成表單字段地內(nèi)容autofocusautofocus設(shè)置頁面加載后是否自動(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輸