easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
《HTML5從入門到精通》
◎千鋒教育高教產品研發部/編著
(清華大學出版社出版)
目 錄
第3章 HTML表格與表單............................................................... 1
3.1 HTML表格................................................................................. 1
3.1.1 表格基本結構........................................................................ 1
3.1.2 表頭與標題............................................................................ 1
3.1.3 表格語義化............................................................................ 1
3.1.4 合并行與列............................................................................ 1
3.1.5 單元格邊距與間距................................................................ 1
3.1.6 表格其它屬性........................................................................ 1
3.1.7 總結........................................................................................ 1
3.2 HTML表單............................................................................. 5
3.2.1
標簽........................................................................ 23.2.2 標簽....................................................................... 9
3.2.3 標簽 ................................................................12
3.2.4 標簽..................................................................... 12
3.2.5 標簽....................................................................... 12
3.2.6 總結...................................................................................... 12
3.3 本章小結................................................................................... 5
3.4 習題........................................................................................... 5
第3章 HTML表格與表單
本章學習目標
掌握HTML表格的基本使用
掌握HTML表單的基本使用
了解前端與后端如何交互與通信
表格主要用途是以網格的形式顯示二維數據，HTML早期版本中，常用表格來控制頁面的內容布局，表單是HTML中獲取用戶輸入的手段。它對于Web應用系統極其重要。表單的出現則使網頁從單向的信息傳遞發展到能夠與用戶進行交互對話。本章將對表格的和表單的相關知識進行詳細講解。
3.1 HTML表格
生活中，經常使用表格來統計數據和信息，能更清晰地顯示數據或信息，同理在在制作網頁時 為了有條理的顯示網頁中的元素，可以使用表格對網頁進行布局和規劃，可以給瀏覽者展示大量且清晰的排列數據，表格在網頁中應用的及其廣泛，下面先來看下網頁中表格的展現，如圖3.1、圖3.2所示。
圖3.1 網頁中表格展示效果
圖3.2 網頁中表格展示效果
3.1.1 表格基本結構
每個表格有三個必須的標簽，
三個標簽，用來創建表格，其語法格式如下。
…… |
上面三個標簽是創建表格的基本標簽，其中
標簽用于定義一個表格。標簽用于定義表格中的一行，必須嵌套在標簽中，在標簽中包含幾對，表示該表格有幾行。標簽用于定義表格中的單元格，必須嵌套在標簽中，一對包含幾對，表示該行中有多少個單元格(列)。接下來通過案例來演示定義表格標簽，如例3-1所示。
1
2
3
4
5
HTML表格6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.3所示。
圖3.3 表格標簽展示效果
表格內除了可以添加文本外，還可以添加其它標簽元素，如：圖片、列表、段落等。接下來通過案例來演示，如例3-2所示。
1
2
3
4
5
HTML表格6
7
8
9
10
11
今天天氣晴，溫度適宜，適合出行。
12
13
14
15
今天有雨，出門記得帶傘。16
17
18
19
運行結果如圖3.4所示。
圖3.4 帶圖片和段落的表格展示效果
例3-1和例3-2中默認情況下表格沒有邊框，如果想要給表格添加邊框，可以設置表格的border屬性，數值為邊框的寬度。接下來通過案例來演示，如例3-3所示。
1
2
3
4
5
HTML表格6
7
8
9
10
11
今天天氣晴，溫度適宜，適合出行。
12
13
14
15
今天有雨，出門記得帶傘。16
17
18
19
運行結果如圖3.5所示。
圖3.5 帶邊框的表格展示效果
3.1.2 表頭與標題
為了使表格的格式更清晰方便讀者查閱，應用表格時經常需要為表格設置表頭，表頭
是單元格的一種標題，其本質還是一種單元格，一般位于表格的第一行或第一列，用來表明這一行或列的內容類別。瀏覽器會將表頭默認以粗體居中的樣式顯示在網頁中。接下來通過案例來演示表格的表頭，如例3-4所示。1
2
3
4
5
表頭與標題6
7
8
9
10
天氣現象11
出行情況12
13
14
15
今天天氣晴，溫度適宜，適合出行。
16
17
18
19
今天有雨，出門記得帶傘。20
21
22
23
運行結果如圖3.6所示。
圖3.6 帶表頭的表格展示效果
標簽和在本質上都是單元格，但這兩種不可以互換使用。th，即“table header(表頭單元格)”。而td，即“table data(單元格)”。表格一般都有一個標題，用來表明表格的內容，一般位于整個表格的第一行，使用
標簽。一個表格只能含有一個表格標題。接下來通過案例來演示表格標題，如例3-5所示。1
2
3
4
5
表頭與標題6
7
8
9
天氣預報10
11
天氣現象12
出行情況13
14
15
16
今天天氣晴，溫度適宜，適合出行。
17
18
19
20
今天有雨，出門記得帶傘。21
22
23
24
運行結果如圖3.7所示。
圖3.7 帶標題的表格展示效果
3.1.3 表格語義化
為了使網頁內容更好的被搜索引擎理解，在使用表格進行布局時，HTML中引入了、
和這三個語義化標簽，用來將表格劃分為頭部、主體和頁腳三部分。用這三個部分來定義網頁中不同的內容，三個標簽的詳細理解如下。標簽：用于定義表格的頭部，位于
標簽中，一般包含網頁的logo和導航等頭部信息。- 標簽：用于定義表格的頁腳，位于標簽中標簽之后，一般包含網頁底部的企業信息等。
- 標簽：用于定義表格的主體，位于標簽中標簽之后，一般包含網頁中除頭部和底部以外的其他內容。
接下來通過案例來演示表格語義化的三個標簽，如例3-6所示。
1
2
3
4
5
表格語義化6
7
8
9
天氣預報10
11
12
天氣現象13
出行情況14
15
16
17
18
19
今天天氣晴，溫度適宜，適合出行。
20
21
22
23
今天有雨，出門記得帶傘。24
25
26
27
28
29
30
運行結果如圖3.8所示。
圖3.8 語義化的表格展示效果
由例3-6可以發現，語義化表格效果上并沒有什么變化，、
和三個標簽不帶任何效果，只是更好提供了語義化的功能，根據表格的需求盡量添加相應的語義化標簽。需要注意、這兩個標簽在一個3.1.4 合并行與列
在word中設計表格時，有時需要將兩個或多個的相鄰單元格組合成一個單元格，即合并單元格的操作。在HTML中，也需要用到“表格合并行”和“表格合并列”。 合并行使用
標簽的rowspan屬性，而合并列則用到標簽的colspan屬性。接下來通過案例來演示表格合并列，如例3-7所示。1
2
3
4
5
合并行與列6
7
8
9
天氣預報10
11
12
日期13
天氣現象14
出行情況15
16
17
18
19
22日星期五20
白天21
22
今天天氣晴，溫度適宜，適合出行。
23
24
25
22日星期五26
夜間27
28
今天有雨，出門記得帶傘。
29
30
31
32
33
34
35
運行結果如圖3.9所示。
圖3.9 和并列的表格展示效果
例3-7中，第12行設置colspan屬性值為2用來合并表格中的兩列單元格。接下來通過案例來演示合并行，如例3-8所示。
1
2
3
4
5
合并行與列6
7
8
9
天氣預報10
11
12
日期13
天氣現象14
出行情況15
16
17
18
19
22日星期五20
白天21
22
今天天氣晴，溫度適宜，適合出行。
23
24
25
夜間26
27
今天有雨，出門記得帶傘。
28
29
30
31
32
33
34
運行結果如圖3.10所示。
圖3.10 和并行的表格展示效果
可以看到，第19行設置rowspan屬性值為2，即合并表格中的兩行單元格。
3.1.5 單元格邊距與間距
表格還有用于控制單元格邊距與間距的屬性，即cellpadding和cellspacing屬性，cellpadding屬性用于設置單元格內容與單元格邊框之間的空白間距，默認為1px.，cellspacing屬性用于設置單元格與單元格邊框之間的空白間距，默認為2px。接下來通過案例來演示cellpadding屬性，如例3-9所示。
1
2
3
4
5
單元格邊距與間距6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.11所示。
圖3.11 cellpadding屬性展示效果
例3-9中，第8行將cellpadding屬性設置為30，即單元格內容和單元格邊框之間的空白間距為30。
接下來通過案例來演示cellspacing屬性，如例3-10所示。
1
2
3
4
5
單元格邊距與間距6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.12所示。
圖3.12 cellspacing屬性展示效果
例3-10中，第8行將cellspacing屬性設置為30，即單元格與單元格之間的距離為30。
3.1.6 表格其他屬性
HTML為表格提供了一系列的屬性，用于控制表格的顯示樣式，除上面
表3.1
接下來將詳細介紹表3.1中的屬性
1. width屬性
width屬性可以設置單元格的寬度，當一列有多個不同width屬性值時，取最大值作為這一列的寬度。接下來通過案例來演示width屬性，如例3-11所示。
1
2
3
4
5
表格其他屬性6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.13所示。
圖3.13 帶寬度值的表格展示效果
2. height屬性
height屬性可以設置單元格的高度，當一行有多個不同height屬性值時，取最大值作為這一行的高度。接下來通過案例來演示height屬性，如例3-12所示。
1
2
3
4
5
表格其他屬性6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.14所示。
圖3.14 帶高度值的表格展示效果
3. align屬性
align屬性可以設置單元格的內容左右對齊方向，
標簽的align屬性默認為center，標簽的align屬性默認為left。1
2
3
4
5
表格其他屬性6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.15所示。
圖3.15 帶左右對齊的表格展示效果
4. valign屬性
valign屬性可以設置單元格的內容垂直對齊的方向，默認為center(居中對齊)。接下來通過案例來演示valign屬性的使用，如例3-14所示。
1
2
3
4
5
表格其他屬性6
7
8
9
10
單元格111
單元格212
13
14
單元格115
單元格216
17
18
19
運行結果如圖3.16所示。
圖3.16 帶上下對齊的表格展示效果
到此已經學習了HTML表格的常用標簽與屬性，如果想要做出一些更加漂亮或是更多需求的表格，還需要配合CSS才能來完成，這里不作講解，后續章節中會詳細介紹如何來實現效果。
1.2 HTML表單
表單時網頁中常用的一種展示效果，如登錄頁面中的用戶名和密碼的輸入、登錄按鈕等都是用表單相關的標簽定義的。表單是HTML中獲取用戶輸入的手段，它的主要功能是收集用戶的信息，并將這些信息傳遞給后臺服務器，實現網頁與用戶的交流。本節將詳細講解表達使用，先來觀察微博登錄、注冊頁面表單的展示效果，如圖3.17所示。
圖3.17 微博登錄、注冊展示效果
HTML中，一個完整的表單通常由表單元素、提示信息和表單域3個部分組成，為了讓初學者理解這三個部分，下面將詳細介紹這三個部分。
表單元素：包含表單的具體功能項，如文本輸入框、下拉列表框、復選框、密碼輸入框、登錄按鈕等。
提示信息：表單中通常還需包含一些說明性的文字，提示用戶要進行的操作。
表單域：用來容納表單控件和提示信息，可以通過它定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果未定義表單域，表單中的數據就無法傳送到后臺服務器。
表單元素是表單的核心，常用的表單元素如表3.2所示。
表3.2 表單元素
這里先簡單了解常用的表單元素，后面的小節將詳細講解。
3.2.1 標簽
為了實現網頁與用戶的交流，需要讓表單中的數據傳送給后臺服務器，就必須定義表單域。定義表單域用
表單元素和提示信息
接下來通過案例來演示
標簽的簡單使用，如例3-15所示。1
2
3
4
5
HTML表單6
7
8
9 姓名:
10 性別： 男女
11
12
13
14
運行結果如圖3.18所示。
圖3.18 form標簽展示效果
由圖3.19可以看出，
標簽默認并沒有什么效果，當輸入完姓名和選擇完性別后，點擊提交按鈕，就可以把填寫好的數據提交給后臺服務器，服務器經過處理后存儲進網站的數據庫，這樣數據就可以得到保存。HTML表單將數據發送給后臺服務器，用到
的action、method、enctype和target屬性，下面詳細了解這幾個屬性。1. action屬性
action屬性用來定義表單數據的提交地址，即一個URL。HTML表單要想和后臺服務器進行連接，就需要在action屬性上設置一個URL。比如兩人打電話，雙方要通話就必須要知道對方的電話號碼，URL就相當于電話號碼。action屬性用于指定接收并處理表單數據的服務器的URL地址。示例如下：
表示提交表單時，表單數據會傳送到qianfeng_action.asp的頁面處理。
action屬性值 可以是相對路徑或絕對路徑，還可以為接收數據的E-mail郵箱地址。示例如下：
表示提交表單時，表單數據以電子郵件的形式傳遞出去。
2. method屬性
method屬性用來定義表單數據的提交方式，常用的有get(默認)和post兩種方式。提交方式類似于通信方式，可以打電話、發短信或發郵件。一般情況下，獲取一些數據用get方式，這種方式提交的數據將顯示在瀏覽器的地址欄中，保密性差，且有數據量的限制。Post方式的保密性好，而且無數據量的限制，使用method=”post”可以大量提交數據。
3. enctype屬性
enctype屬性用來定義表單數據的提交內容形式，常用的有application/x-www-form-urlencoded(默認)和multipart/form-data兩種方式。提交內容可以是網頁中的文本，也可以是圖片或視頻等非文本的內容，因此需要對enctype屬性選擇不同的設置。
4. target屬性
target屬性用來定義提交地址的打開方式，常用的有_self(默認)和_blank兩種方式。打開方式可以選擇當前頁打開，也可以在新頁面打開，
標簽中的target屬性跟標簽中的target屬性一樣，這里不再贅述。接下來通過案例來演示
標簽的四個常用屬性，如例3-16所示。1
2
3
4
5
HTML表單6
7
8
9 target="_blank">
10 姓名:
11 性別： 男女
12
13
14
15
運行結果如圖3.19所示。
圖3.19 form標簽展示效果
例3-16中這些屬性并沒有做過多的解釋與演示，對后端有一定的了解后，才能更好的掌握
標簽的屬性，這里先了解這些屬性，學習一些后端知識后，這些內容就非常容易理解。3.2.2 標簽
網頁中經常會包含有單行文本框、單選按鈕、復選框、提交按鈕等，要想定義這些表單元素需要使用標簽，其基本語法格式如下。
標簽通過type屬性取值不同可以展示不同的表單類型，其屬性值如表3.3。
表3.3中列出了type屬性的取值及含義，下面將分別講解這些屬性。
1.text、password
text值用來展示單行文本框，password值用來展示密碼文本框，一般使用在登錄界面，接下來通過案例來演示這兩個屬性值，如例3-17所示。
1
2
3
4
5
HTML表單6
7
8
9 用戶名:
10 密碼：
11
12
13
運行結果如圖3.20所示。
圖3.20 text、password展示效果
可以往輸入框內輸入內容，password值中的字符會被做掩碼處理(顯示為星號或實心圓)。如圖3.21所示。
圖3.21 text、password輸入展示效果
2.radio、checkbox
radio值用來展示單選框，checkbox值用來展示復選框，一般在調查問卷中使用，接下來通過案例來演示這連個屬性，如例3-18所示。
1
2
3
4
5
HTML表單6
7
8
9 性別:男
10 女
11 愛好：音樂
12 體育
13 舞蹈
14
15
16
運行結果如圖3.22所示。
圖3.22 radio、checkbox展示效果
例3-18中，第9行、10行單選框加了一個name屬性，并且兩個單選框中的name屬性值相同，目的是讓多個單選框之間建立關系，這樣就可以對單選框進行切換操作，因此在屬性值為單選框時一定要加name屬性，否則單選框不能切換狀態。可以選擇單選框和復選框，其效果如圖3.23所示。
圖3.23 radio、checkbox展示效果
3.button、submit、reset
button值用來設置普通按鈕，submit值用來設置提交按鈕，rest值用來設置重置按鈕。接下來通過案例來演示這三個屬性值，如例3-19所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11
12
13
14
運行結果如圖3.24所示。
圖3.24 button、submit、reset展示效果
例3-19中，第9行、第10行和第11行中的value屬性的作用是設置按鈕上文本的內容。
普通按鈕沒有任何行為，常用于在用戶點擊按鈕時啟動JavaScript程序。提交按鈕可以看成一種具有特殊功能的普通按鈕，單擊提交按鈕可以實現將表單內容提交給后臺服務器處理。重置按鈕也可以看成一種具有特殊功能的普通按鈕，單擊重置按鈕可以清除用戶在頁面表單中輸入的信息。接下來通過案例來演示這三個按鈕的展示效果，如例3-20所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11
12
13
14
15
運行結果如圖3.25所示。
圖3.25 button、submit、reset展示效果
點擊普通按鈕時，會彈出一個對話框，里面的內容為hello。點擊提交按鈕，會跳轉到data.php頁面(需要了解后端技術才可理解)。當往輸入框中輸入一些內容，然后在點擊重置按鈕，發現內容被清空。
4.hidden
hidden值用于隱藏那些知識往后臺服務器發送一些數據，但又不影響頁面布局的表單控件。接下來通過案例來演示hidden屬性值，如例3-21所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11
12
13
運行結果如圖3.26所示。
圖3.26 hidden展示效果
第9行type屬性值設置為hidden，隱藏域在網頁中并沒有顯示出來，點擊提交按鈕，就可以把value=”男”提交給data.php這個后臺服務器。
5.image
image值用來設置圖像形式的按鈕，src屬性用來引入圖像的地址，目的是替換submit的默認樣式，從而達到更加美觀的展示。接下來通過案例來演示image屬性值，如例3-22所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11
12
13
14
運行結果如圖3.27所示。
圖3.27 image展示效果
6.file
file值用來設置文件上傳的按鈕，文件上傳是網站中常見的功能，例如網盤文件上傳和郵箱文件上傳。設置file值時，
標簽的method屬性必須設置成post，enctype屬性必須設置成multipart/form-data。接下來通過案例來演示file值，如例3-23所示。1
2
3
4
5
HTML表單6
7
8
9
10 enctype="multipart/form-data">
11
12
13
14
運行結果如圖3.28所示。
圖3.28 file展示效果
網頁中經常能看到一些漂亮的上傳按鈕，這些按鈕都是通過CSS來實現的，后面的章節將會詳細講解。
標簽除了type屬性，還有一些常用的屬性，如表3.4。
表3.4 標簽其他屬性
表3.4中列出了標簽中其他常用的屬性，下面進行詳細講解。
1.name、value屬性
name屬性用來規定input元素的名稱，value屬性用來規定input元素的值。在前面的案例中，已經接觸過name和value這兩個屬性，其中name值和value值配合成一對來使用，這樣后臺服務器就可以通過name值來找到對應的value值。這里只需了解name和value這兩個屬性是為后臺服務器提供即可。接下來通過案例來演示這兩個屬性，如例3-24所示。
1
2
3
4
5
HTML表單6
7
8
9 姓名：
10 性別：男
11 女
12
13
14
運行結果如圖3.29所示。
圖3.29 name、value屬性展示效果
2.maxlength屬性
maxlength屬性規定輸入內容允許的最大字符數，如設置maxlength屬性，則輸入控件不會接受超過所允許字符數。接下來通過案例來演示maxlength屬性，如例3-25所示。
1
2
3
4
5
HTML表單6
7
8
9 最多輸入10個字符
10
11
12
運行結果如圖3.30所示。
圖3.30 maxlength屬性展示效果
3.disabled、readonly屬性
disabled屬性規定輸入內容是禁用的，被禁用的元素是不可用和不可點擊的。readonly屬性規定輸入內容為只讀(不能修改，但是能獲取當前只讀的內容)。接下來通過案例來演示這兩個屬性，如例3-26所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11
12
13
14
運行結果如圖3.31所示。
圖3.31 disable、readonly屬性展示效果
4.checked屬性
checked屬性規定在頁面加載時應該被預先選定的input元素。checked屬性與或配合使用。接下來通過案例來演示checkd屬性，如例3-27所示。
1
2
3
4
5
HTML表單6
7
8
9 性別：男
10 女
11 愛好：音樂
12 體育
13 舞蹈
14
15
16
運行結果如圖3.32所示。
圖3.32 checked屬性展示效果
在后面H5章節中，還會學習標簽新的type屬性值和標簽其他新的屬性，本節只對input中常用的元素進行講解。
3.2.3 標簽
單行文本框只能輸入一行信息，而多行文本框可以輸入多行信息。多行文本框使用的是標簽，而標簽只能設置單行文本框。接下來通過案例來演示標簽，如例3-28所示。
1
2
3
4
5
HTML表單6
7
8
9 多行文本框內容
10
11
12
運行結果如圖3.33所示。
圖3.33 textarea標簽展示效果
例3-29中，rows屬性可以設置多行文本框的行數，cols屬性可以設置多行文本框的列數。這樣就可以定義多行文本框的尺寸，更好的辦法是使用 CSS 的 height 和 width 屬性來定義多行文本輸入框的寬高。
3.2.4 標簽
網頁中經常會看到包含多個選項的下拉菜單，如選擇城市、日期、科目、校區選擇等。HTML中用標簽設置下拉列表，其需要與標簽配合使用，這個特點和列表一樣，如無序列表是由
- 標簽和
- 標簽配合使用。為了更好理解，可以把下拉列表看作一個特殊的無序列表。
下拉列表是一種最節省頁面空間的選擇方式，因為在正常狀態下只顯示一個選項，單擊下拉菜單打開菜單后才會看到全部的選項。接下來通過案例來演示標簽，如例3-29所示。
1
2
3
4
5
HTML表單6
7
8
9
10 HTML
11 CSS
12 JavaScript
13 PHP
14
15
16
17
運行結果如圖3.34所示。
圖3.34 selelct標簽點開展示效果
和其他標簽一樣，標簽也有其常用的屬性，如表3.5。
表3.5 type屬性取值
1.multiple屬性
multiple屬性可以設置多選下拉列表，默認下拉列表只能選擇一項，而設置multiple屬性后就可以選擇多項了(使用“Ctrl+鼠標左鍵”進行多選操作)。接下來通過案例來演示multiple屬性，如例3-30所示。
1
2
3
4
5
HTML表單6
7
8
9
10 HTML
11 CSS
12 JavaScript
13 PHP
14
15
16
17
運行結果如圖3.35所示。
圖3.35 multiple屬性展示效果
2.size屬性
size屬性可以設置下拉列表可見選項的數目，默認情況下單選下拉菜單顯示一項。接下來通過案例來演示size屬性，如例3-31所示。
1
2
3
4
5
HTML表單6
7
8
9
10 HTML
11 CSS
12 JavaScript
13 PHP
14
15
16
17
運行結果如圖3.36所示。
圖3.36 size屬性展示效果
3.selected屬性
selected屬性表示選中項，跟單選框的checked屬性類似，注意selected屬性是設置到標簽上的。接下來通過案例來演示selected屬性，如例3-32所示。
1
2
3
4
5
HTML表單6
7
8
9
10 HTML
11 CSS
12 JavaScript
13 PHP
14
15
16
17
運行結果如圖3.37所示。
圖3.37 selected屬性展示效果
標簽中使用標簽進行分組項操作，把相關的選項組合在一起。標簽的label屬性來設置分組項的標題。接下來通過案例來演示標簽，如例3-33所示。
1
2
3
4
5
HTML表單6
7
8
9
10
11 HTML
12 CSS
13 JavaScript
14 >
15
16 PHP
17 JAVA
18
19
20
21
22
運行結果如圖3.38所示。
圖3.38 optgroup標簽展示效果
3.2.5 標簽
標簽用來輔助表單元素，可以更好的提高用戶體驗。當用戶選擇標簽內文本進行點擊時，會自動將焦點轉到和標簽相關的表單控件上。接下來通過案例來演示，如例3-34所示。
1
2
3
4
5
HTML表單6
7
8
9 性別：
10 男
11
12 女
13
14
15
運行結果如3.39所示。
圖3.39 label標簽展示效果
當點擊標簽中的文本(男、女)，也可以對單選框進行切換，用戶體驗得到提升。其中標簽中的for屬性值一定要和標簽中的id屬性值相同才能找到對應控件。
3.3 本章小結
通過本章的學習，能夠掌握HTM表格和HTML表單的基本使用，了解前端與后臺服務器之間如何交互與通信。至此的HTML部分的講解基本完成，
3.4 習 題
1. 填空題
(1) 創建表格必備的三個標簽為 ______、______、______ 。
(2) 為表格添加邊框，需要設置的屬性為______。
(3) ______用于創建表格的標題。
(4) valign屬性可以設置單元格的內容 ______ 的方向。
(5)表單由______ 、______ 、______ 三個部分組成。
2.選擇題
(1) 在HTML 中，下列的哪個可以產生單選框( )。
A． B．
C． D．
(2) 下列的HTML中哪個可以產生文本域？( )。
A． B．
C． D．
(3) 以下元素不是table元素子元素的有( )。
A．
B．C． D．
(4) 以下標簽不能體現表格語義化的是( )。
A．
B．C．
D．(5) 以下標簽中作用與
標簽類似的是( )。A．
C． D．
3.思考題
(1) 請簡述標簽的作用？
(2) 請簡述標簽中multiple屬性的作用？
總結
以上是生活随笔為你收集整理的easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python打包工具报错_Python打
- 下一篇： html5拍照上传 java_如何使用H