第三章表單和框架回顧使用HTML創建一個表格至少需要哪些標簽？跨多行表格是在單元格里用哪個屬性進行設置？對表格進行美化，主要用哪些屬性進行設置？預習檢查請列舉表單中有哪些常用的表單元素？創建一個框架頁面至少需要哪幾個標簽？本章任務制作“注冊”頁面制作“客戶中心”頁面本章目標會使用表單的基本結構制作表單頁面會使用各種表單元素實現注冊頁面能理解post和get兩種提交方式的區別會使用框架結構實現多窗口展示頁面表單表單的典型應用注冊用戶收集信息反饋信息為網站提供搜索工具注冊用戶收集信息反饋信息提供搜索工具表單包含的表單元素單行文本輸入框(TEXT)單選按鈕(RADIO)復選框(CHECKBOX)下拉列表(SELECT)重置按鈕(RESET)提交按鈕(SUBMIT)多行文本框(TEXTAREA)密碼框(PASSWORD)表單頁面的基本結構METHOD="post或get"ACTIONMETHOD指定提交后，由服務器上哪個處理程序處理指定向服務器提交的方法:一般為post或get方法,post方法比較安全ACTION="URL"<FORMaction=""method="post"> ……</FORM>演示示例1：使用post提交方式和get提交方式表單的基本語法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表單提交地址和方法的設置表單的典型應用：假定登錄126郵箱表單的執行原理Internet12客戶端：請求登錄，通過表單填寫賬戶信息服務器端：驗證發來的賬號信息，然后給出反饋客戶端和服務器類似兩人溝通一樣，從而建立交互活動<inputname="表單元素名稱"type="類型"value="值"size="顯示寬度"maxlength=“最大長度"checked="是否選中"/>指定元素的類型，可為text、radio、submit等控件的名稱控件的初始值控件的初始寬度控件中輸入的最多字符個數控件是否被選中checked表單元素的基本格式文本框<formmethod="post"action=""><p>用戶名：<inputname="userName"type="text"size="21"/></p>……</form>表單元素的逐一介紹8-1單行文本輸入框，字符寬度為21name用于服務器端獲取數據，例如：request.getParameter("userName

")<input

name="名稱"

type="text"value="初值"

size="數字">

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

碼：

<input

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

name="名稱"

type="password"

value="初值"

size="數字">

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

name="名稱"

type="按鈕類型"

value="按鈕文字"

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

單選按鈕

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

>……表單元素的逐一介紹8-4特點：單選名字name相同表明屬于同一組<inputname=“組名"

type="radio"value=

"…"checked="…"

>

復選框

……愛好：

<inputtype="checkbox"name="hobby1"value="sports"/>運動

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

checked="checked"/>聊天

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

checked=

"…"

>練習——貴美登錄頁需求說明：完成網站登錄頁面完成時間：20分鐘1、提交地址：login.aspx2、提交方法：post

文件域

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

>小結前面所學的各類表單元素，語法分別是什么？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="書"/>書<inputtype="checkbox"name="hobby"value="畫"/>畫reset重置表單數據<inputtype="reset"value="重置"/>file文件上傳<inputtype="file"name="files"/>submit提交表單數據<inputtype="submit"value="提交"/>image圖形提交按鈕<inputtype="image"src="images/button.gif"/>button普通按鈕<inputtype="button"value="播放音樂"/>

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

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

name="指定列表名稱"

size="行數">

<option

value="選項值"

selected="selected">…</option>

…

…</select>

多行文本框

......<h2><imgsrc="images/read.gif"alt="閱讀協議"title="閱讀協議"/>閱讀貴美網服務協議</h2><p><textareaname="textarea"cols="40"rows="6">

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

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

......<inputtype="hidden"name="userid"value="666"/>……表單的高級用法2-1隱藏的客戶代號信息：666，但客戶端頁面不顯示隱藏域：既方便服務器端“記住”客戶端的數據，又避免因顯示瀏覽者不關心的數據導致用戶反感<input

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

如何實現表單布局3-1如何實現頁面中登錄表單的布局？問題：結構簡單，但不美觀如何實現表單布局3-2實際頁面中的登錄表單布局實際應用，需要幾行幾列的表格布局？如何實現表單布局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>會員名:</td><td><inputname=“sname”…（可包含….）</td>…代碼同“會員名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整體布局：4行3列的表格圖片后的內容跨2列，內容用“空格”填充圖片按鈕跨2列小結1編寫如左圖所示效果對應的html代碼在網頁設計中，表單的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX練習答案練習代碼框架廣告欄頂部框架(top.htm)導航欄左側框架(left.htm)詳細內容頁面右側框架(main.htm)框架的邊框框架集頁面(FrameSet.htm)框架使用場合頁面的一個固定部分顯示徽標或靜態信息在另一個固定部分顯示導航部分詳細內容在此處顯示詳細內容，頁面中此部分是變化的。<framesetcols="25%,50%,*"rows="50%,*"border="5">

<framesrc="the_first.html"> ……</frameset>框架的基本結構框架頁面的基本語法邊框尺寸大小將窗口分割成左中右3個部分,可選將窗口分割成上下2個部分,可選第一個窗口要顯示的網頁框架的基本結構<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部分如果要在瀏覽器中創建左中右三個窗口,該如何實現？查看源代碼每個窗口對應一個頁面，以及一個框架集頁面，總共需要幾個HTML頁面文件？窗口邊框的寬度如何創建多個復雜的窗口

要實現如下圖所示的窗口，該如何制作？1、分成上下兩個窗口2、把下面的窗口分成左右兩個窗口top窗口left窗口right窗口如何創建多個復雜的窗口

創建多個復雜的窗口實現步驟如下：1、創建一個HTML頁面“top.html”2、創建一個HTML頁面“left.html”3、創建一個HTML頁面“right.html”top.html效果圖left.html效果圖right.html效果如何創建多個復雜的窗口4、新建多框架HTML頁面"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>查看源代碼設置無框架邊框不顯示滾動條禁止調整框架大小框架名稱，便于超文本鏈接錨標簽target屬性所引用如何設置窗口鏈接的顯示位置

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

<ahref=urltarget="窗口名"> target屬性指定了所鏈接的文件出現在名稱為“窗口名”的框架窗口里。<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屬性指定了所鏈接的文件出現在名稱為“rightframe”的框架窗口里演示示例3：使用target="窗口名"如何設置窗口鏈接的顯示位置tar