TP03 表單和智能表單的操作

1、表單和智能表單的操作第三章回顧與作業(yè)點(diǎn)評回顧與作業(yè)點(diǎn)評使用什么標(biāo)簽聲明無序列表和列表項(xiàng)？使用什么標(biāo)簽聲明無序列表和列表項(xiàng)？定義列表的標(biāo)簽定義列表的標(biāo)簽dl、dt、dd分別表示什么意分別表示什么意義，其作用是什么？義，其作用是什么？創(chuàng)建表格的基本結(jié)構(gòu)語法是什么？創(chuàng)建表格的基本結(jié)構(gòu)語法是什么？提問提問2/35預(yù)習(xí)檢查預(yù)習(xí)檢查語義化的概念是什么？語義化的概念是什么？常見的表單元素有哪些？常見的表單元素有哪些？制作一個下拉列表需要使用哪些標(biāo)簽？制作一個下拉列表需要使用哪些標(biāo)簽？ 提問提問3/35本章任務(wù)本章任務(wù)制作語義化的表單制作語義化的表單4/35本章目標(biāo)本章目標(biāo)會使用表單元素布局表單會使用表單元素

2、布局表單會制作語義化的表單會制作語義化的表單5/35表單在網(wǎng)頁中的應(yīng)用表單在網(wǎng)頁中的應(yīng)用大家在上網(wǎng)時(shí)，看到的表單在網(wǎng)頁中的應(yīng)用大家在上網(wǎng)時(shí)，看到的表單在網(wǎng)頁中的應(yīng)用有哪些？有哪些？問題問題6/35表單包含的控件表單包含的控件單行文本輸入單行文本輸入框框(TEXT)單選按鈕單選按鈕(RADIO)復(fù)選框復(fù)選框(CHECKBOX)下拉列表下拉列表(SELECT)重置按鈕重置按鈕(RESET)提交按鈕提交按鈕(SUBMIT)多行文本框多行文本框(TEXTAREA)密碼框密碼框(PASSWORD)什么是表單什么是表單官方解釋：官方解釋： 表單：可以收集用戶的信息和反饋意見，是表單：可以收集用戶的信息和反

3、饋意見，是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。網(wǎng)站管理者與瀏覽者之間溝通的橋梁。 8/35表單語法表單語法語法語法 名字：名字： 密碼：密碼： 規(guī)定如何發(fā)送表單數(shù)據(jù)規(guī)定如何發(fā)送表單數(shù)據(jù)常用值：常用值：get | post表示向何處發(fā)送表單數(shù)據(jù)表示向何處發(fā)送表單數(shù)據(jù)演示演示示例示例1：表單的基本結(jié)構(gòu)：表單的基本結(jié)構(gòu)在實(shí)際網(wǎng)頁開發(fā)中通常采用在實(shí)際網(wǎng)頁開發(fā)中通常采用post方式提交表單數(shù)據(jù)方式提交表單數(shù)據(jù)經(jīng)驗(yàn)經(jīng)驗(yàn)9/35表單元素格式表單元素格式語法語法Input元素類型元素類型Input元素名稱元素名稱Input元素的值元素的值屬性屬性說明說明type指定元素指定元素的類型的類型。text、passw

4、ord、checkbox、radio、submit、reset、file、hidden、image 和和 button，默認(rèn)為默認(rèn)為 textname指定指定表單元素的名稱表單元素的名稱。value元素元素的初始值的初始值。type 為為 radio時(shí)時(shí)必須必須指定一個值指定一個值size指定指定表單元素的初始寬度表單元素的初始寬度。當(dāng)當(dāng) type 為為 text 或或 password時(shí)時(shí)，表，表單單元素的大小以字符為單位。對于元素的大小以字符為單位。對于其他類型其他類型，寬度以像素為單位，寬度以像素為單位maxlengthtype為為text 或或 password 時(shí)，時(shí)，輸入輸入的最大

