HTML table、form表單標籤的介紹

標籤：3.1.1   查詢   bsp   會話   常見   等等   相關   資料   委託   

　　本篇主要介紹 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權威指南(第六版)》

HTML table、form表單標籤的介紹