Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15--表單與input元素課件

1、任務(wù)15 表單與input元素第六單元 HTML5表單的應(yīng)用學(xué)習(xí)目標(biāo)掌握表單樣式創(chuàng)建表單input元素及屬性網(wǎng)頁中常用的表單功能了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實戰(zhàn)演練制作登錄界面實戰(zhàn)演練制作簡歷表單知識準(zhǔn)備1. 認(rèn)識表單表單：用于收集用戶在客戶端提交的信息，并將這些信息發(fā)送給服務(wù)器進(jìn)行處理。如常見的搜索功能、用戶登錄功能、注冊功能等。組成：表單元素（也叫表單控件）、提示信息和表單域。autocomplete屬性：控制表單自動完成功能的開啟和關(guān)閉novalidate屬性：規(guī)定當(dāng)提交表單時不對其進(jìn)行驗證知識準(zhǔn)備2. 創(chuàng)建表單表單定義：各種表單元素接收表單數(shù)據(jù)的服務(wù)器程序的url地址。表單數(shù)據(jù)的提交方式。（

2、1）get：默認(rèn)值，提交的表單數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。（2）post：表單數(shù)據(jù)傳遞的保密性較好，并無數(shù)據(jù)量的限制。定義表單的名稱知識準(zhǔn)備3. input元素及屬性input元素：表單中最常用的元素，它可以定義單行文本輸入框、密碼輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。語法格式：知識準(zhǔn)備屬性屬性值含義說明typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailEmail地址的輸入域urlU

3、RL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Date pickers（date,month,week,time,datetime, datetime-local）日期和時間的輸入類型search搜索域color顏色輸入類型tel電話號碼輸入類型知識準(zhǔn)備屬性屬性值含義說明name用戶自定義控件的名稱value用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)

4、被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)autocompleteon/off設(shè)定是否自動完成表單字段內(nèi)容autofocusautofocus指定頁面加載后是否自動獲取焦點formform元素的id設(shè)定字段隸屬于哪一個或多個表單listdatalist元素的id指定字段的候選數(shù)據(jù)值列表multiplemultiple指定輸入框是否可以選擇多個值min、max和step數(shù)值規(guī)定輸入框所允許的最小值、最大值和間隔pattern字符串驗證輸入的內(nèi)容是否與定義的正則表達(dá)式匹配placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空實戰(zhàn)演練 案例描述：設(shè)計并制作網(wǎng)站登錄界面，網(wǎng)頁效果如下圖1所示。當(dāng)光標(biāo)移到按鈕上時，光標(biāo)圖案和按鈕背景顏色會發(fā)生變化，如圖2所示。制作登錄界面圖1圖2強(qiáng)化訓(xùn)練案例描述：設(shè)計并制作簡歷表單，網(wǎng)頁效果如下。制作簡歷表單任務(wù)小結(jié)01創(chuàng)