5、字符的最大字符數(shù)數(shù)checkedtype為為radio或或checkbox時(shí)，時(shí)，指定按鈕是否是被選中指定按鈕是否是被選中10/35表單元素表單元素8-1文本框文本框語法語法文本框文本框文本框名稱文本框名稱文本框初始值文本框初始值文本框長度文本框長度文本框可輸入最大字符文本框可輸入最大字符演示演示示例示例2：文本框：文本框11/35表單元素表單元素8-2密碼框密碼框語法語法密碼框密碼框密碼框的名稱密碼框的名稱密碼框的長度密碼框的長度演示演示示例示例3：密碼框：密碼框12/35表單元素表單元素8-3單選按鈕單選按鈕語法語法男男女女單選按鈕框單選按鈕框值值單選按鈕選中狀態(tài)單選按鈕選中狀態(tài)演示演示示

6、例示例4：單選按鈕：單選按鈕13/35表單元素表單元素8-4復(fù)選框復(fù)選框語法語法運(yùn)動運(yùn)動聊天聊天玩游戲玩游戲復(fù)選框復(fù)選框值值復(fù)選框選中狀態(tài)復(fù)選框選中狀態(tài)演示演示示例示例5：復(fù)選框：復(fù)選框14/35表單元素表單元素8-5列表框列表框語法語法列表框列表框選項(xiàng)選項(xiàng)演示演示示例示例6：下拉列表框：下拉列表框默認(rèn)選中項(xiàng)默認(rèn)選中項(xiàng)15/35表單元素表單元素8-6按鈕按鈕圖片按鈕圖片按鈕語法語法重置按鈕重置按鈕普通按鈕普通按鈕演示演示示例示例7：按鈕：按鈕提交按鈕提交按鈕圖片路徑圖片路徑按鈕上顯示的文字按鈕上顯示的文字16/35表單元素表單元素8-7多行文本域多行文本域語法語法文本內(nèi)容文本內(nèi)容 多行文本域多

7、行文本域 演示演示示例示例8：文本域：文本域顯示的列數(shù)顯示的列數(shù)顯示的行數(shù)顯示的行數(shù)17/35表單元素表單元素8-8文件域文件域語法語法 文件域文件域演示演示示例示例9：文件域：文件域18/35學(xué)員操作學(xué)員操作網(wǎng)易郵箱登錄頁面網(wǎng)易郵箱登錄頁面需求說明需求說明制作網(wǎng)頁郵箱登錄頁面制作網(wǎng)頁郵箱登錄頁面完成時(shí)間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)19/35學(xué)員操作學(xué)員操作阿里巴巴用戶注冊頁面阿里巴巴用戶注冊頁面需求說明需求說明電子郵箱、登錄名、密碼最多能容納的字符數(shù)是電子郵箱、登錄名、密碼最多能容納的字符數(shù)是32個字符，驗(yàn)證碼最多能容納個字符，驗(yàn)證碼最多能容納5個字符。個字符。默認(rèn)情況下會員身份中的默認(rèn)

8、情況下會員身份中的“買家買家”處于選中狀態(tài)。處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。提交按鈕使用素材中提供的圖片代替。完成時(shí)間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)20/35學(xué)員操作學(xué)員操作人人網(wǎng)注冊頁面人人網(wǎng)注冊頁面需求說明需求說明注冊郵箱、密碼、姓名和驗(yàn)證碼最多能容納的字符數(shù)注冊郵箱、密碼、姓名和驗(yàn)證碼最多能容納的字符數(shù)分別是分別是50、16、8和和5。默認(rèn)情況下，性別中的默認(rèn)情況下，性別中的“男男”處于選中狀態(tài)。處于選中狀態(tài)。生日下拉列表中的生日下拉列表中的1991年年10月月30日處于選中狀態(tài)。日處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。提交按鈕使用素材中提供的圖片代替。完成時(shí)

