html網(wǎng)頁(yè)制作chapter3表單和框架

第三章表單和框架回顧使用HTML創(chuàng)建一個(gè)表格至少需要哪些標(biāo)簽？跨多行表格是在單元格里用哪個(gè)屬性進(jìn)行設(shè)置？對(duì)表格進(jìn)行美化，主要用哪些屬性進(jìn)行設(shè)置？預(yù)習(xí)檢查請(qǐng)列舉表單中有哪些常用的表單元素？創(chuàng)建一個(gè)框架頁(yè)面至少需要哪幾個(gè)標(biāo)簽？本章任務(wù)制作“注冊(cè)”頁(yè)面制作“客戶中心”頁(yè)面本章目標(biāo)會(huì)使用表單的基本結(jié)構(gòu)制作表單頁(yè)面會(huì)使用各種表單元素實(shí)現(xiàn)注冊(cè)頁(yè)面能理解post和get兩種提交方式的區(qū)別會(huì)使用框架結(jié)構(gòu)實(shí)現(xiàn)多窗口展示頁(yè)面表單表單的典型應(yīng)用注冊(cè)用戶收集信息反饋信息為網(wǎng)站提供搜索工具注冊(cè)用戶收集信息反饋信息提供搜索工具表單包含的表單元素單行文本輸入框(TEXT)單選按鈕(RADIO)復(fù)選框(CHECKBOX)下拉列表(SELECT)重置按鈕(RESET)提交按鈕(SUBMIT)多行文本框(TEXTAREA)密碼框(PASSWORD)表單頁(yè)面的基本結(jié)構(gòu)METHOD="post或get"ACTIONMETHOD指定提交后，由服務(wù)器上哪個(gè)處理程序處理指定向服務(wù)器提交的方法:一般為post或get方法,post方法比較安全ACTION="URL"<FORMaction=""method="post"> ……</FORM>演示示例1：使用post提交方式和get提交方式表單的基本語(yǔ)法2-2……<formaction="login.aspx"method="post"><p>用戶名：<inputname="username"type="text"size="20"maxlength="10"/></p><p>密

碼：<inputname="pwd"type="password"size="20"/></p><p><inputtype="submit"name="btn"value="提交"/>  <inputname="reset"type="reset"value="重填"/></p></form>……表單輸入元素：input表單提交地址和方法的設(shè)置表單的典型應(yīng)用：假定登錄126郵箱表單的執(zhí)行原理Internet12客戶端：請(qǐng)求登錄，通過(guò)表單填寫(xiě)賬戶信息服務(wù)器端：驗(yàn)證發(fā)來(lái)的賬號(hào)信息，然后給出反饋客戶端和服務(wù)器類(lèi)似兩人溝通一樣，從而建立交互活動(dòng)<inputname="表單元素名稱"type="類(lèi)型"value="值"size="顯示寬度"maxlength=“最大長(zhǎng)度"checked="是否選中"/>指定元素的類(lèi)型，可為text、radio、submit等控件的名稱控件的初始值控件的初始寬度控件中輸入的最多字符個(gè)數(shù)控件是否被選中checked表單元素的基本格式文本框<formmethod="post"action=""><p>用戶名：<inputname="userName"type="text"size="21"/></p>……</form>表單元素的逐一介紹8-1單行文本輸入框，字符寬度為21name用于服務(wù)器端獲取數(shù)據(jù)，例如：request.getParameter("userName

")<input

name="名稱"

type="text"value="初值"

size="數(shù)字">

密碼框<formmethod="post"action=""><p>密

碼：

<input

name="pass"type="password"size="22"/></p>……</form>表單元素的逐一介紹8-2隱藏輸入的信息<input

name="名稱"

type="password"

value="初值"

size="數(shù)字">

按鈕......<inputtype="reset"name="reset"value="重填"/><inputtype="submit"name="button"value="同意……"/><inputtype="button"name="confirm"value="點(diǎn)播音樂(lè)"/><inputtype="button"name="cancel"value="取消"/><inputtype="image"src="images/login.gif"/>……表單元素的逐一介紹8-3<input

name="名稱"

type="按鈕類(lèi)型"

value="按鈕文字"

src="圖片按鈕的圖片url">普通按鈕：button提交按鈕：submit重置（清空）按鈕：reset圖片按鈕：image

單選按鈕

......<br/>性別：<inputname="gen"type="radio"value="男"checked="checked"><inputname="gen"type="radio"value="女"

>……表單元素的逐一介紹8-4特點(diǎn)：?jiǎn)芜x名字name相同表明屬于同一組<inputname=“組名"

type="radio"value=

"…"checked="…"

>

復(fù)選框

……愛(ài)好：

<inputtype="checkbox"name="hobby1"value="sports"/>運(yùn)動(dòng)

