本篇主要介紹 table、form標(biāo)簽以及表單提交方式。

目錄

1.?

標(biāo)簽：在HTML 中定義表格布局。

2.?

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

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

?

1. 標(biāo)簽 1.1 說(shuō)明

在HTML 中定義表格布局。

1.2格式

　　 　　 　　 　　　　 　　　　 　　

?

1.3 包含的元素

：表頭信息。

：定義一個(gè)表格行；

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

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

：定義一個(gè)單元格；

?

1.4 屬性

table?屬性：

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

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

th、td?屬性：

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

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

?

1.5 示例

    
 表格標(biāo)題
    

        
姓名
        
年齡
    
    

        
張三
        
22
    
    

        

        

    

?

?

2.? 標(biāo)簽 2.1 說(shuō)明

標(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 示例

?

    

        

            
賬號(hào)：
            

        
        

            
密碼：
            

        
        

            

                
                
            
        
    
?

?

?

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)椋?/p>

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)?/p>

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)此限制。

?

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

本篇文章：1.5??table、form表單標(biāo)簽的介紹

Web開(kāi)發(fā)之路系列文章

1.HTML

　　1.1?HTML頁(yè)面源代碼布局介紹

　　1.2?HTML基礎(chǔ)控件介紹

　　1.3?iframe 和?frameset 的區(qū)別

　　1.4?name、id、class 的區(qū)別

　　1.5?table、form表單標(biāo)簽的介紹以及get和post提交方式

　　1.6?HTML kbd鍵盤(pán)元素

　　1.7?HTML 鼠標(biāo)坐標(biāo)和元素坐標(biāo)

2.CSS 層疊樣式表

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

　　2.2?CSS HTML元素布局及Display屬性

　　2.3?CSS Float 浮動(dòng)屬性

　　2.4?CSS Position 定位屬性

3.JavaScript介紹

　　3.1?JavaScript var關(guān)鍵字、變量的狀態(tài)、異常處理、命名規(guī)范等介紹

　　3.2?JavaScript function函數(shù)種類

　　3.3?JavaScript Array對(duì)象

　　3.4?JavaScript Date對(duì)象

　　3.5?JavaScript Math和Number對(duì)象

　　3.6?JavaScript String對(duì)象

　　3.7?JavaScript Object對(duì)象

　　3.8?JavaScript 自定義對(duì)象

　　3.9?JavaScript 對(duì)象屬性介紹

　　3.10?JavaScript?開(kāi)發(fā)規(guī)范

4.BOM

　　4.1?HTML BOM Browser對(duì)象

　　4.2?HTML 獲取屏幕、瀏覽器、頁(yè)面的高度寬度

　　4.3?HTML URL地址解析

5.DOM

　　5.1?HTML DOM 介紹

　　5.2?HTML DOM 對(duì)象

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

　　5.4?HTML 事件(二) 事件的注冊(cè)與注銷

　　5.5?HTML 事件(三) 事件流與事件委托

　　5.6?HTML 事件(四) 模擬事件操作

6.HTML5

　　6.1?HTML5 介紹

?　 ?6.2?HTML5 語(yǔ)義元素(一)頁(yè)面結(jié)構(gòu)

?　 ?6.3?HTML5 語(yǔ)義元素(二)文本內(nèi)容

　　6.4?HTML5 input元素新的特性

　　6.5?HTML5 progress和meter控件?

　　6.6?HTML5 sessionStorage會(huì)話存儲(chǔ)

　　6.7?HTML5?localStorage本地存儲(chǔ)?

　　6.8?HTML5 元素屬性介紹

7.ExtJS 4.2

　　7.1?ExtJS 4.2 介紹

　　7.2?ExtJS 4.2 第一個(gè)程序

　　7.3?ExtJS 4.2 組件介紹

　　7.4?ExtJS 4.2 組件的查找方式

　　7.5?ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(一)主頁(yè)搭建

　　7.6?ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(二)數(shù)據(jù)展示和查詢

　　7.7?ExtJS 4.2 業(yè)務(wù)開(kāi)發(fā)(三)數(shù)據(jù)添加和修改

　　7.8?ExtJS 4.2?Grid組件的單元格合并

　　7.9?ExtJS 4.2 Date組件擴(kuò)展：添加清除按鈕

　　7.10?ExtJS 4.2 評(píng)分組件

8.CSS 3

　　8.1?CSS3 border-radius邊框圓角

　　8.2?CSS3?background-image背景圖片相關(guān)介紹

?

只是記錄了自己在學(xué)習(xí)、使用Web前端內(nèi)容時(shí)的心得和碰到的問(wèn)題。

參考文獻(xiàn)：

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

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