使用html語(yǔ)言和css開發(fā)商業(yè)站點(diǎn)

第三章表單回顧與作業(yè)點(diǎn)評(píng)使用什么無(wú)序列表和列表項(xiàng)？定義列表的

dl、dt、dd分別表示什么意義，其作用是什么？創(chuàng)建表格的基本結(jié)構(gòu)語(yǔ)法是什么？提問2/35預(yù)習(xí)檢查制作一個(gè)下拉列表需要使用哪些？提問語(yǔ)義化的概念是什么？常見的表單元素有哪些？3/35本章任務(wù)制作語(yǔ)義化的表單4/35本章目標(biāo)會(huì)使用表單元素布局表單會(huì)制作語(yǔ)義化的表單5/35表單在網(wǎng)頁(yè)中的應(yīng)用問題大家在上網(wǎng)時(shí)，看到的表單在網(wǎng)頁(yè)中的應(yīng)用有哪些？6/35表單語(yǔ)法語(yǔ)法<formmethod="post"

action="result.html"><p>

名字：<input

name="name"

type="text"></p><p>

：<input

name="pass"

type="password"

>

</p><p><input

type="submit"

name="Button"

value="提交"><input

type="reset"

name="Reset"

value="重填"></p></form>規(guī)定如何發(fā)送表單數(shù)據(jù)常用值：get

|

post表示向何處發(fā)送表單數(shù)據(jù)演示示例1：表單的基本結(jié)構(gòu)在實(shí)際網(wǎng)頁(yè)開發(fā)中通常采用post方式提交表單數(shù)據(jù)經(jīng)驗(yàn)7/35表單元素格式語(yǔ)法<input

type="text" name="fname"

value="text">Input元素類型Input元素名稱Input元素的值屬性說(shuō)明type指定元素的類型。text、password、checkbox、radio、submitreset、file、hidden、image

和button，默認(rèn)為textname指定表單元素的名稱。value元素的初始值。type

為radio時(shí)必須指定一個(gè)值size指定表單元素的初始寬度。當(dāng)type

為text

或password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位maxlengthtype為text

或password時(shí)，輸入的最大字符數(shù)checkedtype為radio或checkbox時(shí)，指定按鈕是否是被選中8/35表單元素8-1文本框語(yǔ)法<input

type="text" name="userName"

value="用戶名"size="30"

maxlength="20">文本框文本框名稱文本框初始值文本框長(zhǎng)度文本框可輸入最大字符9/35表單元素8-2框語(yǔ)法<inputtype="password

"

name="pass"

size="20"

>框框的名稱框的長(zhǎng)度10/35表單元素8-3單選按鈕語(yǔ)法<input

name="gen"

type="radio"value="男"checked="checked">男<input

name="gen"

type="radio"value="女">女單選按鈕框值單選按鈕選中狀態(tài)11/35表單元素8-4復(fù)選框語(yǔ)法<inputtype="checkbox"name="interest"

value="sports">運(yùn)動(dòng)<input

type="checkbox"name="interest"

value="talk"checked="checked">聊天<input

type="checkbox"name="interest"

value="play">玩復(fù)選框值復(fù)選框選中狀態(tài)12/35表單元素8-5列表框語(yǔ)法列表框<select

name="列表名稱"size="行數(shù)"><option

value="選項(xiàng)的值"selected="selected">…</option><option

value="選項(xiàng)的值">…</option></select>選項(xiàng)默認(rèn)選中項(xiàng)13/35表單元素8-6按鈕圖語(yǔ)法<input

type="button"name="butButton"value="button按鈕"/>重置按鈕普通按鈕演示示例7：按鈕提交按鈕路徑<input

type="reset"name="butReset"value="reset按鈕"><input

type="image" src="images/login.gif"

/>按鈕上顯示的文字14/35表單元素8-7多行文本域語(yǔ)法<textarea

name="showText"cols="x"rows="y">文本內(nèi)容</textarea>多行文本域顯示的列數(shù)顯示的行數(shù)15/35表單元素8-8文件域語(yǔ)法<form

action=""

