第3章 HTML高階

3.1 表單標簽

HTML表單是HTML頁面與瀏覽器端實現交互的重要手段。利用表單可以收集客戶端遞交的有關信息。表單由一個或多個文本輸入框、可單擊的按鈕、多選框、下拉菜單和圖像按鈕等組成，所有這些都放在<form>標簽中。一個文檔中可以包含多個表單，而且在每個表單中可以放置主體內容。

表單可以用于調查、訂購、搜索等功能。一般表單由兩部分組成，一是描述表單元素的HTML源代碼；二是客戶端的腳本。表單的處理過程是：當單擊表單中的提交按鈕，輸入在表單的信息就會上傳到服務器中，然后由服務器有關的應用程序處理，或者保存到服務器中的數據庫中，或者返回給客戶端瀏覽器。

網頁中經常能見到如圖3.1所示的頁面，進行用戶注冊的功能，頁面中可以使用戶錄入信息的元素就是表單元素。

※ 基本語法：<form name=" field_name " action="URL" method="get|post">表單標簽常用的屬性如表3-1所示。

一個表單用<form></form>標志來創建，即定義表單的開始和結束位置，在開始和結束標志之間的一切定義都屬于表單的內容。<form>標簽具有action、method和target屬性。action的值是處理程序的程序名。method屬性用來定義處理程序從表單中獲得信息的方式，可取值為get和post的其中一個。get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，post一般用于提交的信息比較大的情況下，它比get要安全，因為由它提交的信息不會顯示在瀏覽器地址欄上，而get則用于提交信息比較小的情況，它的速度比post要快，但是安全性低，因為它提交的信息會在瀏覽器地址欄中顯示出來。例如，提交密碼時就不能使用et，必須用post。當我們提交的信息較少且對安全要求不高的時候就可以使用get，比如百度搜索。target屬性用來指定目標窗口或目標幀?？蛇x當前窗口_self，父級窗口_parent，頂層窗口_top，空白窗口_blank。

※ 范例代碼 3.1.html

<form action="mailto:sun@126.com" method="post" name="form1" id="form1">
…
</form>

※ 代碼分析

單擊“提交”按鈕，發送郵件到sun@126.com，表單的傳送方式為post。

※ 范例效果圖

范例效果如圖3.2所示。

3.2 輸入元素

輸入表標簽<input>是表單中最常用的標簽之一。常用的文本域、密碼、按鈕等都會用到這個標簽。

※ 基本語法：<form><input name="元素名稱" type="元素類型"></form>

<input>標簽屬性基本有兩種：name（輸入元素的名稱），type（輸入元素的類型），由元素的類型可以確定具體是哪種表單元素。type屬性可以包含的屬性值如表3-2所示。

3.2.1 單行文本框

※ 基本語法：<input type="text" name="field_name" value="value1" size=

"value2" maxlength="value3">

可以通過添加value屬性，指示或提醒用戶該如何輸入信息，如下面的例子中value屬性值為提醒用戶輸入日期的格式。

例：<input type="text" value="mm/dd/yyyy" name="date" size="10">

常用的屬性如表3-3所示。

※ 范例代碼 3.2.html

<form action="mailto:sun@126.com" method="post" name="form1" id="form1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="font">
<tr>
<td width="100" align="right">姓名：</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td align="right">職業：</td>
<td><input type="text" name="business" id="business" /></td>
</tr>
…
<tr>
<td align="right">聯系電話：</td>
<td><input type="text" name="telephone" id="telephone" /></td>
</tr>
…
</table>
</form>

※ 范例效果圖

范例效果如圖3.3所示。

3.2.2 密碼框

※ 基本語法：<input type="password" name=" field_name " maxlength=value1

size=value2>

密碼文本框也是一個單行文本框。當站點訪問者在這個框中輸入數據時，大部分的Web瀏覽器都會以星號顯示密碼以不讓別人看到用戶所輸入的內容。常用的屬性如表3-4所示。

※ 范例代碼 3.3.html

<table width="89%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td height="30" colspan="2" valign="middle" nowrap> 用戶名:
    <input name="textfield" type="text" size="14" >
  </td>
</tr>
<tr>
  <td height="30" colspan="2" valign="middle" nowrap> 密 &nbsp;碼:
    <input name="textfield2" type="password" size="14" >
  </td>
</tr>
<tr align="right">
  <td width="81" height="30" valign="middle"><input type=button value="登陸" >&nbsp;</td>
  <td width="82" align="left" valign="middle">&nbsp;<input type=button value="注冊" ></td>
