TP03表單和智能表單的操作

表單和智能表單的操作第三章回顧與作業(yè)點(diǎn)評(píng)使用什么標(biāo)簽聲明無序列表和列表項(xiàng)？定義列表的標(biāo)簽dl、dt、dd分別表示什么意義，其作用是什么？創(chuàng)建表格的基本結(jié)構(gòu)語法是什么？提問2/35預(yù)習(xí)檢查語義化的概念是什么？常見的表單元素有哪些？制作一個(gè)下拉列表需要使用哪些標(biāo)簽？提問3/35本章任務(wù)制作語義化的表單4/35本章目標(biāo)會(huì)使用表單元素布局表單會(huì)制作語義化的表單5/35表單在網(wǎng)頁中的應(yīng)用大家在上網(wǎng)時(shí)，看到的表單在網(wǎng)頁中的應(yīng)用有哪些？問題6/35表單包含的控件單行文本輸入框(TEXT)單選按鈕(RADIO)復(fù)選框(CHECKBOX)下拉列表(SELECT)重置按鈕(RESET)提交按鈕(SUBMIT)多行文本框(TEXTAREA)密碼框(PASSWORD)什么是表單官方解釋：表單：可以收集用戶的信息和反饋意見，是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。8/35表單語法語法<formmethod="post"action="result.html"><p>名字：<inputname="name"type="text"></p><p>密碼：<inputname="pass"type="password"></p><p><inputtype="submit"name="Button"value="提交"><inputtype="reset"name="Reset"value="重填"></p></form>規(guī)定如何發(fā)送表單數(shù)據(jù)常用值：get|post表示向何處發(fā)送表單數(shù)據(jù)演示示例1：表單的基本結(jié)構(gòu)在實(shí)際網(wǎng)頁開發(fā)中通常采用post方式提交表單數(shù)據(jù)經(jīng)驗(yàn)9/35表單元素格式語法<inputtype="text"name="fname"value="text">Input元素類型Input元素名稱Input元素的值屬性說明type指定元素的類型。text、password、checkbox、radio、submit、reset、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í)，指定按鈕是否是被選中10/35表單元素8-1文本框語法<inputtype="text"name="userName"value="用戶名"size="30"maxlength="20">文本框文本框名稱文本框初始值文本框長(zhǎng)度文本框可輸入最大字符演示示例2：文本框11/35表單元素8-2密碼框語法<inputtype="password"name="pass"

size="20">密碼框密碼框的名稱密碼框的長(zhǎng)度演示示例3：密碼框12/35表單元素8-3單選按鈕語法<inputname="gen"type="radio"value="男"checked="checked">男<inputname="gen"type="radio"value="女">女單選按鈕框值單選按鈕選中狀態(tài)演示示例4：?jiǎn)芜x按鈕13/35表單元素8-4復(fù)選框語法<inputtype="checkbox"name="interest"value="sports">運(yùn)動(dòng)<inputtype="checkbox"name="interest"value="talk"checked="checked">聊天<inputtype="checkbox"name="interest"value="play">玩游戲復(fù)選框值復(fù)選框選中狀態(tài)演示示例5：復(fù)選框14/35表單元素8-5列表框語法<selectname="列表名稱"size="行數(shù)"><optionvalue="選項(xiàng)的值"selected="selected">…</option><optionvalue="選項(xiàng)的值">…</option></select>列表框選項(xiàng)演示示例6：下拉列表框默認(rèn)選中項(xiàng)15/35表單元素8-6按鈕圖片按鈕語法<inputtype="reset"name="butReset"value="reset按鈕"><inputtype="submit"name="butSubmit"value="submit按鈕"><inputtype="button"name="butButton"value="button按鈕"/>重置按鈕普通按鈕演示示例7：按鈕提交按鈕圖片路徑<inputtype="image"src="images/login.gif"/>按鈕上顯示的文字16/35表單元素8-7多行文本域語法<textareaname="showText"cols="x"rows="y">文本內(nèi)容</textarea>多行文本域演示示例8：文本域顯示的列數(shù)顯示的行數(shù)17/35表單元素8-8文件域語法<formaction=""method="post"><p><inputtype="file"name="files"/><inputtype="submit"name="upload"value="上傳"/></p></form>文件域演示示例9：文件域18/35學(xué)員操作—網(wǎng)易郵箱登錄頁面需求說明制作網(wǎng)頁郵箱登錄頁面完成時(shí)間：10分鐘練習(xí)19/35學(xué)員操作—阿里巴巴用戶注冊(cè)頁面需求說明電子郵箱、登錄名、密碼最多能容納的字符數(shù)是32個(gè)字符，驗(yàn)證碼最多能容納5個(gè)字符。默認(rèn)情況下會(huì)員身份中的“買家”處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。完成時(shí)間：10分鐘練習(xí)20/35學(xué)員操作—人人網(wǎng)注冊(cè)頁面需求說明注冊(cè)郵箱、密碼、姓名和驗(yàn)證碼最多能容納的字符數(shù)分別是50、16、8和5。默認(rèn)情況下，性別中的“男”處于選中狀態(tài)。生日下拉列表中的1991年10月30日處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。完成時(shí)間：10分鐘練習(xí)21/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解22/35表單的高級(jí)應(yīng)用隱藏域只讀禁用只讀文本框禁用按鈕23/35隱藏域語法<inputtype="hidden"value="666"name="userid">隱藏域演示示例10：隱藏域24/35只讀和禁用語法<inputname="name"type="text"value="張三"readonly="readonly"><inputtype="submit"