method="post"

enctype="multipart/form-data"><p><input

type="file"

name="files"

/><input

type="submit"

name="upload"

value="上傳"/></p></form>文件域表單編碼屬性16/35學(xué)員操作—網(wǎng)易郵箱登錄頁(yè)面練習(xí)需求說(shuō)明制作網(wǎng)頁(yè)郵箱登錄頁(yè)面完成時(shí)間：10分鐘17/35學(xué)員操作—阿里巴巴用戶頁(yè)面練習(xí)需求說(shuō)明電子郵箱32個(gè)字符默認(rèn)情況提交按鈕完成時(shí)間：10分鐘18/35學(xué)員操作—人人網(wǎng)頁(yè)面練習(xí)需求說(shuō)明郵箱分別是50默認(rèn)情況生日下拉提交按鈕完成時(shí)間：10分鐘19/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解20/35表單的高級(jí)應(yīng)用隱藏域只讀禁用只讀文本框禁用按鈕21/35隱藏域語(yǔ)法<input

type="hidden"

value="666"

name="userid">隱藏域22/35只讀和禁用語(yǔ)法<input

name="name"

type="text"

value=" "

readonly="readonly"><input

type="submit"disabled="disabled"value="保存">只讀文本框禁用演示示例11：只讀與禁用23/35學(xué)員操作—資料修改頁(yè)面表中n材練習(xí)需求說(shuō)明生日中各下拉列常用郵箱文本框“student@bdq提交按鈕使用素完成時(shí)間：10分鐘24/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解25/35語(yǔ)義化的表單2-1表單語(yǔ)義化符合W3C標(biāo)準(zhǔn)語(yǔ)義化的結(jié)構(gòu)合理、代碼簡(jiǎn)潔演示示例12：語(yǔ)義化26/35語(yǔ)義化的表單2-2域域標(biāo)題演示示例13：域<form

action=""

method="post"

><fieldset><legend>用戶信息</legend>：<input

type="text"/>……</fieldset></form>域域標(biāo)題語(yǔ)法27/35表單元素的標(biāo)注增強(qiáng)鼠標(biāo)的可用性自動(dòng)將焦點(diǎn)轉(zhuǎn)移到與該標(biāo)注相關(guān)的表單元素上演示示例14：標(biāo)注<label

for="id">標(biāo)注的文本</label><input

type="radio"

name="gender"

id="male"/>表單元素的id表單元素id語(yǔ)法28/35小結(jié)表單語(yǔ)義化語(yǔ)義化的目標(biāo)是為了頁(yè)面結(jié)構(gòu)更加合理，在網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)過程中，使用語(yǔ)義化的能夠達(dá)到見名知義的作用語(yǔ)義化的結(jié)構(gòu)，更加符合Web標(biāo)準(zhǔn)，更利于搜索引擎的抓?。⊿EO的優(yōu)化）和開發(fā)29/35學(xué)員操作—語(yǔ)義化的調(diào)研問卷作本練習(xí)需求說(shuō)明使用語(yǔ)義化的

制能夠?qū)崿F(xiàn)鼠標(biāo)點(diǎn)擊文自動(dòng)獲得焦點(diǎn)。完成時(shí)間：10分鐘30/35學(xué)員操作—碼申請(qǐng)頁(yè)面使用語(yǔ)義化的制作碼申請(qǐng)頁(yè)面。練習(xí)需求說(shuō)明完成時(shí)間：10分鐘31/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解32/35總結(jié)表單主要用來(lái)制作

頁(yè)，方便和用戶進(jìn)行交互。常用的表單元素有文本框、

框、單選按鈕、復(fù)選框、列表框、按鈕、多行文本框。使用<label>

的for屬性與表單元素的id屬性相結(jié)合控制單擊該

時(shí)，對(duì)應(yīng)的表單元素自動(dòng)獲得焦點(diǎn)或者被選中。表單元素的只讀和禁用屬性為readonly和disabled語(yǔ)義化的表單結(jié)構(gòu)使得頁(yè)面簡(jiǎn)潔、合理，同時(shí)也符合