柚子快報(bào)邀請(qǐng)碼778899分享：第三章 表格布局與表單交互

http://yzkb.51969.com/

3.1表格概述

3.1.1表格的結(jié)構(gòu)

表格是由行和列組成的二維表，而每行又由一個(gè)或多個(gè)單元格組成，用于放置數(shù)據(jù)或他內(nèi)容。表格中的單元格是行與列的交叉部分，是組成表格的最基本單元。表格中的內(nèi)容按照相應(yīng)的行或列進(jìn)行分類和顯示。

3.1.2表格的基本語法

...

注：常用表格標(biāo)記形式及說明表

3.2表格屬性設(shè)置

?表格標(biāo)記的屬性，取值及說明表

?3.2.1表格邊框?qū)傩?/p>

注：?(1)border屬性。用于設(shè)置邊框的粗細(xì)，單位是像素。 ? ? ? ? (2)bordereolor屬性。用于設(shè)置表格邊框的顏色，可以使用rgb函數(shù)、十六進(jìn)制數(shù)和顏色英文名稱。 ? ? ? ? (3)bordercolorlight屬性。用于設(shè)置表格亮邊框，對(duì)表格左上邊框生效。

? ? ? ??(4)bordercolordark屬性。用于設(shè)置表格暗邊框，對(duì)表格右下邊框生效。

3.2.2表格的寬度和高度屬性

注：(1)width。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的寬度。

? ? ? ?(2)height。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的高度，設(shè)置表格標(biāo)記中的高度與寬度為百分比時(shí)，表格會(huì)跟隨瀏覽器窗口的改而自動(dòng)調(diào)整。

?3.2.3表格背景顏色與背景圖像屬性

...

注：?(1)bgcolor?？梢杂胷gb 函數(shù)、十六進(jìn)制、英文顏色名稱來設(shè)置背景顏色。

? ? ? ? (2)background。設(shè)置背景圖像，圖像的路徑可以是絕對(duì)路徑或相對(duì)路徑。

? ? ? ? (3)同時(shí)設(shè)置背景顏色和背景圖像屬性時(shí)，背景圖像會(huì)部分或完全覆蓋背景顏色。

3.2.4表格邊框樣式屬性

注：frame（表格邊框）和rules（表格內(nèi)部邊框）常見屬性值及說明

3.2.5?表格單元格間距、單元格邊距屬性

注：?(1)celspacing屬性?？梢愿淖儽砀駟卧裰g的間隔，值的單位為像素或百分比，默認(rèn)值為 2px。 ? ? ? ? (2)ellpadding屬性?？梢栽黾颖砀駟卧竦膬?nèi)容與內(nèi)部邊框之間的距離，值的單位為像素或百分比。

3.2.6表格水平對(duì)齊屬性

