HTML 表單和表格
1、使用表單标簽
網站使用 HTML 表單可與使用者進行互動,表單元素是允許使用者在表單中輸入内容,比如:文本框、文本域、單選框、複選框、下拉清單、按鈕等等,表單可以把浏覽者輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。表單使用表單标簽 <form> 來定義:
<form method="傳送方式" action="表單送出位址" name="表單名稱"></form>
accept-charset 屬性規定伺服器可處理的表單資料字元集。預設值是保留字元串 "UNKNOWN",表示編碼為包含 <form> 元素的文檔的編碼。
enctype 屬性規定在将表單資料發送到伺服器之前如何對其進行編碼。注意:隻有 method="post" 時才使用 enctype 屬性。
下面是2個新屬性:
autocomplete 屬性規定表單是否應該啟用自動完成功能。自動完成允許浏覽器預測對字段的輸入。當使用者在字段開始鍵入時,浏覽器基于之前鍵入過的值,應該顯示出在字段中填寫的選項。注意:autocomplete 屬性 "on" 适用于表單,"off" 适用于特定的輸入字段,反之亦然。預設值為 on 規定啟用自動完成功能。浏覽器會基于使用者之前鍵入的值自動完成值。off 則規定禁用自動完成功能。使用者必須在每次使用時輸入值到每個字段中,浏覽器不會自動完成輸入。
novalidate 屬性規定當送出表單時不對表單資料進行驗證。
From 中的 Get 和 Post 方法:
(1)、Get 方式将表單中資料的按照 var=value 的形式,添加到 action 所指向的 URL 後面,并且兩者使用“?”連接配接,而各個變量之間使用“&”連接配接;而 Post 方式是将表單中的資料放在 form 的資料體中,按照變量和值相對應的方式,傳遞到 action 所指向的 URL。如下 Get 方式傳送:
http://www.abc.com/demo.php?name=小白&password=12345678
(2)、Get 方式是不安全的,因為在傳輸過程,資料被存放在請求的 URL 位址中,這樣容易造成資訊洩漏。
(3)、Get 方式傳輸的資料量非常小,一般限制在 2KB 左右,但是執行效率卻比 Post 方法好;而 Post 方式傳遞的資料量相對較大,它是等待伺服器來讀取資料,不過也有位元組限制,這是為了避免對伺服器用大量資料進行惡意攻擊,是以建議盡量使用 Post 方法傳送資料,比如使用者注冊,使用 Get 方法請求資料,比如浏覽貼子。
2、文本框
當使用者要在表單中鍵入字母、數字等内容時,就會用到文本輸入框,文本框也可以轉化為密碼輸入框。輸入域通過 <input> 标簽完成,該标簽規定了使用者可以在其中輸入資料的輸入字段。輸入字段可通過多種方式改變,取決于 type 屬性。如下:
1 <form method="post" action="demo.php">
2 <label for="name">使用者名:</label>
3 <input type="text" name="username" id="name" value="小白"><br/>
4 <label for="pass">密 碼:</label>
5 <input type="password" name="password" id="pass" placeholder="請輸入密碼">
6 </form>
<input> 标簽用于定義輸入域,而 type 屬性規定了要顯示的輸入域的内容,type="text" 為預設值,定義一個單行的文本字段輸入,預設顯示寬度為 20 個字元。 name 屬性為文本框命名,以備背景程式調用。type="password" 定義密碼字段,密碼字段字元不會明文顯示,而是以星号或圓點替代。
value 屬性可為文本框設定預設值,一般起到提示的作用,value 屬性對于不同 input 類型,用法也不同:
(1)、對于 "text"、"password"、"hidden" 類型,定義輸入字段的初始(預設)值。
(2)、對于 "button"、"submit"、"reset"、類型,定義按鈕上的文本。
(3)、對于 "checkbox"、"radio"、"image" 類型,則定義與 input 元素相關的值,當送出表單時該值會發送到表單的 action URL。
注意:value 屬性對于 <input type="checkbox"> 和 <input type="radio"> 是必需的,不适用于 <input type="file">。
而 placeholder 屬性則可規定輸入字段預期值的簡短的提示資訊,比如一個樣本值或者預期格式的短描述,該提示會在使用者輸入值之前顯示在輸入字段中,該值顯示為虛體,顔色淺,當使用者輸入時自動清除,而用于 <input type="text" value="小白"> 的 value 屬性的預設值顯示為實體,而且顔色深,在使用者輸入時需要自行清除。placeholder 屬性适用于下面的 input 類型:text、search、url、tel、email 和 password。
<label> 标簽則為 input 元素定義标記,一般為輸入标題。<label> 标簽不會向使用者呈現任何特殊效果,它的作用是為滑鼠使用者改進了可用性。如果你在該标簽内點選文本,就會觸發此控件。就是說,當使用者單擊選中該 <label> 标簽時,浏覽器就會自動将焦點轉到和标簽相關的表單控件上(就自動選中和該 <label> 标簽相關連的表單控件上)。for 屬性規定 label 與哪個表單元素綁定,該屬性的值應當與綁定元素的 id 屬性值相同。如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="male">男</label>
3 <input type="radio" id="male" name="gender"><br/>
4 <label for="female">女</label>
5 <input type="radio" id="female" name="gender"><br/>
6 <label for="email">郵箱</label>
7 <input type="email" id="email" placeholder="請輸入郵箱位址">
8 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
3、文本域
文本域是一個多行的文本輸入控件,當使用者需要在表單中輸入大段文字時,需要用到文本輸入域。文本域通過 <textarea> 标簽完成,如下:
1 <form method="post" action="demo.php">
2 <label for="txt">發表意見:</label><br/>
3 <textarea cols="50" rows="10" id="txt">在這裡輸入内容...</textarea>
4 </form>
注意:<textarea> 标簽是一對閉合标簽,成對出現,在開始标簽和結束标簽之間可以輸入預設值,cols 和 rows 屬性則定義文本域的行數和列數,更好的辦法是使用 CSS 的 width 和 height 屬性來定義文本與的大小,width 代替 cols,height 代替 rows。
4、選擇框
選擇框可以讓使用者做出選擇,在使用表單設計調查表時,為了減少使用者的操作,使用選擇框是一個好主意,HTML 中有兩種選擇框,即單選框和複選框,兩者的差別是單選框中的選項使用者隻能選擇一項,而複選框中使用者可以任意選擇多項,甚至全選。定義選擇框通過 <input> 标簽完成,不同的是輸入類型。
(1)、單選框
type="radio" 定義了單選框,也叫單選按鈕,允許使用者在一定數量的選擇中選取一個選項。如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="love">喜 歡</label>
3 <input type="radio" id="love" name="like" value="喜歡" checked><br/>
4 <label for="noLove">不喜歡</label>
5 <input type="radio" id="noLove" name="like" value="不喜歡"><br/>
6 <label for="casual">無所謂</label>
7 <input type="radio" id="casual" name="like" value="無所謂"><br/>
8 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
(2)、複選框
type="checkbox" 定義了複選框,允許使用者可以選擇多個選項。如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="tool1">自行車</label>
3 <input type="checkbox" id="tool1" name="bike" value="自行車"><br/>
4 <label for="tool2">汽 車</label>
5 <input type="checkbox" id="tool2" name="car" value="汽車"><br/>
6 <label for="tool3">飛 機</label>
7 <input type="checkbox" id="tool3" name="plane" value="飛機" checked><br/>
8 <label for="tool4">火 箭</label>
9 <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
10 <label for="tool5">毛 線</label>
11 <input type="checkbox" id="tool5" name="wool" value="毛線">
12 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
value 屬性值是必需的,為送出資料到伺服器的值,供背景程式使用。name 屬性為輸入控件命名,供背景程式使用,checked 屬性規定在頁面加載時應該被預先標明的 <input> 元素。該屬性隻适用于 <input type="radio"> 和 <input type="checkbox">。checked 屬性用于設定預設選項,即該選項會被預設選中。該屬性也可以在頁面加載後,通過 JavaScript 代碼進行設定。
注意:同一組的單選按鈕,name 屬性取值一定要一緻,比如上面例子為同一個名稱“like”,這樣同一組的單選按鈕才可以起到單選的作用。同一組的複選框,name 屬性取值可以一緻,這樣友善為其定義樣式,或者通過 JS 擷取元素。
5、下拉清單框
下拉清單在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、也可以多選。下拉清單框通過 <select> 标簽 和 <option> 标簽完成。
(1)、下拉清單單選框
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="like">喜歡:</label>
3 <select id="like" name="cars">
4 <option value="奧迪">奧迪</option>
5 <option value="寶馬">寶馬</option>
6 <option value="奔馳">奔馳</option>
7 <option value="賓利">賓利</option>
8 <option value="路虎">路虎</option>
9 </select>
10 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
(2)、下拉清單複選框
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="like">喜歡:</label>
3 <select id="like" name="cars" multiple>
4 <option value="奧迪">奧迪</option>
5 <option value="寶馬">寶馬</option>
6 <option value="奔馳">奔馳</option>
7 <option value="賓利">賓利</option>
8 <option value="路虎" selected>路虎</option>
9 </select>
10 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
<select> 标簽定義下拉清單選項,而 <option> 标簽定義下拉清單中的選項。
下拉清單單選框和下拉清單複選框,唯一的不同就是複選框使用了 multiple 屬性實作了多選功能,下拉清單可以進行多選操作就是在 <select> 标簽中設定了 multiple 屬性,該屬性用于規定可同時選擇多個選項,需要注意:下拉清單框根據選項的個數(單選/複選),會在網頁上呈現不同的顯示效果。在不同的作業系統,選擇多個選項的方法也不同,在 windows 作業系統下,需要按住 Ctrl 鍵來選擇多個選項,而在 Mac 系統下,需要按住 Command 鍵來選擇多個選項。
<option> 标簽的 value 屬性值為向伺服器送出的值,selected 屬性則表示該選項被預設選中,即首次在清單中時表現為選中狀态。該标簽需要與 <select> 标簽配合使用,否則這個标簽是沒有任何意義的。
<select> 元素是一種表單控件,可用于在表單中接受使用者輸入。還元素有幾個重要屬性,required 屬性規定使用者在送出表單前必須選擇一個下拉清單中的選項。autofocus 屬性規定在頁面加載時下拉清單自動獲得焦點。size 屬性規定下拉清單中可見選項的數目。由于各屬性之間的差異,需要告訴使用者是否可以多項選擇,對使用者更友好的方式是使用複選框。
如果有很多的選項組合,就可以使用 <optgroup> 标簽能夠很簡單的将相關選項組合在一起。該标簽經常用于把相關的選項組合在一起。如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="like">喜歡:</label>
3 <select>
4 <optgroup label="國産">
5 <option value="奇瑞">奇瑞</option>
6 <option value="大衆">大衆</option>
7 <option value="現代">現代</option>
8 <option value="哈弗">哈弗</option>
9 <option value="比亞迪">比亞迪</option>
10 </optgroup>
11 <optgroup label="進口">
12 <option value="蘭博基尼">蘭博基尼</option>
13 <option value="雷克薩斯">雷克薩斯</option>
14 <option value="凱迪拉克">凱迪拉克</option>
15 <option value="瑪莎拉蒂">瑪莎拉蒂</option>
16 <option value="英菲尼迪">英菲尼迪</option>
17 </optgroup>
18 </select>
19 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
<optgroup> 标簽一個重要屬性 label 用于為選項組規定描述。
6、按鈕
在表單中有兩種按鈕可以使用,分别為:送出按鈕和重置按鈕。還有一種按鈕叫做點選按鈕。
(1)、點選按鈕
type="button" 定義一個可點選的按鈕,在使用者點選按鈕時啟動一段 JavaScript。
1 <input type="button" value="按鈕" onclick="show()">
2 <script>
3 function show(){
4 alert("Hello world!");
5 }
6 </script>
(2)、送出按鈕
當使用者需要送出表單資訊到伺服器時,需要用到送出按鈕。type="submit" 用于定義送出按鈕。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="urse">使用者名:</label>
3 <input type="text" id="urse" name="ursename" placeholder="郵箱/手機号/使用者名"/><br/>
4 <label for="password">密 碼:</label>
5 <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6 <input type="submit" value="送出資訊">
7 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
button 和 submit 都是定義一個按鈕,不同的是 button 隻是一個普通的按鈕,主要用于綁定事件,如果不給其綁定事件,那麼點選按鈕不會有任何反應。而 submit 則是送出按鈕,主要用于送出表單,傳送資料,如果給 submit 綁定事件,那麼點選按鈕觸發事件的同時,也會送出表單。
(3)、重置按鈕
當使用者需要重置表單資訊到初始時的狀态時,比如使用者輸入資訊後,發現輸入錯誤,那麼可以使用重置按鈕使輸入框恢複到初始狀态。隻需要把 type 設定為 "reset" 就可以。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <label for="urse">使用者名:</label>
3 <input type="text" id="urse" name="ursename" placeholder="郵箱/手機号/使用者名"/><br/>
4 <label for="password">密 碼:</label>
5 <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6 <input type="submit" value="送出資訊">
7 <input type="reset" value="重置資訊">
8 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
type="reset" 用于定義一個重置按鈕,需要謹慎使用該按鈕,當使用者點選重置按鈕後,所有表單值都會恢複到預設值,這對于使用者來說,如果不慎點選了重置按鈕将是一件十分令人惱火的事。
在 HTML 中還有一種建立按鈕的方法就是使用 <button> 标簽。該元素與使用 <input> 元素建立的按鈕之間的不同之處就在于:使用 button 元素建立的按鈕,在該元素内部可以放入内容,比如文本或圖像,也就是該元素可以使用多媒體内容,<button> 與 </button> 标簽之間的所有内容都是按鈕的内容。該元素也可以定義點選按鈕、送出按鈕和重置按鈕。但是他的缺點就是:不同的浏覽器對 <button> 元素的 type 屬性使用不同的預設值,是以要始終為 <button> 元素規定 type 屬性,不同浏覽器可能會送出不同的按鈕值,也就是浏覽器得到的 value 值不同,存在相容性問題。是以要使用 <input> 元素在 HTML 表單中建立按鈕。
7、input 元素屬性和其他輸入類型
除了前邊提到的一些屬性外,input 元素還有一些重要屬性,以及 HTML5 新增加的屬性。
readonly 屬性規定輸入字段是隻讀的。該屬性是一個布爾值。隻讀字段是不能修改的。不過,使用者仍然可以使用 tab 鍵切換到該字段,還可以選中或拷貝其文本。readonly 屬性可以防止使用者對值進行修改,直到滿足某些條件為止,比如選中了一個複選框。然後,需要使用 JavaScript 消除 readonly 值,将輸入字段切換到可編輯狀态。
size 屬性規定以字元數計的 <input> 元素的可見寬度。size 屬性适用于下面的 input 類型:text、search、tel、url、email 和 password。如需規定 <input> 元素中允許的最大字元數,需要使用 maxlength 屬性。
以下是 HTML5 中的新屬性:
autocomplete="on|off" 屬性規定輸入字段是否應該啟用自動完成功能。預設值為 on,規定使用者啟用自動完成功能,off 則表示禁用。注意:autocomplete 屬性适用于下面的 <input> 類型:text、search、url、tel、email、password、date pickers(日期選擇器)、range 和 color。
multiple 屬性規定允許使用者輸入到 <input> 元素的多個值。該值是一個布爾值,注意:multiple 屬性适用于以下 input 類型:email 和 file。
pattern 屬性規定用于驗證 <input> 元素的值的正規表達式。可以使用使用全局的 title 屬性來描述模式以幫助使用者。pattern 屬性适用于下面的 input 類型:text、search、url、tel、email 和 password。
required 屬性規定必需在送出表單之前填寫輸入字段。該屬性是一個布爾值,required 屬性适用于下面的 input 類型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
下面是 input 元素的其他輸入類型:
(1)、圖像作為按鈕
type="image" 用于定義圖像作為送出按鈕,如下:
<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">
上面代碼中的 3 個屬性都隻針對 type="image",src 屬性規定顯示為送出按鈕的圖像的 URL。alt 屬性定義圖像輸入的替代文本。width 和 height 規定 <input>元素的寬度/高度。
(2)、隐藏字段
type="hidden" 用于定義隐藏字段,隐藏字段對于使用者是不可見的。隐藏字段常常存儲預設值,或者由 JavaScript 改變它們的值。
1 <form method="post" action="demo.php">
2 姓名: <input type="text" name="user"><br/>
3 <input type="hidden" name="country" value="China">
4 <input type="submit" value="送出">
5 </form>
(3)、選擇檔案
type="file" 用于定義檔案選擇字段和 "浏覽..." 按鈕,供檔案上傳。
1 <form method="post" action="demo.php">
2 選擇一個檔案: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
3 <input type="submit" value="送出">
4 </form>
accept 屬性僅适用于 <input type="file">。該屬性規定了可通過檔案上傳送出的伺服器接受的檔案類型。如需要多個檔案類型,每個值可以使用逗号分隔。注意:不要将該屬性作為驗證工具,應該在伺服器上對檔案上傳進行驗證。
以下都是 input 元素在 HTML5 中的新類型:
(4)、Email
type="email" 用于定義郵箱位址的字段,當送出表單時會自動對 email 字段的值進行驗證。
Email: <input type="email" name="usre">
(5)、電話号碼
type="tel" 用于定義用于輸入電話号碼的字段。
電話号碼: <input type="tel" name="mobile">
(6)、拾色器
type="color" 用于定義從拾色器中選取顔色。
選擇你喜歡的顔色: <input type="color" name="likecol">
(7)、搜尋字段
type="search" 定義用于輸入搜尋字元串的文本字段,比如站内搜尋。
查檢視: <input type="search" name="lookup">
目前,浏覽器對于該類型的支援不是很好。
(8)、URL
type="url" 定義用于輸入 URL 的字段。
添加你的首頁: <input type="url" name="homepage">
(9)、數字字段
type="number" 定義用于輸入數字的字段,可以設定可接受數字的限制。
數量 ( 1 到 5 之間): <input type="number" name="num" min="1" max="5">
min 和 max 屬性可用于規定 <input> 元素的最小/最大值。value 屬性可規定預設值。step 屬性可規定 <input> 元素的合法數字間隔。執行個體:如果 step="3",則合法數字應該是 -3、0、3、6,以此類推。該屬性可以與 min 和 max 屬性配合使用,以建立合法值的範圍。
type="range" 定義用于精确值不重要的輸入數字的控件,比如 Slider.js,一個輕量級圖檔播放控件。也可以設定可接受數字的限制。用來規定限制的屬性同 number 類型相同。
(10)、日期
type="time" 定義用于輸入時間的控件(不帶時區)。
type="date" 定義 date 控件。
type="datetime" 定義 date 和 time 控件(帶有時區)。
type="datetime-local" 定義 date 和 time 控件(不帶時區)。
type="month" 定義 month 和 year 控件(不帶時區)。
type="week" 定義 week 和 year 控件(不帶時區)。
8、其他表單标簽
(1)、表單邊框
<fieldset> 标簽定義圍繞表單中元素的邊框。<legend>标簽用于定義 fieldset 元素的标題。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <fieldset>
3 <legend>個人資訊:</legend>
4 姓名: <input type="text"><br/>
5 籍貫: <input type="text"><br/>
6 郵箱: <input type="email"><br/>
7 家庭住址: <input type="text">
8 </fieldset>
9 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
在 HTML5 中還增加了3個新标簽:
(2)、<datalist>
<datalist> 标簽規定了 input 元素可能的選項清單。如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <form method="post" action="demo.php">
2 <input list="browser" name="explorer" autofocus>
3 <datalist id="browser">
4 <option value="IE">
5 <option value="Firefox">
6 <option value="Chrome">
7 <option value="Safari">
8 <option value="Opera">
9 </datalist>
10 <input type="submit">
11 </form>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
<datalist> 标簽被用來為 <input> 元素提供"自動完成"的特性。使用者能看到一個下拉清單,裡邊的選項是預先定義好的,将作為使用者的輸入資料。注意:必需使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。該屬性引用 <datalist> 元素,其中包含 <input> 元素的預定義選項,該屬性值為綁定到 <input> 元素的 datalist 的 id。
autofocus 屬性用于規定當頁面加載時 <input> 元素應該自動獲得焦點。
(3)、<output>
<output> 标簽作為計算結果輸出顯示,比如執行腳本的輸出。如下:
1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
2 0<input type="range" id="x" value="50">100
3 +<input type="number" id="y" value="50">=
4 <output name="sum" for="x y"></output>
5 </form>
該标簽有一個重要屬性 for 規定一個或多個元素的 id 清單,以空格分隔,用于描述計算中使用的元素與計算結果之間的關系。name 屬性定義對象的唯一名稱,在表單送出時使用。
(4)、<keygen>
<keygen> 規定用于表單的密鑰對生成器字段。當送出表單時,私鑰存儲在本地,公鑰發送到伺服器。如下:
1 <form method="post" action="demo.php">
2 使用者名: <input type="text" name="usre"><br/>
3 加 密: <keygen name="security" keytype="rsa">
4 <input type="submit">
5 </form>
該标簽有一個重要屬性 keytype 用于定義密鑰的安全算法,該屬性規定應該使用哪種密鑰生成算法,安全算法有3種:rsa為預設,規定 RSA 安全算法,RSA 密鑰強度可由使用者選擇。dsa 規定 DSA 安全算法,DSA 密鑰長度可由使用者選擇。ec 規定 EC 安全算法,EC 密鑰強度可由使用者選擇。注意:不同的浏覽器對密鑰生成算法的支援會有所變化。
9、HTML 表格
建立表格的四個元素:table、tr、th、td
<table>…</table>:整個表格以 <table> 标記開始,以 </table> 标記結束。
<tr>…</tr>:表格的一行,是以有幾對 tr 表格就有幾行。
<th>…</th>:表格的頭部的一個單元格,表格表頭。
<td>…</td>:表格的一個單元格,一行中包含幾對 <td>...</td>,說明一行中就有幾列。表格中列的個數,取決于一行中資料單元格的個數。
基本文法:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <table border="1">
2 <tr>
3 <th>姓名</th>
4 <th>性别</th>
5 <th>工号</th>
6 </tr>
7 <tr>
8 <td>小白</td>
9 <td>男</td>
10 <td>123</td>
11 </tr>
12 <tr>
13 <td>初夏</td>
14 <td>女</td>
15 <td>321</td>
16 </tr>
17 </table>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
此外,還有幾個相當重要的表格标簽,用于優化群組合表格元素:caption、thead、tbody、tfoot
<caption>…</caption>:定義表格的标題,該标簽必須放置在 <table> 元素之後,作為第一個子元素,并且一個表格隻能定義一個标題。通常這個标題居中于表格之上,可以通過 CSS 屬性 "text-align" 和 "caption-side" 來設定标題的對齊方式和顯示位置。
<thead>…</thead>:用于組合 HTML 表格的表頭内容。該元素必須作為 <table> 元素的子元素,并且出現在 <caption>、<colgroup> 元素之後,<tbody>、 <tfoot> 和 <tr> 元素之前。
<tbody>…</tbody>:用于組合 HTML 表格的主體内容。當表格内容非常多時,表格會下載下傳一點顯示一點,但如果加上 <tbody> 标簽後,這個表格就要等表格内容全部下載下傳完才會顯示。該元素必須作為 <table> 元素的子元素,出現在 <caption>、<colgroup> 和 <thead> 元素之後。
<tfoot>…</tfoot>:用于組合 HTML 表格的頁腳内容。該元素必須作為 <table> 元素的子元素,出現在 <caption>、<colgroup> 和 <thead> 元素之後,<tbody> 和 <tr> 元素之前。
注意:<thead>、<tbody>、<tfoot> 元素應該結合起來使用,用來規定表格的各個部分。通過使用這些元素,使浏覽器有能力支援獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長表格被列印時,表格的表頭和頁腳可被列印在包含表格資料的每張頁面上。在使用這3個元素時,在内部必須包含一個或者多個 <tr> 标簽。
帶有标題的表格:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>表格</title>
6 <style>
7 caption{
8 font-size:20px;
9 font-weight:bold;
10 margin-bottom:10px;
11 }
12 table,th,td{
13 border:2px solid black;
14 padding:5px;
15 }
16 .tab{
17 width:40%;
18 border-collapse:collapse;
19 }
20 .tab th{
21 background:yellow;
22 }
23 .tab td{
24 text-align:center;
25 background:lightgreen;
26 }
27 </style>
28 </head>
29 <body>
30 <table border="1" class="tab">
31 <caption>商品清單</caption>
32 <thead>
33 <tr>
34 <th>商品名稱</th>
35 <th>價格(元)</th>
36 <th>生産日期</th>
37 </tr>
38 </thead>
39 <tbody>
40 <tr>
41 <td>洗衣機</td>
42 <td>1999.00</td>
43 <td>2016-2-1</td>
44 </tr>
45 <tr>
46 <td>電視機</td>
47 <td>3999.00</td>
48 <td>2016-2-2</td>
49 </tr>
50 <tr>
51 <td>電冰箱</td>
52 <td>2999.00</td>
53 <td>2016-2-8</td>
54 </tr>
55 </tbody>
56 </table>
57 </body>
58 </html>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
CSS 的 border-collapse 屬性是表格屬性, 可以設定表格的邊框是否合并為一條,還是像在标準的 HTML 中那樣分開顯示。預設值為 separate 邊框分開,不會忽略 border-spacing 和 empty-cells 屬性。collapse 邊框合并,如果相鄰,則共用一個邊框,會忽略 border-spacing 和 empty-cells 屬性。border-spacing 屬性設定相鄰單元格的邊框間的距離,僅用于"邊框分開"樣式。用于規定相鄰單元的邊框之間的距離,不允許負值,如果設定1個參數,定義的是水準和垂直間距。如果是2個參數,那麼第一個設定水準間距,而第二個設定垂直間距。empty-cells 屬性設定是否顯示表格中的空單元格,僅用于"邊框分開"樣式。預設值為 show 表示空單元格顯示邊框。hide 為不在空單元格周圍顯示邊框。
表格表頭豎直顯示:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <table border="1">
2 <caption>商品清單</caption>
3 <tr>
4 <th>商品名稱</th>
5 <td>洗衣機</td>
6 <td>電視機</td>
7 <td>電冰箱</td>
8 </tr>
9 <tr>
10 <th>價格(元)</th>
11 <td>1999.00</td>
12 <td>3999.00</td>
13 <td>2999.00</td>
14 </tr>
15 <tr>
16 <th>生産日期</th>
17 <td>2016-2-2</td>
18 <td>2016-2-8</td>
19 <td>2010-2-10</td>
20 </tr>
21 </table>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
<th> 和 <td> 元素有2個重要屬性 rowspan 和 colspan,rowspan 用于設定單元格可橫跨的行數。colspan 用于設定單元格可橫跨的列數。
跨行跨列的表格:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>表格</title>
6 <style>
7 caption{
8 font-size:20px;
9 font-weight:bold;
10 margin-bottom:10px;
11 }
12 table,th,td{
13 border:2px solid black;
14 padding:10px;
15 }
16 .tab{
17 width:40%;
18 border-collapse:collapse;
19 }
20 .tab th{
21 background:yellow;
22 }
23 .tab td{
24 text-align:center;
25 background:lightgreen;
26 }
27 </style>
28 </head>
29 <body>
30 <table border="1" class="tab">
31 <caption>促銷資訊</caption>
32 <thead>
33 <tr>
34 <td colspan="3" style="text-align:left;font-weight:bold;">新華書店</td>
35 </tr>
36 <tr>
37 <th>類 目</th>
38 <th>書 名</th>
39 <th>價 格(元)</th>
40 </tr>
41 </thead>
42 <tbody>
43 <tr>
44 <td rowspan="3">圖書</td>
45 <td>HTML5 基礎</td>
46 <td>29.00</td>
47
48 </tr>
49 <tr>
50 <td>CSS3 精通</td>
51 <td rowspan="2">52.00</td>
52 </tr>
53 <tr>
54 <td>JS 精華</td>
55 </tr>
56 <tr>
57 <td>數位</td>
58 <td colspan="2">一律半價</td>
59 </tr>
60 </tbody>
61 </table>
62 </body>
63 </html>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
轉載于部落格園彼岸時光
http://www.cnblogs.com/Mtime/p/5184674.html