目錄

1. <table> 標(biāo)簽：在HTML 中定義表格布局。

2. <form> 標(biāo)簽：用于創(chuàng)建 HTML 表單。

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

1. <table> 標(biāo)簽

1.1 說(shuō)明

在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> ：定義一個(gè)表格行；

<th></th> ：定義一個(gè)表格頭；若是純文字，默認(rèn)會(huì)以粗體的樣式表現(xiàn)。

<tbody></tbody> ：可以理解為表格的內(nèi)容區(qū)域，在Chrome、FF瀏覽器通過(guò)DOM進(jìn)行表格動(dòng)態(tài)插入行的時(shí)候，要使用這個(gè)。如果不進(jìn)行DOM操作，可不用添加。

<td></td> ：定義一個(gè)單元格；

1.4 屬性

table 屬性：

　　border ：定義表格的邊框?qū)挾�，默認(rèn)為0，即無(wú)邊框。

　　title ：表格的提示信息，當(dāng)鼠標(biāo)移到表格上方時(shí)，所提示的信息。

th、td 屬性：

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

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

1.5 示例

<table border=0 title="測(cè)試">
    <caption> 表格標(biāo)題</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> 標(biāo)簽

2.1 說(shuō)明

<form> 標(biāo)簽用于創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset和 label 元素 等。

2.2 屬性

action {URL}：一個(gè)URL地址；指定form表單向何處發(fā)送數(shù)據(jù)。

enctype {string}：規(guī)定在發(fā)送表單數(shù)據(jù)之前，如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。

指定的值有：application/x-www-form-urlencoded ：在發(fā)送前編碼所有字符（默認(rèn)為此方式）；

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

method {get/post}：指定表單以何種方式發(fā)送到指定的頁(yè)面。

指定的值有：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">賬號(hào)：</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 應(yīng)用場(chǎng)景

表單主要用于向服務(wù)器傳輸數(shù)據(jù)；如常見(jiàn)的登錄、注冊(cè)頁(yè)面。

3. form 表單提交方式

3.1 get 方式

3.1.1 說(shuō)明

form表單里所填的值，附加在action指定的URL后面，做為URL鏈接而傳遞。

3.1.2 示例

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

賬號(hào)：admin

密碼：123456

點(diǎn)擊提交后：URL變?yōu)椋?/span>

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

變量提交的樣式為：html元素的name屬性=提交的值。多個(gè)變量，以 & 符號(hào)隔開(kāi)。

3.2 post 方式

3.2.1 說(shuō)明

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

3.2.2 示例

同上面get方式一樣。

賬號(hào)：admin

密碼：123456

點(diǎn)擊提交后：URL變?yōu)?/span>

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

可看到只是action指定的URL，參數(shù)并沒(méi)有附加在URL后面。

通過(guò)Fiddler軟件，可以查看到HTML Header區(qū)域：有個(gè)名為WebKitFormBoundary2T7xmZEtMRQeAhNh 的對(duì)象

查看【Raw】區(qū)域，可看見(jiàn)里面包含了提交的變量

3.3 get 與 post 的區(qū)別

　　①數(shù)據(jù)的查詢：比如瀏覽論壇時(shí)，URL一般包含了分類、頁(yè)碼數(shù)、每頁(yè)記錄數(shù)等信息。 get 方式，能一目了然的看到所要查詢的信息(條件)。 post 因?yàn)殡[藏掉了這些信息，不方便進(jìn)行檢驗(yàn)查詢條件。

　�、诿舾袛�(shù)據(jù)的提交(安全性)：對(duì)一項(xiàng)記錄，進(jìn)行更改、添加操作時(shí)，比如注冊(cè)用戶、更改用戶資料等。get 方式附加在URL上，會(huì)泄露掉敏感的消息。 post 方式，能隱藏掉敏感的信息。

　�、鄞髷�(shù)據(jù)文本傳遞：get 雖然方便查詢，但由于是附加在URL上，各瀏覽器對(duì)URL也有個(gè)長(zhǎng)度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像沒(méi)此限制。

以上就是html中關(guān)于table以及form表單標(biāo)簽的詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！