通過設(shè)置表格標(biāo)記的align屬性，可以設(shè)定表格在水平方向上的對(duì)齊方式。對(duì)齊方式有居左(默認(rèn)）、居中、居右3種。

3.2.7?設(shè)置表格的(tr)標(biāo)記行的屬性

表格行tr?標(biāo)記的屬性用于設(shè)置表格某一行的樣式。

...

注：left（左對(duì)齊）center（居中對(duì)齊）right（右對(duì)齊）。top（頂部對(duì)齊）middle（行內(nèi)容居中對(duì)齊）bottom（行內(nèi)容底部對(duì)齊）。其中行垂直居中對(duì)齊屬性值與行水平居中對(duì)齊屬性值不同。

tr標(biāo)記的屬性表

3.2.8?設(shè)置單元格的屬性

表格的列td標(biāo)記的屬性可以設(shè)置表格單元格的顯示風(fēng)格。

td標(biāo)記的屬性表

3.2.9?表格單元格跨行、跨列屬性

1.單元格跨行

...

注：?rowspan屬性可以設(shè)置單元格跨行合并。通過 rowspan="n"(n是正整數(shù))，可以設(shè)置某一單元格跨n行，當(dāng)前行下的n-1行內(nèi)的單元格數(shù)量都需要減少一個(gè)，即少定義一個(gè)td 標(biāo)記。

2.單元格跨列

...

注：colspan 屬性可以設(shè)置單元格跨列合并。通過 colspan="n"(n是正整數(shù))，可以設(shè)置某一單元格跨n列，當(dāng)前行內(nèi)的單元格數(shù)量需要減少n-1個(gè)，即刪除 n-1 個(gè)?td 標(biāo)記。

3.3表格嵌套

...

...

3.4表單

?一個(gè)完整的交互表單由兩部分組成:一是客戶端包含的表單頁面，用于填寫瀏覽者進(jìn)行交互的信息:另一個(gè)是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息，瀏覽者在表單中輸入信息，然后將這些信息提交給服務(wù)器:服務(wù)器中的應(yīng)用程序會(huì)對(duì)這些信息進(jìn)行處理響應(yīng)，這樣就完成了瀏覽者和服務(wù)器之間的交互。

3.4.1表單標(biāo)記

表單form 標(biāo)記為成對(duì)標(biāo)記，以

注：表單標(biāo)記屬性，取值及說明

?3.4.2 定義域和域標(biāo)題

利用fieldset標(biāo)記可以在網(wǎng)頁上定義域，在表單中使用域可以將表單的相關(guān)元素進(jìn)行分組，fieldset標(biāo)記將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。當(dāng)一組表單元素放到fieldset 標(biāo)記內(nèi)時(shí)，瀏覽器會(huì)以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果或者可創(chuàng)建一個(gè)子表單來處理這些元素。legend標(biāo)記為fieldset標(biāo)記定義域標(biāo)題。

3.4.3 表單信息輸入

表單的主要功能是為用戶提供輸入信息的接口，將輸人信息發(fā)送到服務(wù)器并等待服務(wù)響應(yīng)。表單中輸入信息的標(biāo)記是input 標(biāo)記，可以輸人一行信息。input 標(biāo)記是單個(gè)標(biāo)記。

?注：表單信息輸入標(biāo)記屬性、取值及說明

?1.單行文本輸入框

設(shè)置input 標(biāo)記的type 屬性值為text，可以實(shí)現(xiàn)向表單中插入一個(gè)單行文本框。在單行文本框中可以輸人任意類型的數(shù)據(jù)，但是輸入的數(shù)據(jù)只能單行顯示，不能換行。

注：文本輸入框標(biāo)記屬性、取值及說明

?2.密碼輸入框

設(shè)置input 標(biāo)記的type屬性值為 password,可以實(shí)現(xiàn)向表單中插入一個(gè)密碼輸人框。密碼輸人框中可以輸人任意類型的數(shù)據(jù)，與單行文本輸入框有所不同，這些數(shù)據(jù)不是實(shí)時(shí)地顯示在頁面上，而是被顯示字符“·”所取代，這樣設(shè)計(jì)可以保障用戶輸入的密碼不被泄露。

3.復(fù)選框?

設(shè)置input標(biāo)記的type屬性值為checkbox，可以實(shí)現(xiàn)向表單中插入一個(gè)復(fù)選框，用戶利用復(fù)選框在網(wǎng)頁上設(shè)置多項(xiàng)選擇。

注：復(fù)選框?qū)傩?、取值及說明

由于復(fù)選擇框可以支持多選，每一個(gè)復(fù)選框都是不同的，一組復(fù)選框的所有name屬性應(yīng)該不同，value 屬性值也應(yīng)該不同。?

4.單選按鈕

設(shè)置 input 標(biāo)記的type 屬性值為radio，可以實(shí)現(xiàn)向表單中插入一個(gè)單選按鈕，用戶可利用單選按鈕在網(wǎng)頁上為某一選擇設(shè)置多個(gè)單選項(xiàng)。

注：由于單選按鈕必須是唯一的，在一組單選按鈕中，只能選擇一個(gè)單選按鈕，所以一組單選按鈕的所有name屬性值必須相同，value屬性取值應(yīng)該不同。

5.圖像按鈕

設(shè)置input標(biāo)記的type屬性值為image，可以實(shí)現(xiàn)向表單中插人一個(gè)圖像按鈕，用戶可利用圖像按鈕在網(wǎng)頁中插入一張圖像，通過src屬性加載圖像。

