Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15-表單與input元素課件_第1頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15-表單與input元素課件_第2頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15-表單與input元素課件_第3頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15-表單與input元素課件_第4頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)15-表單與input元素課件_第5頁
已閱讀5頁,還剩23頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

任務(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)頁效果如下

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論