</tr>
</table>
<table width="92%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td nowrap>關健字:<input name="textfield3" type="text" size="14" ></td>
</tr>
<tr>
  <td nowrap>品&nbsp;&nbsp;牌:<input name="textfield4" type="text" size="10" >
搜索 </td>
</tr>
<tr>
  <td align="center" nowrap>&nbsp; </td>
</tr>
</table>

※ 范例效果圖

范例效果如圖3.4所示。

3.2.3 單選按鈕

※ 基本語法：<input type="radio" name=" field_name " value="value" checked >

表單中添加單選按鈕可以讓站點訪問者從一組選項中選擇其中之一。checked表示此項被默認選中，value表示選中項目后傳送到服務器端的值。單選按鈕常用的屬性如表3-5所示。

例如：

<input type "radio" name="city" value="beijing" checked>北京
<input type "radio" name="city" value="shanghai" checked>上海
<input type "radio" name="city" value="nanjing" checked>南京

※ 范例代碼 3.4.html

…
<tr>
<td align="right">聯系目的：</td>
<td><input type="radio" name="buy" id="buy" value="buy" />購買插畫
<input type="radio" name="layout" id="layout" value="layout" />展示插畫
<input type="radio" name="other" id="other" value="other" />其他</td>
</tr>
…

※ 范例效果

范例效果如圖3.5所示。

3.2.4 復選框

※ 基本語法：<input type="checkbox" name="field_name" value="value" checked >

表單中添加復選框可以讓站點訪問者去選擇一個或多個選項或不選項。復選框常用的屬性如表3-6所示。

例：

<input type="checkbox" name="M1" checked value="rock">搖滾樂
<input type="checkbox" name="M2" checked value="jazz">爵士樂<
input type="checkbox" name="M3" checked value="pop">流行樂

※ 范例代碼 3.5.html

<tr>
<td align="right">繪畫類型：</td>
<td>
<input type="checkbox" name="finery" id="finery" />服飾插畫
<input type="checkbox" name="stilllife" id="stilllife" /> 靜物插畫
<input type="checkbox" name="enjoyable" id="enjoyable" />寫意插畫
</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="checkbox" name="Europe" id="Europe" />歐洲插畫
<input type="checkbox" name="doodle" id="doodle" />涂鴉插畫
<input type="checkbox" name="background" id="background" />背景插畫
</td>
</tr>

※ 范例效果圖

范例效果如圖3.6所示。

3.2.5 按鈕

※ 基本語法：<input type="submit|reset|button" name="field_name" value=

"button_text">

使用input標簽可以在表單中添加3種類型的按鈕：提交按鈕、重置按鈕和自定義按鈕。

按鈕常用的屬性如表3-7所示。

※ 范例代碼 3.6.html

<tr>
<td height="100" colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置"/></td>
</tr>

※ 范例效果圖

范例效果如圖3.7所示。

3.2.6 文件域

※ 基本語法：<input type="file" name="field_name">

文件域由一個文本框和一個“瀏覽”按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過單擊“瀏覽”按鈕從磁盤上查找和選擇所需文件。文件域常用的屬性如表3-8所示。

※ 范例代碼 3.7.html

<form action="" method="post" enctype="multipart/form-data" name="form1">
<p>
<input name="textfield" type="text" value="單行文本域" size="43" maxlength="30">
</p>
<p>
<input name="textfield2" type="password" value="密碼域" size="43" maxlength="30">
</p>
<p>
<textarea name="textarea" cols="42" rows="4">多行文本域
</textarea>
</p>
<p>
<input type="radio" name="radiobutton" value="radiobutton">
<input type="checkbox" name="checkbox" value="checkbox">
<select name="select">
<option>--請選擇--</option>
<option>下拉菜單一</option>
<option>下拉菜單二</option>
<option>下拉菜單三</option>
</select>
</p>
<p>
<input name="file" type="file" size="33">
</p>
<p>
<input type="submit" name="Submit" value="確定傳送">
<input name="imageField" type="image" src="images/jiao.gif" width="80" height="20" border="0">
</p>
</form>

※ 范例效果圖

范例效果如圖3.8所示。

3.2.7 隱藏域

※ 基本語法：<input type="hidden" name="field_name" value="value">

用戶是看不到隱藏域的，但單擊“提交”按鈕后，隱藏域的值也會被傳送出去。隱藏域往往用來傳遞一些無須用戶輸入或知道的內容。

3.3 多行文本框

在意見反饋欄中往往需要瀏覽者發表意見和建議，提供的輸入區域一般較大，可以輸入較多的文字。使用多行文本框可以設置允許多于一行的文字的輸入。

※ 基本語法：<textarea name="name" rows=value cols=value value="value">

