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

第三章表單回顧與作業(yè)點評使用什么無序列表和列表項？定義列表的

dl、dt、dd分別表示什么意義，其作用是什么？創(chuàng)建表格的基本結(jié)構(gòu)語法是什么？提問2/35預習檢查制作一個下拉列表需要使用哪些？提問語義化的概念是什么？常見的表單元素有哪些？3/35本章任務制作語義化的表單4/35本章目標會使用表單元素布局表單會制作語義化的表單5/35表單在網(wǎng)頁中的應用問題大家在上網(wǎng)時，看到的表單在網(wǎng)頁中的應用有哪些？6/35表單語法語法<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)在實際網(wǎng)頁開發(fā)中通常采用post方式提交表單數(shù)據(jù)經(jīng)驗7/35表單元素格式語法<input

type="text" name="fname"

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

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

為radio時必須指定一個值size指定表單元素的初始寬度。當type

為text

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

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

type="text" name="userName"

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

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

"

name="pass"

size="20"

>框框的名稱框的長度10/35表單元素8-3單選按鈕語法<input

name="gen"

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

name="gen"

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

value="sports">運動<input

type="checkbox"name="interest"

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

type="checkbox"name="interest"

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

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

value="選項的值"selected="selected">…</option><option

value="選項的值">…</option></select>選項默認選中項13/35表單元素8-6按鈕圖語法<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多行文本域語法<textarea

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

action=""

method="post"

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

type="file"

name="files"

/><input

type="submit"

name="upload"

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

type="hidden"

value="666"

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

name="name"

type="text"

value=" "

readonly="readonly"><input

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

action=""

method="post"

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

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

for="id">標注的文本</label><input

type="radio"

name="gender"

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

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

頁，方便和用戶進行交互。常用的表單元素有文本框、

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

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

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