版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、YCF正版可修改PPT(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目五-2電子課件網(wǎng)頁(yè)中的表單項(xiàng)目五授課教師:姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練二 知識(shí)準(zhǔn)備表單概述;表單高級(jí)元素。表單基本元素;表單其他元素;表單其他元素表單其他元素如表所示。標(biāo)簽含義說(shuō)明textarea多行文本輸入框主要用于輸入較長(zhǎng)的文本信息。select下拉列表框下拉列表是一種簡(jiǎn)單的帶有預(yù)選值的下拉列表,能夠在有限空間設(shè)置多個(gè)選項(xiàng)表單其他元素【例5-4】制作入庫(kù)單實(shí)例,代碼如下所示(示例文件5-4.html)。 入庫(kù)單bodyline-height:30px;入庫(kù)
2、單入庫(kù)產(chǎn)品編號(hào): 表單其他元素【例5-4】制作入庫(kù)單實(shí)例,代碼如下所示(示例文件5-4.html)。請(qǐng)選擇所入倉(cāng)庫(kù): 倉(cāng)庫(kù)一倉(cāng)庫(kù)二倉(cāng)庫(kù)三請(qǐng)選擇經(jīng)手庫(kù)管員: 張金紅李穎王占坤 入庫(kù)原因:填寫貨物來(lái)源創(chuàng)建了一個(gè)下拉列表,下拉列表是一種簡(jiǎn)單的帶有預(yù)選值的下拉列表,能夠在有限空間設(shè)置多個(gè)選項(xiàng),由和這兩個(gè)標(biāo)簽配合使用,表示整個(gè)列表,表示一個(gè)列表項(xiàng),Value屬性表示選項(xiàng)值,Selected表示是否被選中。創(chuàng)建了一個(gè)可以同時(shí)顯示三條記錄的列表,它的寫法與倉(cāng)庫(kù)列表類似,不同之處是在select標(biāo)簽后面加上size屬性:,表示下拉列表展開(kāi),可見(jiàn)列表項(xiàng)數(shù)目為3。創(chuàng)建了一個(gè)文本區(qū)域,標(biāo)簽是,rows屬性定義文本框
3、的高度,cols屬性定義文本框的寬度,單位是單個(gè)字符數(shù)。表單其他元素【例5-4】制作入庫(kù)單實(shí)例,代碼如下所示(示例文件5-4.html)。在chrome瀏覽器中預(yù)覽表單高級(jí)元素input標(biāo)簽還有一些高級(jí)應(yīng)用,如表所示。type值含義說(shuō)明urlURL地址輸入框要求輸入網(wǎng)站網(wǎng)址,在提交表單時(shí),會(huì)自動(dòng)驗(yàn)證是否是URL地址。emailemail地址輸入框要求輸入email地址,在提交表單時(shí),會(huì)自動(dòng)驗(yàn)證是否是email地址。date 日期選擇框選擇一個(gè)日期。time時(shí)間選擇框選擇一個(gè)時(shí)間。number數(shù)字輸入框用戶可以直接輸入數(shù)字,也可以通過(guò)上下箭頭選擇數(shù)字。range滑條控件可以通過(guò)滑塊選擇合適的數(shù)值
4、。表單高級(jí)元素【例5-5】將上例的入庫(kù)單繼續(xù)完善一下,修改成如圖所示效果,增加了入庫(kù)日期、入庫(kù)時(shí)間、入庫(kù)數(shù)量、入庫(kù)產(chǎn)品合格率等內(nèi)容(示例文件5-5.html)。表單高級(jí)元素【例5-5】將上例的入庫(kù)單繼續(xù)完善一下,修改成如圖所示效果,增加了入庫(kù)日期、入庫(kù)時(shí)間、入庫(kù)數(shù)量、入庫(kù)產(chǎn)品合格率等內(nèi)容(示例文件5-5.html)。在【例5-4】的26行之后插入如下代碼:入庫(kù)日期:入庫(kù)時(shí)間:入庫(kù)數(shù)量:入庫(kù)產(chǎn)品合格率:創(chuàng)建了日期選擇框,type屬性值為date,用戶單擊輸入框中的向下按鈕,即可在彈出的窗口中選擇需要的日期,也可以通過(guò)微調(diào)按鈕選擇日期。創(chuàng)建了時(shí)間選擇框,type屬性值為time,用戶可以直接輸入時(shí)
5、間,也可以點(diǎn)擊右側(cè)的微調(diào)按鈕,選擇時(shí)間。創(chuàng)建了數(shù)字選擇框,type屬性值為number,用戶可以直接輸入數(shù)字,也可以單擊微調(diào)按鈕上下選擇合適的數(shù)值。創(chuàng)建了一個(gè)滑塊控件,type屬性值為range,min屬性表示滑塊的最小數(shù)值,max屬性值表示滑塊的最大數(shù)值,step屬性表示滑塊梯度的大小。表單高級(jí)元素【例5-6】驗(yàn)證URL地址和email地址的功能實(shí)例,代碼如下所示(示例文件5-6.html)。驗(yàn)證地址bodyline-height:30px;驗(yàn)證一個(gè)網(wǎng)址:驗(yàn)證郵箱地址:創(chuàng)建了URL地址輸入框,type屬性值為url,如果在此輸入的不是網(wǎng)站地址,當(dāng)單擊提交按鈕時(shí),會(huì)彈出錯(cuò)誤提示。require
6、d屬性值為“required”,表示該項(xiàng)不能為空,用戶如果沒(méi)填寫這一項(xiàng),就單擊“提交”按鈕,將彈出提示信息。創(chuàng)建了email地址輸入框,type屬性值為email,如果在此輸入的不是郵箱地址,在提交表單時(shí),會(huì)彈出錯(cuò)誤提示。表單高級(jí)元素【例5-6】驗(yàn)證URL地址和email地址的功能實(shí)例,代碼如下所示(示例文件5-6.html)。在chrome瀏覽器中預(yù)覽作業(yè)一、選擇題1.下列_標(biāo)簽可以實(shí)現(xiàn)表單中的下拉列表框功能。A textarea B checkbox C select D text2._表單域適合輸入一段文字內(nèi)容。A textarea B checkbox C radio D text3.在input標(biāo)簽的高
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 讀《三國(guó)演義》有感(6篇)
- 簡(jiǎn)短的家庭教育講座觀后感
- 網(wǎng)管年終總結(jié)報(bào)告(3篇)
- 運(yùn)動(dòng)會(huì)的新聞稿200字(19篇)
- 幼兒師德演講主持詞(3篇)
- 手足口病預(yù)防控制課件
- 保定學(xué)院《漢語(yǔ)國(guó)際教育概論》2021-2022學(xué)年第一學(xué)期期末試卷
- 保定學(xué)院《城市地理學(xué)》2022-2023學(xué)年第一學(xué)期期末試卷
- 寶雞文理學(xué)院《中國(guó)古典舞身韻》2021-2022學(xué)年第一學(xué)期期末試卷
- 一日拓展策劃書3篇
- 道路交通工程專業(yè)英語(yǔ)詞匯
- 凈水廠技術(shù)改造工程項(xiàng)目可行性研究報(bào)告
- 小學(xué)綜合實(shí)踐一年級(jí)上冊(cè)第2單元《主題活動(dòng)一:背上背包去秋游》教案
- 建筑施工勞動(dòng)力計(jì)劃表格
- 六三制青島版三年級(jí)科學(xué)上冊(cè)第五單元《地球上的水》全部課件(一共4課時(shí))
- 三年級(jí)上冊(cè)英語(yǔ)單詞競(jìng)賽
- 人教版四年級(jí)數(shù)學(xué)上冊(cè)課件 第4單元 速度、時(shí)間和路程(共13張PPT)
- NMR有機(jī)氟譜課件
- 新生兒被盜應(yīng)急演練腳本
- 博物館布展工程施工組織方案
- (完整PPT)weka數(shù)據(jù)挖掘教程課件
評(píng)論
0/150
提交評(píng)論