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

任務(wù)15表單與input元素第六單元HTML5表單的應(yīng)用任務(wù)15表單與input元素第六單元HTML5表1學習目標掌握表單樣式創(chuàng)建表單input元素及屬性學習目標掌握表單樣式創(chuàng)建表單input元素及屬性2網(wǎng)頁中常用的表單功能了解:學習目標網(wǎng)頁中常用的表單功能了解:學習目標3任務(wù)目標實戰(zhàn)演練——制作登錄界面實戰(zhàn)演練——制作簡歷表單任務(wù)目標實戰(zhàn)演練——制作登錄界面實戰(zhàn)演練——制作簡歷表單4知識準備1.認識表單表單：用于收集用戶在客戶端提交的信息，并將這些信息發(fā)送給服務(wù)器進行處理。如常見的搜索功能、用戶登錄功能、注冊功能等。組成：表單元素（也叫表單控件）、提示信息和表單域。知識準備1.認識表單表單：用于收集用戶在客戶端提交的信息，5autocomplete屬性：控制表單自動完成功能的開啟和關(guān)閉novalidate屬性：規(guī)定當提交表單時不對其進行驗證知識準備2.創(chuàng)建表單表單定義：<formaction="url地址"method="提交方式"name="表單名稱">各種表單元素</form>接收表單數(shù)據(jù)的服務(wù)器程序的url地址。表單數(shù)據(jù)的提交方式。（1）get：默認值，提交的表單數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。（2）post：表單數(shù)據(jù)傳遞的保密性較好，并無數(shù)據(jù)量的限制。定義表單的名稱autocomplete屬性：控制表單自動完成功能的開啟和關(guān)6知識準備3.input元素及屬性input元素：表單中最常用的元素，它可以定義單行文本輸入框、密碼輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。語法格式：<inputtype="控件類型"/>知識準備3.input元素及屬性input元素：表單中最常7知識準備屬性屬性值含義說明typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailEmail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Datepickers（date,month,week,time,datetime,datetime-local）日期和時間的輸入類型search搜索域color顏色輸入類型tel電話號碼輸入類型知識準備屬性屬性值含義說明typetext單行文本輸入框pa8知識準備屬性屬性值含義說明name用戶自定義控件的名稱value用戶自定義input控件中的默認文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項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)容是否與定義的正則表達式匹配placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空知識準備屬性屬性值含義說明name用戶自定義控件的名稱val9實戰(zhàn)演練案例描述：設(shè)計并制作網(wǎng)站登錄界面，網(wǎng)頁效果如下圖1所示。當光標移到按鈕上時，光標圖案和按鈕背景顏色會發(fā)生變化，如圖2所示。制作登錄界面圖1圖2實戰(zhàn)演練案例描述：設(shè)計并制作網(wǎng)站登錄界面，網(wǎng)10強化訓練案例描述：設(shè)計并制作簡歷表單，網(wǎng)頁效果如下。制作簡歷表單強化訓練案例描述：設(shè)計并制作簡歷表單，網(wǎng)頁效果如下。制作簡歷11任務(wù)小結(jié)01創(chuàng)建表單02input元素及屬性03表單樣式任務(wù)小結(jié)01創(chuàng)建表單02input元素及屬性03表單樣式12課后實訓設(shè)計會員登錄系統(tǒng)表單，如圖1所示。當用戶輸入登錄信息時，效果如圖2所示。圖1圖2課后實訓設(shè)計會員登錄系統(tǒng)表單，如圖1所示。當用戶輸入登錄信息13謝謝觀看謝謝觀看14任務(wù)15表單與input元素第六單元HTML5表單的應(yīng)用任務(wù)15表單與input元素第六單元HTML5表15學習目標掌握表單樣式創(chuàng)建表單input元素及屬性學習目標掌握表單樣式創(chuàng)建表單input元素及屬性16網(wǎng)頁中常用的表單功能了解:學習目標網(wǎng)頁中常用的表單功能了解:學習目標17任務(wù)目標實戰(zhàn)演練——制作登錄界面實戰(zhàn)演練——制作簡歷表單任務(wù)目標實戰(zhàn)演練——制作登錄界面實戰(zhàn)演練——制作簡歷表單18知識準備1.認識表單表單：用于收集用戶在客戶端提交的信息，并將這些信息發(fā)送給服務(wù)器進行處理。如常見的搜索功能、用戶登錄功能、注冊功能等。組成：表單元素（也叫表單控件）、提示信息和表單域。知識準備1.認識表單表單：用于收集用戶在客戶端提交的信息，19autocomplete屬性：控制表單自動完成功能的開啟和關(guān)閉novalidate屬性：規(guī)定當提交表單時不對其進行驗證知識準備2.創(chuàng)建表單表單定義：<formaction="url地址"method="提交方式"name="表單名稱">各種表單元素</form>接收表單數(shù)據(jù)的服務(wù)器程序的url地址。表單數(shù)據(jù)的提交方式。（1）get：默認值，提交的表單數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。（2）post：表單數(shù)據(jù)傳遞的保密性較好，并無數(shù)據(jù)量的限制。定義表單的名稱autocomplete屬性：控制表單自動完成功能的開啟和關(guān)20知識準備3.input元素及屬性input元素：表單中最常用的元素，它可以定義單行文本輸入框、密碼輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。語法格式：<inputtype="控件類型"/>知識準備3.input元素及屬性input元素：表單中最常21知識準備屬性屬性值含義說明typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailEmail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Datepickers（date,month,week,time,datetime,datetime-local）日期和時間的輸入類型search搜索域color顏色輸入類型tel電話號碼輸入類型知識準備屬性屬性值含義說明typetext單行文本輸入框pa22知識準備屬性屬性值含義說明name用戶自定義控件的名稱value用戶自定義input控件中的默認文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項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)容是否與定義的正則表達式匹配placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空知識準備屬性屬性值含義說明name用戶自定義控件的名稱val23實戰(zhàn)演練案例描述：設(shè)計并制作網(wǎng)站登錄界面，網(wǎng)頁效果如下圖1所示。當光標移到按鈕上時，光標圖案和按鈕背景顏色會發(fā)生變化，如圖2所示。制作登錄界面圖1圖2實戰(zhàn)演練案例描述：設(shè)計并制作網(wǎng)站登錄界面，網(wǎng)24強化訓練案例描述：設(shè)計并制作簡歷表單，網(wǎng)頁效果如下