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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

左右分割基本語法

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

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

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

rows屬性決定了窗口的分割方式為上下分割；“value”定義各個框架的大小，單位可以是像素，也可以是百分比；value的個數(shù)決定了<frame>標記的個數(shù)，即窗口的個數(shù)<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>標記對框架邊框的格式化通過設(shè)置”frameborder”、”framespacing”和”bordercolor”等屬性來實現(xiàn)3)框架標記<frame>基本語法

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

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

…….</frameset>語法解釋

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

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

基本語法

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

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

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

表單元素示例1)表單組成標記表單是網(wǎng)頁上的一個特定區(qū)域，構(gòu)成這個區(qū)域的標記有六種，如表5-2所示。

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

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

設(shè)置單行輸入文本框，用于訪問者在其中輸入文本信息，輸入的信息將以明文顯示基本語法<inputtype=“text”name=“field_name”maxlength=“value”size=“value”value=“field_value”>文字域?qū)傩悦枋鰊ame設(shè)置文字域的名稱，在腳本中用于獲取域的數(shù)據(jù)maxlength設(shè)置在文字域中最多可輸入的字符數(shù)size設(shè)置文字域中可顯示的字符數(shù)value設(shè)置文字域的默認值文字域示例姓名：<inputtype=“text”size=“12”maxlength=“20”name=“user_name”>密碼域password作用

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

隱藏域在頁面中對用戶是不可見的，其作用是用于在頁面之間傳遞數(shù)據(jù)?；菊Z法<inputtype=“hidden” name=“field_name” value=“field_value”>示例:<inputtype=“hidden”value=“nch”name=“user_name”>“name”和“value”屬性值必須設(shè)置文件域file作用

用于上傳本地文件到服務(wù)器中?；菊Z法

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

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

語法解釋

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

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

語法解釋

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

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

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

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

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

<inputtype=“submit"name=“submit"value="新增“></form>普通按鈕button作用 激發(fā)提交表單動作，配合javascript腳本對表單執(zhí)行處理操作基本語法<inputtype=“button”name=“field_name”value=“button_text”onclick=“javascript函數(shù)名“>onclick屬性用于指定程序?qū)Ρ韱蔚奶幚砥胀ò粹o示例

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

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論