第6章表格與表單

第六章表格與表單表格的創(chuàng)建表單相關(guān)標(biāo)記表格樣式的控制表單樣式的控制6.1表格標(biāo)記6.2CSS控制表格樣式6.3認(rèn)識(shí)表單6.4創(chuàng)建表單6.5表單控件6.6CSS控制表單樣式6.7階段案例-制作注冊界面6.1表格標(biāo)記6.1.1創(chuàng)建表格在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)記。創(chuàng)建表格的基本語法格式如下：<table><tr> <td>單元格內(nèi)的文字</td> ...</tr>...</table>6.1表格標(biāo)記6.1.1創(chuàng)建表格在上面的語法中包含三對HTML標(biāo)記，分別為<table></table>、<tr></tr>、<td></td>，他們是創(chuàng)建表格的基本標(biāo)記，缺一不可，下面對他們進(jìn)行具體地解釋。<table></table>：用于定義一個(gè)表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標(biāo)記中，在<table></table>中包含幾對<tr></tr>，就有幾行表格。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。6.1表格標(biāo)記6.1.1創(chuàng)建表格注意:學(xué)習(xí)表格的核心是學(xué)習(xí)<td></td>標(biāo)記，他就像一個(gè)容器，可以容納所有的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中只能嵌套<td></td>，直接在<tr></tr>標(biāo)記中輸入文字的做法是不被允許的。6.1表格標(biāo)記6.1.2<table>標(biāo)記的屬性<table>標(biāo)記的屬性如下表所示。屬性名含義常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"無邊框）

像素值cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認(rèn)為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認(rèn)為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址6.1表格標(biāo)記6.1.2<table>標(biāo)記的屬性1、border屬性在<table>標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認(rèn)為0。代碼如下：2、cellspacing屬性cellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認(rèn)為2px。代碼如下：<tableborder=“20”cellspacing=“20”>

<tableborder=“20”>

6.1表格標(biāo)記6.1.2<table>標(biāo)記的屬性3、cellpadding屬性cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認(rèn)為1px。代碼如下：注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離，cellspacing則指的是外部單元格與單元格之間的距離?？梢越Y(jié)合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。<tableborder=“20”cellspacing=“20”cellpadding=“20”>

6.1表格標(biāo)記6.1.2<table>標(biāo)記的屬性4、width與height屬性默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對其應(yīng)用寬度屬性width或高度屬性height。注意:當(dāng)為表格標(biāo)記<table>同時(shí)設(shè)置width、height和cellpadding屬性時(shí)，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設(shè)置寬高的情況下測試cellpadding屬性。6.1表格標(biāo)記6.1.2<table>標(biāo)記的屬性5、align屬性align屬性用于定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當(dāng)對<table>標(biāo)記應(yīng)用align屬性時(shí)，控制的為表格的水平對齊方式，單元格中的內(nèi)容不受影響。6、bgcolor屬性在<table>標(biāo)記中，bgcolor屬性用于設(shè)置表格的背景顏色。7、background屬性在<table>標(biāo)記中，background屬性用于設(shè)置表格的背景圖像。6.1表格標(biāo)記6.1.3<tr>標(biāo)記的屬性制作網(wǎng)頁時(shí)，有時(shí)需要表格中的某一行特殊顯示，這時(shí)就可以為行標(biāo)記<tr>定義屬性。屬性名含義常用屬性值height設(shè)置行高度

像素值

align設(shè)置一行內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址6.1表格標(biāo)記6.1.3<tr>標(biāo)記的屬性值得一提的是，學(xué)習(xí)<tr>的屬性時(shí)需要注意以下幾點(diǎn)：<tr>標(biāo)記無寬度屬性width，其寬度取決于表格標(biāo)記<table>?？梢詫?lt;tr>標(biāo)記應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對齊方式。雖然可以對<tr>標(biāo)記應(yīng)用background屬性，但是在<tr>標(biāo)記中此屬性兼容問題嚴(yán)重。6.1表格標(biāo)記6.1.4<td>標(biāo)記的屬性在網(wǎng)頁制作過程中，有時(shí)僅僅需要對某一個(gè)單元格進(jìn)行控制，這時(shí)就可以為單元格標(biāo)記<td>定義屬性，其常用屬性如下表所示。屬性名含義常用屬性值width設(shè)置單元格的寬度像素值

