HTML table、form表單標籤的介紹

　　本篇主要介紹 table、form標籤以及表單提交方式。

目錄

1. <table> 標籤：在HTML 中定義表格佈局。

2. <form> 標籤：用於建立 HTML 表單。

3. 表單提交方式：介紹get、post方法。

 

1. <table> 標籤

1.1 說明

在HTML 中定義表格佈局。

1.2格式

<table>
 　　<caption></caption>
 　　<tr> <th></th></tr>
 　　<tbody>
 　　　　<tr><td></td></tr>
 　　　　<tr><td></td><tr>
 　　<tbody>
</table>

 

1.3 包含的元素

<caption></caption>：表頭信息。

<tr></tr> ：定義一個表格行；

<th></th> ：定義一個表格頭；如果純文字，默認會以粗體的樣式表現。

<tbody></tbody> ：能夠理解爲表格的內容區域，在Chrome、FF瀏覽器經過DOM進行表格動態插入行的時候，要使用這個。若是不進行DOM操做，可不用添加。

<td></td> ：定義一個單元格；

 

1.4 屬性

table 屬性：

　　border ：定義表格的邊框寬度，默認爲0，即無邊框。

　　title ：表格的提示信息，當鼠標移到表格上方時，所提示的信息。

th、td 屬性：

　　colspan : 表示橫向合併單元格 ( )

　　rowspan ：表示縱向合併單元格 (  )

 

1.5 示例

<table border=0 title="測試">
    <caption> 表格標題</caption>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type=text /></td>
        <td><input type=text /></td>
    </tr>
</table>

 

 

2. <form> 標籤

2.1 說明

<form> 標籤用於建立 HTML 表單。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含 menus、textarea、fieldset和 label 元素 等。

 

2.2 屬性

action {URL}：一個URL地址；指定form表單向何處發送數據。

enctype {string}：規定在發送表單數據以前，如何對錶單數據進行編碼。

指定的值有：application/x-www-form-urlencoded ：在發送前編碼全部字符（默認爲此方式）；

　　　　　　multipart/form-data ：不對字符編碼。使用包含文件上傳控件的表單時，必須使用該值

method {get/post}：指定表單以何種方式發送到指定的頁面。

指定的值有：get ：form表單裏所填的值，附加在action指定的URL後面，作爲URL連接而傳遞。

　　　　　　post ：form表單裏所填的值，附加在HTML Headers上。

 

2.3 示例

 

<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
    <table>
        <tr>
            <td><label for="txtname">帳號：</label></td>
            <td><input type="text" id="txtname" name="login_username" /></td>
        </tr>
        <tr>
            <td><label for="txtpswd">密碼：</label></td>
            <td><input type="password" id="txtpswd" name="login_pswd" /></td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="reset" />
                <input type="submit" />
            </td>
        </tr>
    </table>
</form> 

 

 

2.4 應用場景

表單主要用於向服務器傳輸數據；如常見的登陸、註冊頁面。

 

3. form 表單提交方式

3.1 get 方式

3.1.1 說明

form表單裏所填的值，附加在action指定的URL後面，作爲URL連接而傳遞。

3.1.2 示例

在上面的form代碼中輸入以下：

帳號：admin 

密碼：123456

點擊提交後：URL變爲：

http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

變量提交的樣式爲：html元素的name屬性=提交的值。多個變量，以 & 符號隔開。

 

3.2 post 方式

3.2.1 說明

form表單裏所填的值，附加在HTML Headers上。

3.2.2 示例

同上面get方式同樣。

帳號：admin 

密碼：123456

點擊提交後：URL變爲

http://localhost:4778/ashx/login.ashx

可看到只是action指定的URL，參數並無附加在URL後面。

經過Fiddler軟件，能夠查看到HTML Header區域：有個名爲WebKitFormBoundary2T7xmZEtMRQeAhNh的對象

 查看【Raw】區域，可看見裏面包含了提交的變量

 

