第5講框架及表單標記_第1頁
第5講框架及表單標記_第2頁
第5講框架及表單標記_第3頁
第5講框架及表單標記_第4頁
第5講框架及表單標記_第5頁
已閱讀5頁，還剩70頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第5講框架結構及表單標記5.1框架結構5.2表單標記學習目標理解框架的作用掌握框架標記的使用理解不支持框架標記的應用掌握浮動框架的使用掌握使用框架作為超鏈接目標的設置理解有關表單的相關概念掌握各種表單標記的使用框架的作用，就是把瀏覽器窗口劃分成若干個區域，每個區域可以分別顯示不同的網頁。注意：使用框架結構時，HTML文檔中不能出現<body>標記對，此時<body>需要由<frameset>代替5.1框架結構框架集標記<frameset>：主要是定義瀏覽器窗口的分割方式、各分割窗口（框架）的大小以及格式化框架邊框框架標記<frame>：定義各分割窗口中顯示的內容，并能對各分割窗口進行格式化1）框架結構組成標記2）框架集標記<frameset>屬性屬性值描述bordercolor…以RGB顏色值或顏色英文名設置所有框架邊框顏色frameborder0/no所有框架都不顯示邊框1/yes所有框架都顯示邊框，默認為1framespacingn設置框架之間的間距rowsn1,n2…使窗口按行的方式分割(上下分割)colsn1,n2…使窗口按列的方式分割(左右分割)表5-1<frameset>常用屬性框架分割窗口方式左右（水平）分割上下（垂直）分割嵌套分割：瀏覽器窗口既存在左右分割，又存在上下分割

左右分割基本語法

<framesetcols=“value,value,……”><frame><frame>…….</frameset>語法解釋

cols屬性決定了窗口的分割方式為左右分割；“value”定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數決定了<frame>標記的個數，即窗口的個數<framesetcols="20%,*"><frame><frame></frameset>左右分割示例上下分割基本語法

<framesetrows=“value,value,……”><frame><frame>…….</frameset>語法解釋

rows屬性決定了窗口的分割方式為上下分割；“value”定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數決定了<frame>標記的個數，即窗口的個數<framesetrows="20%,*"><frame><frame></frameset>上下分割示例嵌套分割基本語法

<framesetcols|rows=“value,value,……”><frame>

<framesetrows|cols=“value,value,…”><frame><frame>……</frameset><frame>…….</frameset><framesetcols="20%,55%,*">

<framesetrows="100,*"><frame><frame></frameset><frame><frame></frameset>嵌套分割示例<frameset>對框架邊框的格式化<frameset>標記對框架邊框的格式化通過設置”frameborder”、”framespacing”和”bordercolor”等屬性來實現3)框架標記<frame>基本語法

<framesetcols=“value,value,……”>

<framesrc=“url”name=“frame_name”><framesrc=“url”name=“frame_name”>

…….</frameset>語法解釋

src屬性用于設置在框架窗口中顯示的內容來自的文件；name屬性用于標記框架名稱，以便于其他對象對它的引用，如作為鏈接的一個目標窗口

<framesetcols="20%,*"><framesrc=“frame_menu.html”name=“left”><framesrc=“p.htm”name=“right”></frameset><frame>標記基本設置示例frame屬性屬性值描述srcURL設置在框架中顯示的文件的路徑name…設置Frame名稱，以便于其它對象對它的引用frameBorder0/no不顯示邊框1/yes顯示邊框，默認為1scrollingyes顯示滾動條no不顯示滾動條auto根據頁面的長度自動判斷是否顯示滾動條，默認自動noresize設置框架能否改變大小marginwidthn以像素為單位，設置框架邊框與頁面內容的左右頁邊距marginheightn以像素為單位，設置框架邊框與頁面內容的上下頁邊距bordercolor…以RGB顏色值或顏色英文名設置框架邊框顏色<frame>常用屬性框架綜合示例4)不支持框架標記<noframes>一些早期版本的瀏覽器不支持框架。制作人員無法改變這一現象，所能做的只是顯示該瀏覽器不支持框架技術，有些內容無法看到。這一任務可由<noframes>標記來完成，當瀏覽器不能加載框架集文件時，會檢索到<noframes>標記，并顯示標記中的內容