9、間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)21/35共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題22/35表單的高級應(yīng)用表單的高級應(yīng)用隱藏域隱藏域只讀只讀禁用禁用只讀文本框只讀文本框禁用按鈕禁用按鈕23/35隱藏域隱藏域語法語法隱藏域隱藏域演示演示示例示例10：隱藏域：隱藏域24/35只讀和禁用只讀和禁用語法語法只讀文本框只讀文本框禁用禁用演示演示示例示例11：只讀與禁用：只讀與禁用25/35學(xué)員操作學(xué)員操作新浪微博資料修改頁面新浪微博資料修改頁面需求說明需求說明生日中各下拉列表默認(rèn)為空。生日中各下拉列表默認(rèn)為空。常用郵箱文本框中的默認(rèn)文本為常用郵箱文本

10、框中的默認(rèn)文本為“”，且文本框不可修改。，且文本框不可修改。提交按鈕使用素材中提供的圖片代替。提交按鈕使用素材中提供的圖片代替。完成時(shí)間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)26/35共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題27/35語義化的表單語義化的表單2-1什么是表單語義化什么是表單語義化語義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講,語義化就是對數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解語義化的作用語義化的作用語義化的(X)HTML文檔有助于提升你的網(wǎng)站對訪客的易用性，提供方便符合符合W3C標(biāo)準(zhǔn)標(biāo)準(zhǔn)使用語義化的標(biāo)簽使用語義

11、化的標(biāo)簽結(jié)構(gòu)合理、代碼簡潔結(jié)構(gòu)合理、代碼簡潔28/35語義化的表單語義化的表單2-2域域域標(biāo)題域標(biāo)題演示演示示例示例13：域：域 用戶信息用戶信息 姓名：姓名： 域域域標(biāo)題域標(biāo)題語法語法29/35表單元素的標(biāo)注表單元素的標(biāo)注增強(qiáng)鼠標(biāo)的可用性增強(qiáng)鼠標(biāo)的可用性自動將焦點(diǎn)轉(zhuǎn)移到與該標(biāo)注相關(guān)的表單元素上自動將焦點(diǎn)轉(zhuǎn)移到與該標(biāo)注相關(guān)的表單元素上演示演示示例示例14：標(biāo)注：標(biāo)注標(biāo)注的文本標(biāo)注的文本表單元素的表單元素的id表單元素表單元素id語法語法30/35小結(jié)小結(jié)表單語義化表單語義化語義化的目標(biāo)是為了頁面結(jié)構(gòu)更加合理語義化的目標(biāo)是為了頁面結(jié)構(gòu)更加合理在網(wǎng)頁設(shè)計(jì)和開發(fā)過程中，使用語義化的標(biāo)簽，在網(wǎng)頁設(shè)計(jì)和

12、開發(fā)過程中，使用語義化的標(biāo)簽，能夠達(dá)到見名知義的作用能夠達(dá)到見名知義的作用語義化的結(jié)構(gòu)，更加符合語義化的結(jié)構(gòu)，更加符合Web標(biāo)準(zhǔn)，更利于搜索標(biāo)準(zhǔn)，更利于搜索引擎的抓?。ㄒ娴淖ト。⊿EO的優(yōu)化）和開發(fā)維護(hù)的優(yōu)化）和開發(fā)維護(hù)31/35學(xué)員操作學(xué)員操作語義化的調(diào)研問卷語義化的調(diào)研問卷需求說明需求說明使用語義化的標(biāo)簽制作調(diào)研問卷。使用語義化的標(biāo)簽制作調(diào)研問卷。能夠?qū)崿F(xiàn)鼠標(biāo)點(diǎn)擊文本時(shí)，與文本對應(yīng)的表單元素能夠?qū)崿F(xiàn)鼠標(biāo)點(diǎn)擊文本時(shí)，與文本對應(yīng)的表單元素自動獲得焦點(diǎn)。自動獲得焦點(diǎn)。完成時(shí)間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)32/35學(xué)員操作學(xué)員操作QQ號碼申請頁面號碼申請頁面需求說明需求說明使用語義化的標(biāo)簽制

