（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目五-2電子課件

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)簽的高