</textarea>

多行文本框常用的屬性如表3-9所示。

※ 范例代碼 3.8.html

   <textarea name="textarea" id="textarea" cols="30" rows="5"></textarea>

※ 范例效果圖

范例效果如圖3.9所示。

3.4 下拉列表和列表框

當瀏覽者選擇的項目較多時，如果使用復選框來選擇，占頁面的區域就會較多。可以用<select>標記和<option>標記來設置下拉列表或者列表框。其中下拉列表又可以稱作為菜單，菜單是一種最節省空間的方式，正常狀態下只能看到一個選項，單擊按鈕打開菜單后才能看到最全的選項。列表框可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來查看各個選項。

※ 基本語法：

<select name="name" size="value" multiple>
  <option value="value" selected>選項1</option>
  <option value="value">選項2</option>
  …
</select>

下拉列表和列表框的常用屬性如表3-10所示。

例：

<select name="music" size="4" multiple>
      <option value="rock" selected>搖滾樂</option>
      <option value="pop" >流行樂</option>
      <option value="jazz" >爵士樂</option>
      <option value="nation" >民族樂</option>
</select>
<BR/>
<select name="city">
      <option value="beijing" selected>北京</option>
      <option value="shanghai" >上海</option>
      <option value="nanjing" >南京</option>
      <option value="guangzhou" >廣州</option>
</select>

※ 范例代碼 3.9.html

<select name="idtype" class="style5">
    <option value=1>身份證</option>
    <option value=2>失業證</option>
    <option value=3>離休證</option>
    <option value=4>護照</option>
    <option value=5>簽證</option>
    <option value=6>學生證</option>
    <option value=7>戶口簿</option>
    <option value=8>軍官證</option>
    <option value=9>軍官退休證</option>
    <option value=10>駕照</option>
    <option value=11>出生證</option>
    <option value=12>其他</option>
</select>

※ 范例效果圖

范例效果如圖3.10所示。

3.5 框架標簽

框架就是把一個瀏覽器窗口劃分為若干個小窗口，每個窗口可以顯示不同的html網頁。使用框架可以非常方便地在瀏覽器中同時瀏覽不同的頁面效果，也可以非常方便地完成導航工作。

3.5.1 框架集<frameset>

框架主要包括兩個部分，一個是框架集，另一個是框架。一個被劃分成若干框架的窗口區域被稱為框架集，框架窗口必須定義在框架集中，框架集定義了一個窗口中顯示的框架數、框架的尺寸和載入到框架的網頁等。

※ 基本語法：

<html>
<head>
</head>
<frameset>
    <frame src="url地址1">
    <frame src="url地址2">
    ……
<frameset>
    </html>

框架集的主要屬性如表3-11所示。

左右分割窗口屬性cols：如果想要在水平方向將瀏覽器分割成多個窗口，這需要使用到框架集的左右分割窗口屬性cols。分割幾個窗口其cols的值就有幾個，值的定義為寬度，可以是數字（單位為像素），也可以是百分比和剩余值。各值之間用逗號分開。其中剩余值用"*"號表示，剩余值表示所有窗口設定之后的剩余部分，當"*"只出現一次時，表示該子窗口的大小將根據瀏覽器窗口的大小自動調整，當"*"出現一次以上時，表示按比例分割剩余的窗口空間。

例如：

<frameset cols="40%,40%,*">   將窗口分為40%，40%，20%
<frameset cols="100,200,*">   將窗口分為100像素，200像素，剩余部分
<frameset cols="100,*,*">     將100像素以外的窗口平均分配
<frameset cols="*,*,*">       將窗口分為三等份

上下分割窗口屬性rows 與cols屬性的設置基本一致。

※ 范例代碼 3.10.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset cols="266,41,*" frameborder="no" border="0" framespacing="0">
   <frame src="banner.html" name="leftFrame" scrolling="No">
   <frame src="dht.html" name="leftFrame1" scrolling="No" noresize="noresize">
   <frame src="main.html" name="mainFrame" id="mainFrame" scrolling="yes" />
</frameset>
<noframes>
</noframes>
</html>

※ 代碼分析

<frameset>將窗口劃分成左中右三個框架，左邊的框架寬度為266像素，中間的框架寬度為41像素，右邊的框架寬度為瀏覽器的剩余部分寬度。

※ 范例效果圖

范例效果如圖3.11所示。

3.5.2 框架標簽<frame>

<frame>標簽放在<frameset>和</frameset>標簽之間，用來定義某一個具體的框架窗口。窗口的屬性都是通過<frame>標簽設置的。<frame>是個單標簽，<frame>標簽要放在框架集<frameset>中，<frameset>設置了幾個子窗口就必須對應幾個<frame>標簽，框架的主要屬性如表3-12所示。