3.3 get 與 post 的區別

　　①數據的查詢：好比瀏覽論壇時，URL通常包含了分類、頁碼數、每頁記錄數等信息。 get 方式，能一目瞭然的看到所要查詢的信息(條件)。 post 由於隱藏掉了這些信息，不方便進行檢驗查詢條件。

　　②敏感數據的提交(安全性)：對一項記錄，進行更改、添加操做時，好比註冊用戶、更改用戶資料等。get方式附加在URL上，會泄露掉敏感的消息。 post 方式，能隱藏掉敏感的信息。

　　③大數據文本傳遞：get 雖然方便查詢，但因爲是附加在URL上，各瀏覽器對URL也有個長度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像沒此限制。

 

==================================系列文章==========================================

本篇文章：1.5  table、form表單標籤的介紹

Web開發之路系列文章

1.HTML

　　1.1 HTML頁面源代碼佈局介紹

　　1.2 HTML基礎控件介紹

　　1.3 iframe 和 frameset 的區別

　　1.4 name、id、class 的區別

　　1.5 table、form表單標籤的介紹以及get和post提交方式

　　1.6 HTML kbd鍵盤元素

　　1.7 HTML 鼠標座標和元素座標

2.CSS 層疊樣式表

　　2.1 CSS 選擇器及各樣式引用方式

　　2.2 CSS HTML元素佈局及Display屬性

　　2.3 CSS Float 浮動屬性

　　2.4 CSS Position 定位屬性

3.JavaScript介紹

　　3.1 JavaScript var關鍵字、變量的狀態、異常處理、命名規範等介紹

　　3.2 JavaScript function函數種類

　　3.3 JavaScript Array對象

　　3.4 JavaScript Date對象

　　3.5 JavaScript Math和Number對象

　　3.6 JavaScript String對象

　　3.7 JavaScript Object對象

　　3.8 JavaScript 自定義對象

　　3.9 JavaScript 對象屬性介紹

　　3.10 JavaScript 開發規範

4.BOM

　　4.1 HTML BOM Browser對象

　　4.2 HTML 獲取屏幕、瀏覽器、頁面的高度寬度

　　4.3 HTML URL地址解析

5.DOM

　　5.1 HTML DOM 介紹

　　5.2 HTML DOM 對象

　　5.3 HTML 事件(一) 事件的介紹

　　5.4 HTML 事件(二) 事件的註冊與註銷

　　5.5 HTML 事件(三) 事件流與事件委託

　　5.6 HTML 事件(四) 模擬事件操做

6.HTML5

　　6.1 HTML5 介紹

　　6.2 HTML5 語義元素(一)頁面結構

　　6.3 HTML5 語義元素(二)文本內容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件

　　6.6 HTML5 sessionStorage會話存儲

　　6.7 HTML5 localStorage本地存儲

　　6.8 HTML5 元素屬性介紹

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介紹

　　7.2 ExtJS 4.2 第一個程序

　　7.3 ExtJS 4.2 組件介紹

　　7.4 ExtJS 4.2 組件的查找方式

　　7.5 ExtJS 4.2 業務開發(一)主頁搭建

　　7.6 ExtJS 4.2 業務開發(二)數據展現和查詢

　　7.7 ExtJS 4.2 業務開發(三)數據添加和修改

　　7.8 ExtJS 4.2 Grid組件的單元格合併

　　7.9 ExtJS 4.2 Date組件擴展：添加清除按鈕

　　7.10 ExtJS 4.2 評分組件

8.CSS 3

　　8.1 CSS3 border-radius邊框圓角

　　8.2 CSS3 background-image背景圖片相關介紹

　　

　　只是記錄了本身在學習、使用Web前端內容時的心得和碰到的問題。

　　參考文獻：

　　1）http://www.w3school.com.cn/

　　2）《JavaScript權威指南(第六版)》