《HTML5+CSS3網(wǎng)頁設(shè)計技術(shù)》授課教案授課教案學校******大學（學院）任課教師***授課題目模塊八表格與表單授課時間長度8學時所用教材HTM5+CSS3網(wǎng)頁設(shè)計技術(shù)，黃玉春主編；中國科學技術(shù)出版社教學目標｜知識目標｜（1）掌握表格的相關(guān)標簽。（2）掌握制作單元格的跨行和跨列表格。（3）掌握表單的構(gòu)成。（4）掌握表單控件標簽。（5）掌握用CSS控制表格和表單的樣式。｜能力目標｜（1）能夠設(shè)計各種樣式的表格。（2）能夠用CSS設(shè)置表格和表單的樣式。（3）能夠設(shè)計實現(xiàn)各種功能的表單。｜素質(zhì)目標｜（1）通過表格和表單的設(shè)計與制作，思考外觀相同、代碼不同的文本框的區(qū)別。培養(yǎng)在實際的網(wǎng)頁開發(fā)中，多為用戶體驗考慮的意識。（2）培養(yǎng)網(wǎng)絡(luò)安全防范意識，在設(shè)計表單收集用戶信息時，注意設(shè)計更為合理的表單頁面。教學重點（1）表格的相關(guān)標簽及樣式設(shè)置。（2）表單控件的標簽及樣式設(shè)置。教學難點表單控件的標簽及樣式設(shè)置。教學方法任務(wù)引入法、課堂討論、理論講解、實操訓練教學用具多媒體教學設(shè)備、教材、課件、實訓素材教學過程主要教學內(nèi)容及步驟考勤教師使用App或者點名等方式進行簽到；學生按照老師要求簽到任務(wù)導入打開一個有表單或有表格的網(wǎng)頁，查看表格或表單元素，引出本任務(wù)教學內(nèi)容。教學內(nèi)容任務(wù)一表格的使用在HTML網(wǎng)頁中，表格主要用于顯示數(shù)據(jù)，讓數(shù)據(jù)顯示的非常規(guī)整，有條理，可讀性非常好。特別是后臺展示數(shù)據(jù)時候，能夠熟練運用表格就顯得很重要。早期的網(wǎng)頁布局也會用到表格，隨著DIV+CSS布局技術(shù)的發(fā)展，表格將不再用來布局頁面，而是用來展示數(shù)據(jù)。一、創(chuàng)建表格創(chuàng)建HTML5表格可以通過<table>、<tr>、<td>等標簽來實現(xiàn)。其基本語法格式如下：<table><thead><tr><th>列標題1</th><th>列標題2</th><th>列標題3</th>…</tr></thead><tbody><tr><td>行1，列1</td><td>行1，列2</td><td>行1，列3</td>…</tr><tr><td>行2，列1</td><td>行2，列2</td><td>行2，列3</td>…</tr>…</tbody></table>在上面的語法包含的標簽中，<table>元素表示整個表格，它包含兩個主要部分：<thead>和<tbody>。（1）<thead>用于定義表格的標題部分。在<thead>中，使用<th>元素定義列的標題，以上實例中列標題分別為“列標題1”，“列標題2”和“列標題3”。（2）<tbody>用于定義表格的主體部分。在<tbody>中，使用<tr>元素定義行，并在每行中使用<td>元素定義單元格數(shù)據(jù)，以上實例中有兩行數(shù)據(jù)，每行包含三個單元格。通過使用<th>元素定義列標題，可以使其在表格中以粗體顯示，與普通單元格區(qū)分開來。HTML表格還可以具有其他部分，如<tfoot>（表格頁腳）和<caption>（表格標題），<tfoot>可用于在表格的底部定義摘要、統(tǒng)計信息等內(nèi)容。<caption>可用于為整個表格定義標題。HTML表格還支持合并單元格和跨行/跨列的操作，以及其他樣式和屬性的應(yīng)用，以滿足各種需求。單元格內(nèi)數(shù)據(jù)可以包含文本、圖片、列表、段落、表單、水平線、表格等等。二、單元格跨行跨列表格要制作單元格跨行或跨列的表格，需要用到<td>標簽的colspan屬性（單元格可橫跨的列數(shù)）和rowspan屬性（單元格可橫跨的行數(shù)）。三、表格列的分組表格還有一個常用標簽<colgroup>，該標簽用于定義表格列的分組。通過表格列的分組，可以為表格不同的列設(shè)置不同的樣式。<colgroup>標簽用于對表格中的列進行組合，以便對其進行格式化。通過使用<colgroup>標簽，可以向整個列應(yīng)用樣式，而不需要重復(fù)為每個單元格或每一行設(shè)置樣式。需要說明的是，<colgroup>標簽只能在<table>元素之內(nèi)，在<caption>元素之后，在任何一個<thead>、<tbody>、<tfoot>、<tr>元素之前使用。下面是其格式代碼：<table><caption></caption><colgroup><col>…</colgroup><thead><tr><th>文字</th>…</tr></thead><tbody><tr><td>文字</td>…</tr>…</tbody></table>四、CSS控制表格樣式使用表格自帶的屬性雖然可以控制表格的樣式，但是由于表格自帶的屬性控制樣式時有很多局限，同時也不符合結(jié)構(gòu)與樣式分離的網(wǎng)頁設(shè)計思想，因此在實際網(wǎng)頁設(shè)計中，推薦使用CSS控制表格的樣式。【例8-5】用CSS控制表格的邊框，外框粗實線，內(nèi)框細實線。<style>table{border-collapse:collapse;/*邊框合并*/width:100%;}.table-bordered{border:2pxdoublergb(36,116,185);}.table-borderedth,.table-borderedtd{border:1pxsolidrgb(36,116,185);padding:0.75rem;}</style>文件在瀏覽器中的預(yù)覽效果如圖8-5所示。圖8-5CSS設(shè)置表格邊框線本例中，通過將表格標簽使用border-collapse設(shè)置為collapse，讓邊框合并減少上下左右的寬度。將表格的外框線寬度設(shè)置為2px，將th、td標簽的邊框線寬度設(shè)置為1px，并將的padding設(shè)置為0.75rem，從而讓表格看起來更好看。任務(wù)二表單的使用HTML表單用于收集用戶的輸入信息。例如注冊頁面的賬號密碼輸入、購物網(wǎng)站的訂單頁面等，都是以表單的形式來收集用戶的信息，并將這些信息傳遞給后臺服務(wù)器，實現(xiàn)網(wǎng)頁與用戶信息的交互。一、表單的構(gòu)成在HTML中，一個完整的表單通常由表單元素（也稱為表單控件）、提示信息和表單域3個部分構(gòu)成。表單元素包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等；表單域相當于一個容器，用來容納所有的表單元素和提示信息。表單的基本語法格式如下：<formname=""action="url"method="get/post">表單元素1;表單元素2;表單元素3;…</form><form>標簽用于創(chuàng)建表單，name、action、method為表單屬性。表單屬性說明如下。（1）name屬性：用于定義表單對象的名稱。定義表單名稱后，可方便程序引用表單中的對象。（2）action屬性：該屬性用于設(shè)置一個接收和處理表單提交數(shù)據(jù)的腳本程序。可以是一個CGI(CommonGatewayInterface，通用網(wǎng)關(guān)接口)，也可以是ASP程序、PHP程序或Java程序等。例如：<formaction="test.php">表示當提交表單時，表單數(shù)據(jù)會傳遞到名為test.php的頁面去處理。（3）method屬性：該屬性用于設(shè)置表單提交數(shù)據(jù)的方法，其取值為post或get。默認值為get。二、表單控件表單的核心內(nèi)容就是表單的控件，HTML提供了一系列的表單控件，用于定義不同的表單功能，如輸入框、文本域、下拉列表、復(fù)選框、按鈕等。本節(jié)將對這些表單控件進行詳細的介紹。1．input控件<input>元素是最常用的表單元素之一，它可以創(chuàng)建文本輸入框、密碼框、單選按鈕、復(fù)選框等。type屬性定義了輸入框的類型，id屬性用于關(guān)聯(lián)<label>元素，name屬性用于標識表單字段。其基本語法格式如下：<inputtype="控件類型"name="*"id="*"><input>為單標簽。type屬性的常用取值有以下幾種。（1）text：單行文本輸入框（默認值）。（2）password：密碼輸入框。（3）email：定義用于e-mail地址的輸入框。（4）number：定義用于輸入數(shù)字輸入框。用戶可以通過該控件的min、max等屬性設(shè)置可接受數(shù)字的范圍限制，如下面的代碼設(shè)置了數(shù)字（1到5之間）：<inputtype="number"name="quantity"min="1"max="5">（5）tel：定義用于輸入電話號碼輸入框。（6）search：定義用于輸入搜索字符串的文本輸入框。（7）date：定義date控件（包括年、月、日，不包括時間）。（8）radio：單選按鈕。生成單選按鈕，用于單項選擇，如選擇性別、是否操作等。需要注意的是，一組單選按鈕的名稱必須相同，否則就無法實現(xiàn)多選一的目的。此外還可以應(yīng)用checked屬性，指定默認選中項。（9）checkbox：復(fù)選框。（10）submit：提交按鈕。（11）reset：重置按鈕。（12）button：普通按鈕。例如，下面的代碼定義可點擊的按鈕，在用戶單擊按鈕時啟動一段JavaScript：<inputtype="button"value="點我"onclick="msg()">（13）file：文件域。值得一提的是，在HTML5中，<input>控件還有required、placeholder、patten等常用屬性。其中required屬性為布爾值，如果使用該屬性，則字段是必填（或必選）的。placeholder屬性用于在輸入框中顯示一些提示信息，幫助用戶填寫正確的內(nèi)容或提供輸入示例。例如下面的代碼設(shè)置了輸入框為必填字段和在輸入框中顯示一些提示信息：<inputtype="text"name="user"placeholder="輸入用戶名"required>2．label控件<label>控件用于為表單元素添加標簽。在實際應(yīng)用中，<input>標簽往往結(jié)合<label>標簽使用，<label>元素用于為表單元素添加標簽，提高可訪問性。3．textarea控件通過<textarea>標簽可以創(chuàng)建一個多行文本輸入?yún)^(qū)域，其基本語法格式如下：<textareacols="列數(shù)"rows="行數(shù)">…</textarea>該語法代碼中，textarea標簽內(nèi)的cols屬性用來設(shè)置文本域的列數(shù)，rows屬性用來設(shè)置文本域的行數(shù)?？梢酝ㄟ^cols和rows屬性來規(guī)定textarea的尺寸大小，不過更好的辦法是使用CSS的height和width屬性。4．select控件HTML中的<select>標簽用來創(chuàng)建下拉列表。其語法格式如下：<select><option>選項1</option><option>選項2</option><option>選項3</option>…</select>5．datalist控件在HTML5中，<datalist>標簽用于提供輸入框的自動完成功能。它可以與input元素結(jié)合使用，通過輸入框輸入內(nèi)容時，彈出一個下拉列表來顯示可選的選項。例如，下面的代碼通過<dataList>標簽為輸入框（<select>標簽）生成一個下拉選項，如圖8-9所示。<formaction=""><inputlist="dept"name="dept"placeholder="輸入二級院系"><datalistid="dept"><optionvalue="信息工程學院"><optionvalue="機電工程學院"><optionvalue="馬克思主義學院"><optionvalue="外語學院"><optionvalue="思政教學部"></datalist></form>圖8-9datalist控件的使用注意，datalist控件的id屬性值要與input控件的