※ 范例代碼 3.11.html

<frameset cols="266,41,*" frameborder="no" border="0" framespacing="0">
   <frame src="banner.html" name="leftFrame" scrolling="No">
   <frame src="dht.html" name="leftFrame1" scrolling="No" noresize="noresize">
   <frame src="main.html" name="mainFrame" id="mainFrame" scrolling="yes" />
</frameset>

※ 代碼分析

<frame>標簽中屬性src指定要顯示的頁面分別是banner.html,dht.html和main.html,屬性ame指定框架的名稱分別為leftFrame,leftFrame1和mainFrame，屬性scrolling定義是否有滾動條，因為main.html是主體內容頁面，所以定義scrolling屬性值為yes,即框架窗口中包含滾動條，使用戶可以看到完整的頁面。

3.5.3 浮動框架<iframe>

<iframe>標簽稱為浮動框架標簽，浮動框架是一種特殊的框架頁面，即是在瀏覽器窗口中，通過浮動框架顯示其他頁面的內容。<iframe>和</iframe>標簽不需要放在<frameset>和/frameset>標簽之間，<iframe>屬性的用法與<frame>類似，這里不再贅述。

※ 范例代碼 3.12.html

<html>
<head>
</head>
<body>
<iframe id="news" src="page-1.htm" name="news" styles="width:334; height:100%;" frameborder="no" border="0" framespacing="0"></iframe>
</body>
</html>

※ 范例效果圖

范例效果如圖3.12所示。

3.5.4 不支援框架<noframes>

<noframes></noframes>標簽，即使在做框架集網頁時沒有這對標簽，文件在很多瀏覽器解析時也會自動生成<noframes>標簽，這對標簽的作用是當瀏覽者使用的瀏覽器太舊，不支援框架這個功能時，他看到的將會是一片空白。為了避免這種情況，可使用 <noframes>這個標簽，當使用的瀏覽器看不到框架時，他就會看到 <noframes> </noframes>之間的內容，而不是一片空白。

3.6 頁面實例——制作注冊頁面

※ 范例代碼 3.13.html

<body>
…
<table width="950" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top"><img src="images/SKYN_11.gif" width="225" height="281" /></td>
    <td width="675" valign="top">
    <iframe width="675" height="400" src="lxfs.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
   </iframe>
  </td>
   <td valign="top"><img src="images/SKYN_13.gif" width="50" height="298" /></td>
  </tr>
</table>
…
</body>

lxfs.html頁面代碼

<body>
…
<form action="mailto:zhengps@126.com" method="post" enctype="text/ plain" name="form1" id="form1">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="font1">
 <tr>
   <td width="100" align="right">姓 名：</td>
   <td><input type="text" name="textfield" id="textfield" /></td>
 </tr>
 <tr>
   <td width="100" align="right">工作性質：</td>
   <td><input type="text" name="textfield2" id="textfield2" /></td>
 </tr>
 <tr>
    <td width="100" align="right">別墅型號： </td>
    <td><input type="radio" name="radio" id="radio" value="radio" />山景電梯洋房
        <input type="radio" name="radio2" id="radio2" value="radio2" />山景洋房
        <input type="radio" name="radio3" id="radio3" value="radio3" />疊墅</td>
 </tr>
 <tr>
    <td width="100" align="right">購買方式：</td>
    <td><select name="select" id="select">
         <option selected="selected">一次性購買</option>
         <option>分期購買</option>
        </select>
     </td>
   </tr>
   <tr>
     <td width="100" align="right">聯系電話： </td>
     <td><input type="text" name="textfield3" id="textfield3" /></td>
   </tr>
   <tr>
       <td width="100" align="right">注 釋：</td>
      <td><textarea name="textarea" id="textarea" cols="30" rows="5"></textarea></td>
    </tr>
    <tr>
       <td height="40" colspan="2" align="center" valign="bottom">
         <input type="submit" name="button" id="button" value="提交" />
         <input type="reset" name="button2" id="button2" value="重置
         " /></td>
     </tr>
</table>
</form>
</body>

※ 范例效果圖

范例效果如圖3.13和圖3.14所示。

3.7 上機練習

1.制作如圖3.15所示頁面，注意表單元素的定義。

2.制作如圖3.16所示頁面，部門包括財務部、人事部、開發部和測試部，消費項目包括用餐、住宿和材料。

3.設計如圖3.17所示頁面，實現客戶詢價功能，注意表格的定義，使頁面排版更合理。