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

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