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

下載本文檔

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

文檔簡介

第5講框架與表單標(biāo)記第一頁，共75頁。學(xué)習(xí)目標(biāo)理解框架的作用掌握框架標(biāo)記的使用理解不支持框架標(biāo)記的應(yīng)用掌握浮動框架的使用掌握使用框架作為超鏈接目標(biāo)的設(shè)置理解有關(guān)表單的相關(guān)概念掌握各種表單標(biāo)記的使用第二頁，共75頁。框架的作用，就是把瀏覽器窗口劃分成若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。注意：使用框架結(jié)構(gòu)時，HTML文檔中不能出現(xiàn)<body>標(biāo)記對，此時<body>需要由<frameset>代替5.1框架結(jié)構(gòu)第三頁，共75頁?？蚣芗瘶?biāo)記<frameset>：主要是定義瀏覽器窗口的分割方式、各分割窗口（框架）的大小以及格式化框架邊框框架標(biāo)記<frame>：定義各分割窗口中顯示的內(nèi)容，并能對各分割窗口進(jìn)行格式化1）框架結(jié)構(gòu)組成標(biāo)記第四頁，共75頁。2）框架集標(biāo)記<frameset>屬性屬性值描述bordercolor…以RGB顏色值或顏色英文名設(shè)置所有框架邊框顏色frameborder0/no所有框架都不顯示邊框1/yes所有框架都顯示邊框，默認(rèn)為1framespacingn設(shè)置框架之間的間距rowsn1,n2…使窗口按行的方式分割(上下分割)colsn1,n2…使窗口按列的方式分割(左右分割)表5-1<frameset>常用屬性第五頁，共75頁?？蚣芊指畲翱诜绞阶笥遥ㄋ剑┓指钌舷拢ù怪保┓指钋短追指睿簽g覽器窗口既存在左右分割，又存在上下分割

第六頁，共75頁。左右分割基本語法

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

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

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

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

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

<framesetrows|cols=“value,value,…”><frame><frame>……</frameset><frame>…….</frameset>第十一頁，共75頁。<framesetcols="20%,55%,*">

<framesetrows="100,*"><frame><frame></frameset><frame><frame></frameset>嵌套分割示例第十二頁，共75頁。<frameset>對框架邊框的格式化<frameset>標(biāo)記對框架邊框的格式化通過設(shè)置”frameborder”、”framespacing”和”bordercolor”等屬性來實現(xiàn)第十三頁，共75頁。3)框架標(biāo)記<frame>基本語法

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

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

…….</frameset>語法解釋

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

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

第十八頁，共75頁?；菊Z法

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

<iframesrc=“”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)容左右間距，與普通框架同第二十頁，共75頁。浮動框架示例第二十一頁，共75頁?？蚣艿囊粋€重要目的是在不同的框架中顯示不同的頁面，通過鏈接目標(biāo)窗口的設(shè)置可以很容易實現(xiàn)這一目的具體實現(xiàn)方法：將框架的框架名屬性值作為超鏈接的target的屬性值6)框架與鏈接第二十二頁，共75頁。<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>普通框架與鏈接示例第二十三頁，共75頁。浮動框架與鏈接示例第二十四頁，共75頁。表單作用：表單是實現(xiàn)動態(tài)網(wǎng)頁的一種主要的外在形式，其主要功能是收集網(wǎng)頁訪問者的信息。表單特性：表單中包含多種不同的元素，如文本框、文本域、下拉式菜單等元素訪問者輸入的信息需要由CGI等服務(wù)器端處理程序處理訪問者輸入的信息可以使用GET和POST這兩種方式提交到服務(wù)器端5.2表單標(biāo)記第二十五頁，共75頁。組成部分：根據(jù)實現(xiàn)的功能的不同，可將表單分成以下兩個部分：描述表單元素的HTML源代碼客戶端的腳本以及服務(wù)器端用于處理訪問者所輸入信息的程序第二十六頁，共75頁。

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

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

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

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

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

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

<inputtype=“file”name=“field_name”>第四十一頁，共75頁。文件域示例請上傳你的照片：<inputtype=“file”name=“photo”>第四十二頁，共75頁。單選按鈕radio作用

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

第四十三頁，共75頁。語法解釋

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

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

第四十六頁，共75頁。語法解釋

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

<inputtype=“checkbox”value=“rock”name=“m1”checked>搖滾樂 <inputtype=“checkbox”value=“jazz”name=“m2”checked>爵士樂<inputtype=“checkbox”value=“pop”name=“m3”>流行樂第四十八頁，共75頁。提交按鈕submit作用

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

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

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

<inputtype=“submit"name=“submit"value="新增“></form>第五十一頁，共75頁。普通按鈕button作用 激發(fā)提交表單動作，配合javascript腳本對表單執(zhí)行處理操作基本語法<inputtype=“button”name=“field_name”value=“button_text”onclick=“javascript函數(shù)名“>onclick屬性用于指定程序?qū)Ρ韱蔚奶幚淼谖迨?，?5頁。普通按鈕示例

<inputtype="button"name=“submit"value="新增"onclick="add()"> <inputtype="button"name=“submit"value="刪除"onclick="delete()">第五十三頁，共75頁。重置按鈕reset作用 單擊重置按鈕后，清除表單中所輸入的內(nèi)容，將表單內(nèi)容恢復(fù)成默認(rèn)的狀態(tài)基本語法<inputtype=“reset”name=“field_name”value=“button_text”>第五十四頁，共75頁。重置按鈕示例<inputtype=“reset”name=“reset”value=“重置“>第五十五頁，共75頁。圖像域image作用 按鈕外形以圖像表示，功能與提交按鈕一樣，具有提交表單內(nèi)容的作用基本語法<inputtype=“image”name=“field_name”src=“image_URL”>第五十六頁，共75頁。提交圖像域示例

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

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

列表是指一次可以選擇多個列表項，且一次可以顯示1個以上列表選項的選擇列表第六十一頁，共75頁?；菊Z法<selectname=“name”size=“value”multiple><optionvalue=“value”selected>選項一</option><optionvalue=“value”>選項二</option><optionvalue=“value”selected>選項三</option>……</select>屬性描述name設(shè)置列表的名稱size設(shè)置能同時顯示的列表選項個數(shù)（默認(rèn)為1）multiple設(shè)置列表中的項目可多選value設(shè)置選項值selected設(shè)置默認(rèn)選項，可對多個列表選項進(jìn)行此屬性的設(shè)置第六十二頁，共75頁。列表示例請選擇你喜歡的網(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>第六十三頁，共75頁。下拉菜單

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

<textareaname=“name”rows=“value1

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論