<inputtype="checkbox"name="hobby2"value="talk"

checked="checked"/>聊天

<inputtype="checkbox"name="hobby3"value="play"/>玩游戲……表單元素的逐一介紹8-5特點(diǎn)：多選<inputtype="checkbox"name="…"value="…"

checked=

"…"

>練習(xí)——貴美登錄頁(yè)需求說(shuō)明：完成網(wǎng)站登錄頁(yè)面完成時(shí)間：20分鐘1、提交地址：login.aspx2、提交方法：post

文件域

......<p><inputtype="file"name="files"/><br/><inputtype="submit"name="upload"value="上傳"/></p>……表單元素的逐一介紹8-6顯示上傳文件的地址<inputtype="file"name="…"

>小結(jié)前面所學(xué)的各類(lèi)表單元素，語(yǔ)法分別是什么？type功能例子text單行文本輸入<inputtype="text"name="username"/>password密碼<inputtype="password"name="password"/>radio單選<inputtype="radio"name="sex"value="男"/>男<inputtype="radio"name="sex"value="女"/>女checkbox多選<inputtype="checkbox"name="hobby"value="書(shū)"/>書(shū)<inputtype="checkbox"name="hobby"value="畫(huà)"/>畫(huà)reset重置表單數(shù)據(jù)<inputtype="reset"value="重置"/>file文件上傳<inputtype="file"name="files"/>submit提交表單數(shù)據(jù)<inputtype="submit"value="提交"/>image圖形提交按鈕<inputtype="image"src="images/button.gif"/>button普通按鈕<inputtype="button"value="播放音樂(lè)"/>

列表框......<selectname="bmon"><optionvalue=""selected="selected">[選擇月份]</option><optionvalue="0">一月</option><optionvalue="1">二月</option><optionvalue="2">三月</option><optionvalue="3">四月</option></select>

……表單元素的逐一介紹8-7提供固定選項(xiàng)，避免用戶輸入錯(cuò)誤<select

name="指定列表名稱"

size="行數(shù)">

<option

value="選項(xiàng)值"

selected="selected">…</option>

…

…</select>

多行文本框

......<h2><imgsrc="images/read.gif"alt="閱讀協(xié)議"title="閱讀協(xié)議"/>閱讀貴美網(wǎng)服務(wù)協(xié)議</h2><p><textareaname="textarea"cols="40"rows="6">

歡迎閱讀服務(wù)條款協(xié)議...</textarea></p>……表單元素的逐一介紹8-8<textareaname="..."cols="列寬"rows="行寬">文本內(nèi)容</textarea>

隱藏域方便服務(wù)器端“記住”客戶端的信息、但又不希望客戶看到的數(shù)據(jù)

......<inputtype="hidden"name="userid"value="666"/>……表單的高級(jí)用法2-1隱藏的客戶代號(hào)信息：666，但客戶端頁(yè)面不顯示隱藏域：既方便服務(wù)器端“記住”客戶端的數(shù)據(jù)，又避免因顯示瀏覽者不關(guān)心的數(shù)據(jù)導(dǎo)致用戶反感<input

type="hidden"name="…."value="…"/>只讀和禁用屬性readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶看，不能修改disabled：因沒(méi)達(dá)到使用的條件，限制用戶使用<textareaname="content"cols="60"rows="8"readonly="readonly">歡迎閱讀服務(wù)條款協(xié)議，貴美的權(quán)利和義務(wù)......</textarea><br/><br/>同意以上協(xié)議<inputname="agree"type="checkbox"/><inputname="btn"type="submit"value="注冊(cè)"disabled="disabled"/></p>……表單的高級(jí)用法2-21、用戶不能修改協(xié)議2、勾選“同意以上協(xié)議”，才允許點(diǎn)擊“注冊(cè)”按鈕練習(xí)——簡(jiǎn)易求職表需求說(shuō)明：使用表單制作簡(jiǎn)易求職表“協(xié)議”只讀，“提交”按鈕禁用用隱藏域提交求職者姓名“zhangsan”