height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置單元格的背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)6.1表格標(biāo)記6.1.4<td>標(biāo)記的屬性注意:1、在<td>標(biāo)記的屬性中，重點(diǎn)掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用width屬性設(shè)置寬度時(shí)，該列中的所有單元格均會(huì)以設(shè)置的寬度顯示。3、當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用height屬性設(shè)置高度時(shí)，該行中的所有單元格均會(huì)以設(shè)置的高度顯示。6.1表格標(biāo)記6.1.5<th>標(biāo)記及其屬性表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單，只需用表頭標(biāo)記<th></th>替代相應(yīng)的單元格標(biāo)記<td></td>即可。6.1表格標(biāo)記6.1.6表格的結(jié)構(gòu)在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁腳，具體如下所示：<thead></thead>：用于定義表格的頭部，必須位于<table></table>標(biāo)記中，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。<tfoot></tfoot>：用于定義表格的頁腳，位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后，一般包含網(wǎng)頁底部的企業(yè)信息等。<tbody></tbody>：用于定義表格的主體，位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。6.2CSS控制表格樣式6.2.1CSS控制表格邊框而使用CSS邊框樣式屬性border可以輕松地控制表格的邊框。注意:1、border-collapse屬性的屬性值除了collapse（合并）之外，還可以為separate（分離），默認(rèn)為separate。2、當(dāng)表格的border-collapse屬性設(shè)置為collapse時(shí)，HTML中設(shè)置的cellspacing屬性值無效。3、行標(biāo)記<tr>無border樣式屬性，本書不再做具體的演示，初學(xué)者可以自己測試加深理解。6.2CSS控制表格樣式6.2.2CSS控制單元格邊距使用<table>標(biāo)記的屬性美化表格時(shí)，可以通過cellpadding和cellspacing分別控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離。注意:行標(biāo)記<tr>無內(nèi)邊距屬性padding和外邊距屬性margin，本書不再做具體的演示，初學(xué)者可以自己測試加深理解。6.2CSS控制表格樣式6.2.3CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時(shí)，最終的寬度或高度將取其中的較大者。6.3認(rèn)識(shí)表單在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成，如下圖所示，即為一個(gè)簡單的HTML表單界面及其構(gòu)成。6.3認(rèn)識(shí)表單對于表單構(gòu)成中的表單控件、提示信息和表單域，初學(xué)者可能比較難理解，對他們的具體解釋如下：表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。提示信息：一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。表單域：他相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。6.3認(rèn)識(shí)表單在表單的3部分構(gòu)成中，表單控件是表單的核心，常用的表單控件如下表所示。表單控件描述<input/>表單輸入控件（可定義多種表單項(xiàng)）<textarea></textarea>定義多行文本框<select></select>定義一個(gè)下拉列表（必須包含列表項(xiàng)）6.4創(chuàng)建表單在HTML中，<form></form>標(biāo)記被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，<form></form>中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：在上面的語法中，<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標(biāo)記<form>的常用屬性。Action在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>6.4創(chuàng)建表單methodmethod屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。namename屬性用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。注意:<form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件。6.5表單控件6.5.1input控件input控件的基本語法格式如下：在上面的語法中，<input/>標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，其常用屬性如下表所示。<inputtype=“控件類型”>6.5表單控件6.5.1input控件屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)6.5表單控件6.5.2textarea控件如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>6.5表單控件6.5.2textarea控件在上面的語法格式中，cols和rows為<textarea>標(biāo)記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。注意:各瀏覽器對cols和rows屬性的理解不同，當(dāng)對textarea控件應(yīng)用cols和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。6.5表單控件6.5.3select控件下圖為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉符號“

”時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件。6.5表單控件6.5.3select控件使用select控件定義下拉菜單的基本語法格式如下：在上面的語法中，<select></select>標(biāo)記用于在表單中添加一個(gè)下拉菜單，<option></option>用于定義下拉菜單中的具體選項(xiàng)，每對<select></select>中至少應(yīng)包含一對<option></option>。<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</se