自己寫的web標準教程，幫你走進web標準設計的世界——第三講（html終結篇）

作者: 鐵拐李來源: 博客園發布時間: 2010-07-20 13:37 閱讀: 751 次推薦: 0 原文鏈接 [收藏]

聲明：本教程源于本人學習的一些經驗的總結，希望大家幫忙完善與指正，也希望會給初學者帶來方便，希望大家不要隨便轉載，寫的不是很好，還不完善，不過轉載時要注明作者和出處，附加原文的鏈接地址，謝謝了

已出：

自己寫的web標準教程，幫你走進web標準設計的世界——第一講

自己寫的web標準教程，幫你走進web標準設計的世界——第二講

上講回顧：上一講我主要講解了一下網頁常用的幾個html標簽。

本節我將給大家講解表單標簽和table標簽，ok，Begin！Right now！

標簽10：表單標簽

功能：構造一個表單，用來向服務器提交數據

基本結構與詳細標簽：

a：input標簽

使用指數：*****

功能：通過改變type類型來構造表單元素

類型：內聯元素

常用屬性：id，class，name（與ID類似，方便后臺程序獲取標簽的值），accept（accept 屬性只能與配合使用。它規定能夠通過文件上傳進行提交的文件類型。）

type與對應值一覽

其中值img很少使用，他與值submit的功能是相同的，hidden值對于一個前臺開發者而言幾乎是用不到的，button值暫時不做介紹，畢竟我們現在離javascript還很遙遠，呵呵

b: textarea標簽

使用指數：****

功能：無限的向其中輸入文本，比較適合做留言板，其中的文本的默認字體是等寬字體（通常是 Courier）

類型：內聯元素

常用屬性：id，class，name

特殊屬性：cols，rows來設置他的區域大小，不過不推薦這種設置，還是建議通過css來設置（又是后話了）！

c: fieldset和legend標簽

使用指數：**

功能：用來給你的表單劃分區域，在legend中設置區域的標題（不是很常用）

類型：塊級元素

常用屬性：id，class，title

d:label標簽

使用指數：***

功能：沒有任何效果，只是為input標簽提供一個標記不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

特殊屬性for:

標簽的 for 屬性應當與相關元素的 id 屬性相同。通過這種方法來與對應標簽綁定

例子：

1 <form>
2  <p><input type="radio" name="fru" id="apple" />蘋果</label></p>
3  <p><input type="radio" name="fru" id="li" />梨</label></p>
4  <p><input type="radio" name="fru" id="ban" />香蕉</label></p>
5  <p><input type="radio" name="fru" id="ban" />草莓</p>
6  </form>

點擊梨，蘋果會被選中，點擊蘋果，梨會被選中，點擊香蕉，香蕉會被選中，點擊草莓，草莓不會被選中，因為他沒有應用label，這時只有點擊按鈕（）才會被選中。

e:select標簽

使用指數：***

功能：創建單選或者多選的下拉菜單

結構：

1 <select name="sec">
2   <option value ="volvo">Volvo</option>//每一個選項
3    <option value ="saab">Saab</option>
4    <option value="opel">Opel</option>
5   <option value="audi">Audi</option>
6 </select>

這些屬性就不詳細講了，大家去實踐一下就明白了，很簡單

下面通過一個例子在具體應用表單標簽要注意的事項：

1 <div id="form">
2 <form name="form1" action="#" method="get">
3 //form標簽開始一個表單，action值為數據表單數據的傳向頁面，method為數據的傳遞形式，這些內容對于初學者不用理會
4     <fieldset>
5         <legend>輸入的文本</legend>//為表單劃分區域
6     <p><input type="text" name="user" id="user"/></p>//單行文本輸入
7     <p><input type="password" name="pwd" id="pwd" /></p> //單行密文輸入
8     <p><textarea cols="2" rows="2" id="msg" name="msg"></textarea></p>//多行文本輸入
9     </fieldset>
10     <fieldset>
11         <legend>選擇的文本</legend>
12     <p><input type="radio" name="fru" id="apple" />蘋果</label></p>
13 <p><input type="radio" name="fru" id="li" checked="checked" />梨</label></p>
14 //上面兩個是單選按鈕，注意每組單選按鈕的name屬性要相同，梨默認為被選
15
16     <p><input type="radio" name="fru" id="ban" />香蕉</label></p>
17     <p><input type="checkbox" name="men1" id="a" />成龍</label></p>
18     <p><input type="checkbox" name="men2" id="b" />鐵拐李</label></p>
19 <p><input type="checkbox" name="men3" id="c" />綠茶</label></p>
20 //上面是多選按鈕組合，注意他們的name屬性不能相同
21
22     <select name="sec" id="sec" multiple="multiple">
23         <option value="1">11111111</option>
24         <option value="2" selected="selected">22222222</option>
25         <option value="3" selected="selected">33333333</option>
26         <option value="4">44444444</option>
27 </select>
28 //上面是下拉式選擇，并且可以多選，2，3行默認為被選
29
30     </fieldset>
31     <fieldset>
32     <fieldset>
33         <legend>上傳的文件</legend>
34 <p><input type="file" name="file" id="file" accept="image/gif, image/jpeg"  /></p>
35 //上面為文件上傳，規定只能上傳格式為gif和jpeg的圖片
36     </fieldset>
37     <fieldset>
38         <legend>提交與重置</legend>
39 <p><input type="submit" value="提交表單" />/></p>
40 //表單的提交與重置
41     </fieldset>
42 </form>
43 </div>

標簽11：table

使用指數：***

功能：構造一個表格

類型：塊級元素

常用屬性：id，class

width：設置表格的寬度

border：設置表格的邊框

標簽a：caption

使用指數：*

功能：為表格定義一個標題

類型：塊級元素

標簽b：tr

使用指數：***

功能：為表格定義一個行

類型：塊級元素

標簽c：th

使用指數：**

功能：為表格的每一列定義一個小標題，默認字體加粗

類型：塊級元素

標簽d：td

使用指數：***

功能：為表格定義一個列

類型：內聯元素

特殊屬性：1.colspan：合并單元格（列合并）

2.rowspan：合并單元格（行合并）

例子：

1 <table border="1">
2     <caption>標題</caption>
3   <tr>
4     <th>Month</th>
5     <th>Savings</th>
6   </tr>
7   <tr>
8     <td rowspan="2">January</td>//行合并，所以要占據兩行空間
9     <td>$100</td>
10   </tr>
11   <tr>
12     <td>January</td>//由于上面是行合并，故這里少了一列
13   </tr>
14   <tr>
15     <td colspan="2">January</td>//列合并，故這里少了一列
16   </tr>
17 </table>

效果：