TP03表單和智能表單的操作

表單和智能表單的操作第三章回顧與作業(yè)點評使用什么標(biāo)簽聲明無序列表和列表項？定義列表的標(biāo)簽dl、dt、dd分別表示什么意義，其作用是什么？創(chuàng)建表格的基本結(jié)構(gòu)語法是什么？提問2/35預(yù)習(xí)檢查語義化的概念是什么？常見的表單元素有哪些？制作一個下拉列表需要使用哪些標(biāo)簽？提問3/35本章任務(wù)制作語義化的表單4/35本章目標(biāo)會使用表單元素布局表單會制作語義化的表單5/35表單在網(wǎng)頁中的應(yīng)用大家在上網(wǎng)時，看到的表單在網(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)在實際網(wǎng)頁開發(fā)中通常采用post方式提交表單數(shù)據(jù)經(jīng)驗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時必須指定一個值size指定表單元素的初始寬度。當(dāng)

type為text或

password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位maxlengthtype為text或password時，輸入的最大字符數(shù)checkedtype為radio或checkbox時，指定按鈕是否是被選中10/35表單元素8-1文本框語法<inputtype="text"name="userName"value="用戶名"size="30"maxlength="20">文本框文本框名稱文本框初始值文本框長度文本框可輸入最大字符演示示例2：文本框11/35表單元素8-2密碼框語法<inputtype="password"name="pass"

size="20">密碼框密碼框的名稱密碼框的長度演示示例3：密碼框12/35表單元素8-3單選按鈕語法<inputname="gen"type="radio"value="男"checked="checked">男<inputname="gen"type="radio"value="女">女單選按鈕框值單選按鈕選中狀態(tài)演示示例4：單選按鈕13/35表單元素8-4復(fù)選框語法<inputtype="checkbox"name="interest"value="sports">運動<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="選項的值"selected="selected">…</option><optionvalue="選項的值">…</option></select>列表框選項演示示例6：下拉列表框默認(rèn)選中項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)頁郵箱登錄頁面完成時間：10分鐘練習(xí)19/35學(xué)員操作—阿里巴巴用戶注冊頁面需求說明電子郵箱、登錄名、密碼最多能容納的字符數(shù)是32個字符，驗證碼最多能容納5個字符。默認(rèn)情況下會員身份中的“買家”處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。完成時間：10分鐘練習(xí)20/35學(xué)員操作—人人網(wǎng)注冊頁面需求說明注冊郵箱、密碼、姓名和驗證碼最多能容納的字符數(shù)分別是50、16、8和5。默認(rèn)情況下，性別中的“男”處于選中狀態(tài)。生日下拉列表中的1991年10月30日處于選中狀態(tài)。提交按鈕使用素材中提供的圖片代替。完成時間：10分鐘練習(xí)21/35共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解22/35表單的高級應(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@”，且文本框不可修改。提交按鈕使用素材中提供的圖片代替。完成時間：10分鐘練習(xí)26/35共性問題集中講解常見問題及解決辦法代碼規(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)簽結(jié)構(gòu)合理、代碼簡潔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)的可用性自動將焦點轉(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è)計和開發(fā)過程中，使用語義化的標(biāo)簽，能夠達(dá)到見名知義的作用語義化的結(jié)構(gòu)，更加符合Web標(biāo)準(zhǔn)，更利于搜索引擎的抓?。⊿EO的優(yōu)化）和開發(fā)維護(hù)31/35學(xué)員操作—語義化的調(diào)研問卷需求說明使用語義化的標(biāo)簽制作調(diào)研問卷。能夠?qū)崿F(xiàn)鼠標(biāo)點擊文本時，與文本對應(yīng)的表單元素自動獲得焦點。完成時間：10分鐘練習(xí)32/35學(xué)員操作—QQ號碼申請頁面需求說明使用語義化的標(biāo)簽制作QQ號碼申請頁面。完成時間：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è)計界面更加豐富HTML5智能form表單新屬性HTML5智能form表單新屬性<inputtype=email…限制用戶輸入email格式<inputtype=url…限制用戶輸入網(wǎng)址格式<inputtype=date…限制用戶輸入日期格式<inputtype=time…限制用戶輸入時間格式<inputtype=month…限制用戶輸入月份格式<inputtype=week…限制用戶輸入周格式<inputtype=number…限制用戶輸入數(shù)字格式<inputtype=range…一個滑動條效果<inputtype=search…搜索格式results="n"<inputtype=color…選擇顏色格式HTML5智能form表單新元素datalist:元素規(guī)定輸入域的選項列表keygen:元素是密鑰對生成器output:元素用于不同類型的輸出，比如計算或腳本輸出<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)簽里面的選項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自動聚焦屬性，頁面加載完成自動聚焦到指定表單的位置，比如打開一個頁面，如果某一個表單元素上使用了此屬性，那么焦點會自動聚集在此位置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)了表單驗證功能，可驗證是否可空及輸入內(nèi)容的類型及格式，并可通過為表單或控件設(shè)置novalidate

屬性指定在提交表單時不驗證整個form或指定的input。input的屬性autocomplete

默認(rèn)為on

其含義代表是否讓瀏覽器自動記錄