如何實(shí)現(xiàn)表單布局3-1如何實(shí)現(xiàn)頁(yè)面中登錄表單的布局？問(wèn)題：結(jié)構(gòu)簡(jiǎn)單，但不美觀如何實(shí)現(xiàn)表單布局3-2實(shí)際頁(yè)面中的登錄表單布局實(shí)際應(yīng)用，需要幾行幾列的表格布局？如何實(shí)現(xiàn)表單布局3-3<formmethod="post"action="login_success.htm"><table><tr><td><imgsrc="images/title_login_2.png"alt="alt"/></td><tdcolspan="2"> </td></tr><tr><td></td><td>會(huì)員名:</td><td><inputname=“sname”…（可包含….）</td>…代碼同“會(huì)員名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整體布局：4行3列的表格圖片后的內(nèi)容跨2列，內(nèi)容用“空格”填充圖片按鈕跨2列小結(jié)1編寫(xiě)如左圖所示效果對(duì)應(yīng)的html代碼在網(wǎng)頁(yè)設(shè)計(jì)中，表單的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX練習(xí)答案練習(xí)代碼框架廣告欄頂部框架(top.htm)導(dǎo)航欄左側(cè)框架(left.htm)詳細(xì)內(nèi)容頁(yè)面右側(cè)框架(main.htm)框架的邊框框架集頁(yè)面(FrameSet.htm)框架使用場(chǎng)合頁(yè)面的一個(gè)固定部分顯示徽標(biāo)或靜態(tài)信息在另一個(gè)固定部分顯示導(dǎo)航部分詳細(xì)內(nèi)容在此處顯示詳細(xì)內(nèi)容，頁(yè)面中此部分是變化的。<framesetcols="25%,50%,*"rows="50%,*"border="5">

<framesrc="the_first.html"> ……</frameset>框架的基本結(jié)構(gòu)框架頁(yè)面的基本語(yǔ)法邊框尺寸大小將窗口分割成左中右3個(gè)部分,可選將窗口分割成上下2個(gè)部分,可選第一個(gè)窗口要顯示的網(wǎng)頁(yè)框架的基本結(jié)構(gòu)<HTML><HEAD><TITLE>rows_cols框架</TITLE></HEAD><FRAMESETrows="25%,50%,*"border="5"><FRAMEname="top"src="the_first.html"><FRAMEname="middle"src="the_second.html">

<FRAMEname="bottom"src="the_third.html"></FRAMESET></HTML>將窗口分割成上中下3部分如果要在瀏覽器中創(chuàng)建左中右三個(gè)窗口,該如何實(shí)現(xiàn)？查看源代碼每個(gè)窗口對(duì)應(yīng)一個(gè)頁(yè)面，以及一個(gè)框架集頁(yè)面，總共需要幾個(gè)HTML頁(yè)面文件？窗口邊框的寬度如何創(chuàng)建多個(gè)復(fù)雜的窗口

要實(shí)現(xiàn)如下圖所示的窗口，該如何制作？1、分成上下兩個(gè)窗口2、把下面的窗口分成左右兩個(gè)窗口top窗口left窗口right窗口如何創(chuàng)建多個(gè)復(fù)雜的窗口

創(chuàng)建多個(gè)復(fù)雜的窗口實(shí)現(xiàn)步驟如下：1、創(chuàng)建一個(gè)HTML頁(yè)面“top.html”2、創(chuàng)建一個(gè)HTML頁(yè)面“l(fā)eft.html”3、創(chuàng)建一個(gè)HTML頁(yè)面“right.html”top.html效果圖left.html效果圖right.html效果如何創(chuàng)建多個(gè)復(fù)雜的窗口4、新建多框架HTML頁(yè)面"Frame_Sets.html"......<FRAMESETrows="20%,*"frameborder="0"><FRAMEsrc="top.html"name="topframe“scrolling="no"noresize="noresize"><FRAMESETcols="20%,*"><FRAMEsrc="left.html"noresize="noresize"scrolling="no"name="leftframe"><FRAMEsrc="right.html"name="rightframe"></FRAMESET></FRAMESET>查看源代碼設(shè)置無(wú)框架邊框不顯示滾動(dòng)條禁止調(diào)整框架大小框架名稱，便于超文本鏈接錨標(biāo)簽target屬性所引用如何設(shè)置窗口鏈接的顯示位置

如果在同一個(gè)頁(yè)面中，要實(shí)現(xiàn)在一個(gè)框架窗口中的超鏈接頁(yè)面出現(xiàn)在另一個(gè)框架窗口中，如何實(shí)現(xiàn)？演示示例2：不同框架之間超鏈接效果使用target目標(biāo)窗口屬性如何設(shè)置窗口鏈接的顯示位置target目標(biāo)窗口屬性name＝"顯示的窗口名" <framesrc=urlname="窗口名">

<ahref=urltarget="窗口名"> target屬性指定了所鏈接的文件出現(xiàn)在名稱為“窗口名”的框架窗口里。<P><ahref="right.html"target="rightframe"><IMGsrc="images/reg.jpg"width="158"height="31"border="0"/></P></A><P><ahref="buy.html"target="rightframe"><IMGsrc="images/buy.jpg"width="160"height="32"border="0"/></P></A>target屬性指定了所鏈接的文件出現(xiàn)在名稱為“rightframe”的框架窗口里演示示例3：使用target="窗口名"如何設(shè)置窗口鏈接的顯示位置tar