基本語法

<frameset><frame><frame>…….

<noframes><body>……</body></noframes></frameset>放在<noframes>標記對之間的部分就是在不支持框架的瀏覽器中顯示的內容5)浮動框架<iframe>浮動框架是一種特殊的框架頁面，其作為HTML文檔的一部分，就象圖像一樣出現在HTML文檔中。浮動框架允許將一個HTML文檔插入到另一個HTML文檔內部的某個區域。基本語法

<iframesrc=“file_URL”height=“value”width=“value”name=“iframe_name”align=“left|center|right”>常用屬性:屬性屬性值描述srcURL設置浮動框架中顯示頁面源文件的路徑widthn設置浮動框的寬度heightn設置浮動框的高度name…設置浮動框的名稱，以便于其他對象引用它align…設置浮動框相對于瀏覽器窗口的對齊方式frameborder…設置浮動框架邊框顯示狀態，與普通框架同scrolling…設置浮動框架滾動條顯示屬性，與普通框架同noresize設置浮動框架尺寸調整屬性，與普通框架同bordercolor…設置浮動框架邊框顏色，與普通框架同marginheightn浮動框架邊框與頁內容上下間距，與普通框架同marginwidthn浮動框架邊框與頁內容左右間距，與普通框架同浮動框架示例框架的一個重要目的是在不同的框架中顯示不同的頁面，通過鏈接目標窗口的設置可以很容易實現這一目的具體實現方法：將框架的框架名屬性值作為超鏈接的target的屬性值6)框架與鏈接<framesetcols="20%,*"><framesrc="frame_menu.html"name="left"><framesrc="p.htm"name="right"></frameset>frame_menu.html超鏈接代碼如下:<body><p><ahref="p.htm"target="right">Photoshop</a></p><p><ahref="f.htm"target="right">Freehand</a></p><p><ahref="i.htm"target="right">Illustrator</a></p><p><ahref="c.htm"target="right">CorelDraw</a></p></body>普通框架與鏈接示例浮動框架與鏈接示例表單作用：表單是實現動態網頁的一種主要的外在形式，其主要功能是收集網頁訪問者的信息。表單特性：表單中包含多種不同的元素，如文本框、文本域、下拉式菜單等元素訪問者輸入的信息需要由CGI等服務器端處理程序處理訪問者輸入的信息可以使用GET和POST這兩種方式提交到服務器端5.2表單標記組成部分：根據實現的功能的不同，可將表單分成以下兩個部分：描述表單元素的HTML源代碼客戶端的腳本以及服務器端用于處理訪問者所輸入信息的程序

表單元素示例1)表單組成標記表單是網頁上的一個特定區域，構成這個區域的標記有六種，如表5-2所示。

表5-2表單標記標記描述<form>定義一個表單區域以及攜帶表單的相關信息<input>設置輸入表單元素<select>設置菜單或列表元素<optgroup>設置項目分組的菜單或列表<option>定義菜單或列表元素中的項目<textarea>設置表單文本域元素根據表現形式的不同，可將表單元素分為三大類：輸入元素、文本域元素及菜單和列表元素，分別對應標記<input>、<textarea>和<select><form>標記作用：限定表單的范圍，即定義一個區域，表單各元素都要設置在這個區域內，單擊提交按鈕時，提交的也是這個區域內的數據攜帶表單的相關信息，如處理表單的腳本程序的位置、提交表單的方法等2)表單標記<form>基本語法