disabled="disabled"value="保存">只讀文本框禁用演示示例11：只讀與禁用25/35學(xué)員操作—新浪微博資料修改頁面需求說明生日中各下拉列表默認(rèn)為空。常用郵箱文本框中的默認(rèn)文本為“student@”，且文本框不可修改。提交按鈕使用素材中提供的圖片代替。完成時(shí)間：10分鐘練習(xí)26/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解27/35語義化的表單2-1什么是表單語義化語義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講,語義化就是對(duì)數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解語義化的作用語義化的(X)HTML文檔有助于提升你的網(wǎng)站對(duì)訪客的易用性，提供方便符合W3C標(biāo)準(zhǔn)使用語義化的標(biāo)簽結(jié)構(gòu)合理、代碼簡(jiǎn)潔28/35語義化的表單2-2域域標(biāo)題演示示例13：域<formaction=""method="post">

<fieldset>

<legend>用戶信息</legend>

姓名：<inputtype="text"/> ……</fieldset></form>域域標(biāo)題語法29/35表單元素的標(biāo)注增強(qiáng)鼠標(biāo)的可用性自動(dòng)將焦點(diǎn)轉(zhuǎn)移到與該標(biāo)注相關(guān)的表單元素上演示示例14：標(biāo)注<labelfor="id">標(biāo)注的文本</label><inputtype="radio"name="gender"id="male"/>表單元素的id表單元素id語法30/35小結(jié)表單語義化語義化的目標(biāo)是為了頁面結(jié)構(gòu)更加合理在網(wǎng)頁設(shè)計(jì)和開發(fā)過程中，使用語義化的標(biāo)簽，能夠達(dá)到見名知義的作用語義化的結(jié)構(gòu)，更加符合Web標(biāo)準(zhǔn)，更利于搜索引擎的抓取（SEO的優(yōu)化）和開發(fā)維護(hù)31/35學(xué)員操作—語義化的調(diào)研問卷需求說明使用語義化的標(biāo)簽制作調(diào)研問卷。能夠?qū)崿F(xiàn)鼠標(biāo)點(diǎn)擊文本時(shí)，與文本對(duì)應(yīng)的表單元素自動(dòng)獲得焦點(diǎn)。完成時(shí)間：10分鐘練習(xí)32/35學(xué)員操作—QQ號(hào)碼申請(qǐng)頁面需求說明使用語義化的標(biāo)簽制作QQ號(hào)碼申請(qǐng)頁面。完成時(shí)間：10分鐘練習(xí)33/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解34/35HTML5智能form表單新屬性智能表單介紹1、XHTML中需要放在form之中的諸如input/button/select/textarea等標(biāo)簽元素，在HTML5中完全可以放在頁面任何位置，然后通過新增的form屬性指向元素所屬表單的ID值，即可關(guān)聯(lián)起來。<FORMid=foo>…</FORM><INPUT…

form="foo">2、HTML5提供了多樣的輸入類型和風(fēng)格，讓設(shè)計(jì)界面更加豐富HTML5智能form表單新屬性HTML5智能form表單新屬性<inputtype=email…限制用戶輸入email格式<inputtype=url…限制用戶輸入網(wǎng)址格式<inputtype=date…限制用戶輸入日期格式<inputtype=time…限制用戶輸入時(shí)間格式<inputtype=month…限制用戶輸入月份格式<inputtype=week…限制用戶輸入周格式<inputtype=number…限制用戶輸入數(shù)字格式<inputtype=range…一個(gè)滑動(dòng)條效果<inputtype=search…搜索格式results="n"<inputtype=color…選擇顏色格式HTML5智能form表單新元素datalist:元素規(guī)定輸入域的選項(xiàng)列表keygen:元素是密鑰對(duì)生成器output:元素用于不同類型的輸出，比如計(jì)算或腳本輸出<inputid=“movielist"list="mydata"/><datalistid="mydata">

<optionlabel="Top1"value="讓子彈飛"><optionlabel="Top2"value="非誠勿擾2"><optionlabel="Top3"value="大笑江湖"><optionlabel="Top4"value="趙氏孤兒"><optionlabel="Top5"value=“PHP100"></datalist>List屬性表示引用的是datalist標(biāo)簽里面的選項(xiàng)keygen\output的使用<formaction=“”method="get">

Username:<inputtype="text"name="usr_name"/>

Encryption:<keygenname="security"/>

<inputtype="submit"/></form><formoninput="res.value=no1.value*no2.value“> <inputtype="text"name="no1"> <inputtype="text"name="no2"> <outputname="res"></output></form>新增的input屬性屬性值說明Requiredrequired表單擁有該屬性表示其內(nèi)容不能為空，必填placeholder提示文本表單的提示信息，存在默認(rèn)值將不顯示Autofocusautofocus自動(dòng)聚焦屬性，頁面加載完成自動(dòng)聚焦到指定表單的位置，比如打開一個(gè)頁面，如果某一個(gè)表單元素上使用了此屬性，那么焦點(diǎn)會(huì)自動(dòng)聚集在此位置Pattern正則表達(dá)式輸入的內(nèi)容必須匹配到指定正則pattern

屬性指定輸入內(nèi)容必須符合指定模式（正則表達(dá)式）。例：<inputid="phone_num"name="phone_num"type=“tel"pattern="\d{3}-\d{4}-\d{4}"placeholder="xxx-xxxx-xxxx"/>form屬性HTML5加強(qiáng)了表單驗(yàn)證功能，可驗(yàn)證是否可空及輸入內(nèi)容的類型及格式，并可通過為表單或控件設(shè)置novalidate

屬性指定在提交表單時(shí)不驗(yàn)證整個(gè)form或指定的input。input的屬性autocomplete

默認(rèn)為on

其含義代表是否讓瀏覽器自動(dòng)記錄