注：圖像按鈕屬性、取值及說明

?6.提交按鈕

設(shè)置 input 標(biāo)記的type 屬性值為 submit,可以實(shí)現(xiàn)向表單中插入一個(gè)提交按鈕，,鈕用于將表單的信息提交至服務(wù)器進(jìn)行處理。

注：?

在表單中插人提交按鈕時(shí)，如果不設(shè)置屬性value的值，它的初始值是“提交查詢鈕”。所以一定要給 value 屬性賦值。

7.重置按鈕

設(shè)置input標(biāo)記的type屬性值為reset，可以實(shí)現(xiàn)向表單中插入一個(gè)重置按鈕，重置按用于將表單中所有的輸人信息清空，然后讓用戶可以重新填寫。

?8.普通按鈕

設(shè)置imput標(biāo)記的type屬性值為button，可以實(shí)現(xiàn)向表單中插入一個(gè)普通按鈕。普通鈕在網(wǎng)頁設(shè)計(jì)中非常有用，如果不通過表單提交按鈕來處理事件，則可以給普通按鈕綁定事件代碼來實(shí)現(xiàn)所需的功能。

注: 普通按鈕屬性，取值及說明

9.文件選擇框?

設(shè)置input標(biāo)記的type屬性值為file，可以實(shí)現(xiàn)向表單中插入一個(gè)文件選擇框。

注： name，定義imput標(biāo)記的名稱。頁面上會(huì)自動(dòng)添加一個(gè)文本輸入框和一個(gè)“瀏覽…”按鈕。單擊“瀏覽…”按鈕可以從“選擇要加載的文件”對(duì)話框選擇某一個(gè)文件，然后自動(dòng)將文件名稱回填到文本輸人框中。

10.隱藏框

設(shè)置input 標(biāo)記的type屬性值為 hidden，可以實(shí)現(xiàn)向表單中插入一個(gè)隱藏框，用戶提交表單時(shí)，隱藏框的信息也會(huì)一起提交到服務(wù)器，但隱藏框在網(wǎng)頁中是不可見的。

注:隱藏框?qū)傩?，取值及說明

3.4.4 多行輸入框?

textarea 標(biāo)記可以向表單中插入多行文本輸入框。多行文本輸入框可以用來輸入較多的文字信息，而且可以換行，并將這些信息提交到服務(wù)器。

初始信息內(nèi)容

注：默認(rèn)情況下，當(dāng)用戶在文本區(qū)域中輸入文本后，瀏覽器會(huì)將它們按照輸人時(shí)的狀態(tài)發(fā)送給服務(wù)器。只有在用戶按下Enter鍵的地方生成換行。

多行文本輸入框?qū)傩?、取值及說明

?3.4.5 下拉列表框

下拉列表可以在表單中接收用戶的輸人。

文字信息1

文字信息 2

...

注：select標(biāo)記是成對(duì)標(biāo)記，option標(biāo)記是單個(gè)標(biāo)記，但應(yīng)該把它補(bǔ)成成對(duì)標(biāo)記，結(jié)構(gòu)更為清晰。select 標(biāo)記有name，size 和 multiple 等屬性。option 標(biāo)記有 value 和 selected 等屬性。select標(biāo)記與 option 標(biāo)記必須配合使用。每一選項(xiàng)必須指定一個(gè)顯示的文本和一個(gè) value值，顯示文本通常附在 option 標(biāo)記后面。

select 和 option 標(biāo)記屬性、取值及說明

3.5綜合案例----表格與表單?

案例一：達(dá)維工作室“聯(lián)系我們”子頁

?采用嵌套表格制作達(dá)維工作室“聯(lián)系我們”子頁

代碼如下：

運(yùn)行結(jié)果如圖：

?案例二：用戶注冊(cè)信息

利用表單制作一個(gè)“用戶注冊(cè)信息”表。

代碼如下：

運(yùn)行結(jié)果如圖：

柚子快報(bào)邀請(qǐng)碼778899分享：第三章 表格布局與表單交互

http://yzkb.51969.com/

推薦文章