<formname=“form_name”method=“get/post”action=“url”>……</form>語法解釋，見表5-3表5-3<form>標記常用屬性屬性描述name設置表單名稱，用于腳本引用method定義表單內容從客戶端傳送到服務器的方法，包括兩種方法：get和post；默認時使用get方法action用于定義表單處理程序的位置（相對地址或絕對地址）onsubmit用于定義表單處理腳本的位置數據發送形式數據從瀏覽器向服務器發送時，它以兩部分發送，即HTTP頭和HTTP正文體。其中頭包含關于用戶代理、服務器信息、內容類型等信息，這些信息通常以純文本發送，因而不安全；而HTTP正文體包含正文實體，這些信息是編碼后再發送的，所以比HTTP頭發送的信息更安全POST和GET提交方法的比較GET方法是將表單數據以HTTP頭的形式附加到URL地址后面，因而不安全；而POST方法則是以HTTP正文體形式發送，因而相對比較安全。GET方法對傳送數據的長度有限制，不能超過8K個字符；而POST方法無此限制。GET方法只能傳送ASCII碼的字符；而POST方法沒有字符碼的限制，它可以傳送包含在ISO10646中的所有字符。表單默認的提交方法是GET，當數據涉及到保密問題或所傳送的數據是用于執行插入或更新數據庫操作時，必須使用POST方法；否則可以使用GET方法基本語法<inputtype=“type_name”name=“field_name”>語法解釋type屬性用于設置不同類型的輸入域，可設置的域的類型請參見表6-3；name屬性指定域的名稱。3)輸入標記<input>表5-4type屬性值type屬性值描述text設置文字域password設置密碼域file設置文件域hidden設置隱藏域radio設置單選框checkbox設置復選框button設置普通按鈕submit設置提交按鈕reset設置重置按鈕image設置圖像域(圖像提交按鈕)文字域text作用

設置單行輸入文本框，用于訪問者在其中輸入文本信息，輸入的信息將以明文顯示基本語法<inputtype=“text”name=“field_name”maxlength=“value”size=“value”value=“field_value”>文字域屬性描述name設置文字域的名稱，在腳本中用于獲取域的數據maxlength設置在文字域中最多可輸入的字符數size設置文字域中可顯示的字符數value設置文字域的默認值文字域示例姓名：<inputtype=“text”size=“12”maxlength=“20”name=“user_name”>密碼域password作用

設置單行密碼輸入框，用于訪問者在其中輸入密碼信息，默認以“*”回顯所輸入的密碼基本語法<inputtype=“password”name=“field_name”maxlength=“value”size=“value”value=“field_value”>密碼域示例密碼：<inputtype=“password”size=“12”maxlength=“20”name=“psw”>隱藏域hidden作用

隱藏域在頁面中對用戶是不可見的，其作用是用于在頁面之間傳遞數據。基本語法<inputtype=“hidden” name=“field_name” value=“field_value”>示例:<inputtype=“hidden”value=“nch”name=“user_name”>“name”和“value”屬性值必須設置文件域file作用

用于上傳本地文件到服務器中。基本語法

<inputtype=“file”name=“field_name”>文件域示例請上傳你的照片：<inputtype=“file”name=“photo”>單選按鈕radio作用

用于在一組選項中進行單項選擇基本語法<inputtype=“radio”name=“group_name”value=“field_value”checked>

語法解釋

“value”屬性值表示選中項目后傳到服務器端的值，checked表示此項被默認選中，注意，同一組的單選框中只能有一個單選項被設置checked，屬于同一組的單選框的name屬性必須設置為相同的值單選按鈕示例性別： <inputtype=“radio”value=“female”name=“gender”checked>女 <inputtype=“radio”value=“male”name=“gender”>男復選框checkbox作用

用于在一組選項中進行多項選擇基本語法<inputtype=“checkbox”name=“file_name”value=“field_value”checked>

語法解釋

“value”屬性值表示選中項目后傳到服務器端的值，checked表示此項被默認選中，在同一組中可對多個選項框設置為checked，各復選框的name屬性可以設置為相同或不同的值復選框示例

<inputtype=“checkbox”value=“rock”name=“m1”checked>搖滾樂 <inputtype=“checkbox”value=“jazz”name=“m2”checked>爵士樂<inputtype=“checkbox”value=“pop”name=“m3”>流行樂提交按鈕submit作用

單擊提交按鈕后，將表單內容提交到指定服務器處理程序或指定客戶端腳本進行處理基本語法<inputtype=“submit”name=“field_name”value=“button_text”>value屬性值表示顯示在按鈕上面的文字在表單中添加提交按鈕的步驟

在<form>中設置action=處理表單程序名