13、作使用語義化的標(biāo)簽制作QQ號碼申請頁面。號碼申請頁面。完成時(shí)間：完成時(shí)間：10分鐘分鐘練習(xí)練習(xí)33/35共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題34/35HTML5 智能智能form表單新屬性表單新屬性智能表單介紹智能表單介紹1、XHTML中需要放在form之中的諸如input/button/select/textarea等標(biāo)簽元素，在HTML5中完全可以放在頁面任何位置，然后通過新增的form屬性指向元素所屬表單的ID值，即可關(guān)聯(lián)起來。2、HTML5提供了多樣的輸入類型和風(fēng)格，讓設(shè)計(jì)界面更加豐富HTML5 智能智能form表單新屬性表單新屬

14、性HTML5 智能智能form表單新屬性表單新屬性input type=email input type=email 限制用戶輸入限制用戶輸入emailemail格式格式input type=url input type=url 限制用戶輸入網(wǎng)址格式限制用戶輸入網(wǎng)址格式input type=date input type=date 限制用戶輸入日期格式限制用戶輸入日期格式input type=time input type=time 限制用戶輸入時(shí)間格式限制用戶輸入時(shí)間格式input type=month input type=month 限制用戶輸入月份格式限制用戶輸入月份格式input t

15、ype=week input type=week 限制用戶輸入周格式限制用戶輸入周格式input type=number input type=number 限制用戶輸入數(shù)字格式限制用戶輸入數(shù)字格式input type=range input type=range 一個滑動條效果一個滑動條效果input type=search input type=search 搜索格式搜索格式 results=nresults=ninput type=color input type=color 選擇顏色格式選擇顏色格式HTML5 智能智能form表單新元素表單新元素ndatalist:元素規(guī)定輸入域的選項(xiàng)

16、列表nkeygen:元素是密鑰對生成器noutput:元素用于不同類型的輸出，比如計(jì)算或腳本輸出datalist option List屬性表示引用的是datalist標(biāo)簽里面的選項(xiàng)keygen output的使用的使用 Username: Encryption: 新增的新增的input屬性屬性屬性屬性值值說明說明Requiredrequired表單擁有該屬性表示其內(nèi)容不能為空，必填placeholder提示文本表單的提示信息，存在默認(rèn)值將不顯示Autofocusautofocus自動聚焦屬性，頁面加載完成自動聚焦到指定表單的位置，比如打開一個頁面，如果某一個表單元素上使用了此屬性，那么焦點(diǎn)會

17、自動聚集在此位置Pattern正則表達(dá)式輸入的內(nèi)容必須匹配到指定正則pattern屬性指定輸入內(nèi)容必須符合指定模式（正則表達(dá)式）。例：form屬性屬性HTML5加強(qiáng)了表單驗(yàn)證功能，可驗(yàn)證是否可加強(qiáng)了表單驗(yàn)證功能，可驗(yàn)證是否可空及輸入內(nèi)容的類型及格式，并可通過為表單空及輸入內(nèi)容的類型及格式，并可通過為表單或控件設(shè)置或控件設(shè)置 novalidate 屬性指定在提交表單屬性指定在提交表單時(shí)不驗(yàn)證整個時(shí)不驗(yàn)證整個 form 或指定的或指定的input。input 的屬性的屬性autocomplete 默認(rèn)為默認(rèn)為on其含義代表是否讓瀏覽器自動記錄之前輸其含義代表是否讓瀏覽器自動記錄之前輸入的值入的值 小結(jié)小結(jié)新的新的 屬性：屬性：autocompletenovalidate新的新的 input 屬性：屬性：autocomplete autofocusformform overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)height 和和 width listmin, max