或設置onsubmit=處理表單腳本函數名在<form></form>之間字段要出現的地方添加一個<input>標記設置type=“submit”，指定輸入域為提交按鈕（必設）設置name屬性來標記內容（可選）設置value屬性以在按鈕上顯示文字（可選）提交按鈕示例<formaction=“add.jsp”method=“post”>

<inputtype=“submit"name=“submit"value="新增“></form>普通按鈕button作用 激發提交表單動作，配合javascript腳本對表單執行處理操作基本語法<inputtype=“button”name=“field_name”value=“button_text”onclick=“javascript函數名“>onclick屬性用于指定程序對表單的處理普通按鈕示例

<inputtype="button"name=“submit"value="新增"onclick="add()"> <inputtype="button"name=“submit"value="刪除"onclick="delete()">重置按鈕reset作用 單擊重置按鈕后，清除表單中所輸入的內容，將表單內容恢復成默認的狀態基本語法<inputtype=“reset”name=“field_name”value=“button_text”>重置按鈕示例<inputtype=“reset”name=“reset”value=“重置“>圖像域image作用

按鈕外形以圖像表示，功能與提交按鈕一樣，具有提交表單內容的作用基本語法<inputtype=“image”name=“field_name”src=“image_URL”>提交圖像域示例

<inputtype=“image”src="images/daohangtiao1.jpg"name=imagewidth="60"height="30">4)菜單和列表標記<select>、<option>、<optgroup>作用 選擇列表允許訪問者從選項列表中選擇一項或幾項。它的作用等效于單選按鈕（單選時）或復選框（多選時），當選項比較多的情況下，相對于單選框和復選框來說，選擇列表可節省了很大的空間。<select>，<option>標記的功能

<select>標記用于聲明選擇列表，需由它確定選擇列表是否可多選，以及一次可顯示的列表選項數；而選擇列表中的各選項則需要由<option>來設置，其可設置各選項的值、以及是否為默認選項。選擇列表類型：依列表選項一次可被選擇和顯示的個數，選擇列表可分為以下兩種形式：下拉菜單（下拉列表）列表列表

列表是指一次可以選擇多個列表項，且一次可以顯示1個以上列表選項的選擇列表基本語法<selectname=“name”size=“value”multiple><optionvalue=“value”selected>選項一</option><optionvalue=“value”>選項二</option><optionvalue=“value”selected>選項三</option>……</select>屬性描述name設置列表的名稱size設置能同時顯示的列表選項個數（默認為1）multiple設置列表中的項目可多選value設置選項值selected設置默認選項，可對多個列表選項進行此屬性的設置列表示例請選擇你喜歡的網站:<selectname="web"size=“4”

multiple><optionvalue="sina"selected>新浪</option><optionvalue="yahoo">雅虎</option><optionvalue=“sohu”selected>搜狐</option><optionvalue="google"selected>google</option><optionvalue="163">網易</option></select>下拉菜單

下拉菜單是指一次只能選擇一個列表選項，且一次只能顯示一個列表選項的選擇列表基本語法<selectname=“name”size=“1”><optionvalue=“value”selected>選項一</option><optionvalue=“value”>選項二</option>……</select>語法解釋selected屬性用于設置默認選中項，只能有一個列表選項設置此屬性；size屬性只能設置為1，也可不設置此屬性，因為其值默認為1下拉菜單示例您的最高學歷/學位:<selectname=“degree"><optionvalue=“1”>博士后</option><optionvalue=“2”selected=“selected”>博士</option><optionvalue=“3”>碩士</option><optionvalue=“4”>學士</option><optionvalue=“0”>其他</option></select>5)文本域標記<textarea>作用 用于制作一個多行多列的文本輸入區域基本語法

<textareaname=“name”rows=“value1”cols=“value2”>

……(此處輸入的為默認文本）</textarea>屬性描述name設置文本域的名稱rows=“n”設置文本域的可見行數cols=“n”設置文本域可見列數文本域示例請留言:<textareaname="say"rows=“8”cols=“60”></textarea>表單綜合示例6)表單處理訪問者單擊提交按鈕或

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論