響應(yīng)式Web開發(fā)項目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第3章 表格和表單

第3章表格和表單《響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）（第3版）》學(xué)習(xí)目標(biāo)/Target掌握表格標(biāo)簽的使用方法，能夠使用表格標(biāo)簽創(chuàng)建表格

掌握CSS控制表格樣式，能夠使用CSS設(shè)置表格的樣式掌握表格標(biāo)簽屬性的使用方法，能夠使用colspan和rowspan屬性來合并單元格掌握表單標(biāo)簽的使用方法，能夠使用表單標(biāo)簽創(chuàng)建表單學(xué)習(xí)目標(biāo)/Target掌握<input>標(biāo)簽的使用方法，能夠定義不同的表單控件

掌握<label>標(biāo)簽的使用方法，能夠定義表單控件的標(biāo)簽文本掌握<textarea>標(biāo)簽的使用方法，能夠定義多行文本輸入框掌握<form>標(biāo)簽的使用方法，能夠使用<form>標(biāo)簽創(chuàng)建表單學(xué)習(xí)目標(biāo)/Target掌握圖書列表頁面的制作方法，能夠完成圖書列表頁面的開發(fā)掌握安全教育活動調(diào)查問卷頁面的制作方法，能夠完成安全教育活動調(diào)查問卷頁面的開發(fā)掌握<select>、<optgroup>、<option>標(biāo)簽的使用方法，能夠定義下拉菜單章節(jié)概述/Summary在網(wǎng)頁中，我們常常使用表格來清晰地展示各種信息。表格的應(yīng)用場景非常廣泛，如展示統(tǒng)計數(shù)據(jù)、產(chǎn)品比較情況以及價格列表等。此外，我們還經(jīng)常使用表單來收集用戶反饋的信息。表單適用于多種場景，如用戶注冊、用戶登錄、聯(lián)系我們以及調(diào)查問卷填寫等。通過合理運用表格和表單，我們可以提高網(wǎng)頁的用戶體驗和交互性，使得網(wǎng)頁內(nèi)容更加豐富、有序且易于操作。本章將詳細(xì)講解如何使用表格和表單。目錄/Contents3-13-2圖書列表頁面安全教育活動調(diào)查問卷頁面圖書列表頁面項目3-1項目需求書籍是人類進(jìn)步的階梯。通過閱讀，我們不僅能深入了解世界，還能激發(fā)思考、培養(yǎng)想象力、提升審美；書籍是智慧的媒介，它們承載并傳遞了人類的智慧和經(jīng)驗，為我們個人的成長和進(jìn)步提供了不可或缺的助力。項目需求本項目旨在開發(fā)一個用于展示圖書列表的頁面，主要包含編號、圖書名稱、作者信息，其效果如下圖所示。知識儲備

先定一個小目標(biāo)！掌握表格標(biāo)簽的使用方法，能夠使用表格標(biāo)簽創(chuàng)建表格1.表格標(biāo)簽知識儲備1.表格標(biāo)簽網(wǎng)頁中的表格由一系列單元格組成，每個單元格用于展示一項數(shù)據(jù)。在HTML中，可以使用表格標(biāo)簽完成表格的創(chuàng)建。知識儲備1.表格標(biāo)簽常用的表格標(biāo)簽如下表所示。標(biāo)簽說明<table>用于定義表格。在<table>標(biāo)簽內(nèi)可以放置表格的標(biāo)題、表格的行、數(shù)據(jù)單元格等<caption>用于定義表格的標(biāo)題，并且標(biāo)題會顯示在表格上方居中的位置<thead>用于定義表格的頭部區(qū)域，通常包含列標(biāo)題或表頭信息<tfoot>用于定義表格的腳注區(qū)域，通常包含表格的摘要、統(tǒng)計數(shù)據(jù)或其他附加信息<tbody>用于定義表格的主體區(qū)域，通常包含行和列的數(shù)據(jù)知識儲備1.表格標(biāo)簽標(biāo)簽說明<tr>用于定義表格的行，每個<tr>標(biāo)簽表示該表格中的一行<td>用于定義數(shù)據(jù)單元格，每個<td>標(biāo)簽表示一個單元格，數(shù)據(jù)都存儲在單元格中<th>用于定義表頭單元格。通常用于表示行標(biāo)題或表頭信息。與<td>標(biāo)簽不同，<th>標(biāo)簽中的文本通常會被自動加粗和居中顯示，以突出表頭的重要性知識儲備1.表格標(biāo)簽創(chuàng)建表格結(jié)構(gòu)的完整語法格式如下<table>

<caption>標(biāo)題</caption>

<thead>

<tr>

<th>表頭單元格1</th>

<th>表頭單元格2</th>

<th>表頭單元格3</th>

</tr>

</thead>

（接下一頁）知識儲備1.表格標(biāo)簽

<tbody>

<tr>

<td>數(shù)據(jù)單元格1</td>

<td>數(shù)據(jù)單元格2</td>

<td>數(shù)據(jù)單元格3</td>

</tr>

……

</tbody>（接下一頁）知識儲備1.表格標(biāo)簽

<tfoot>

<tr>

<td>表格腳注1</td>

<td>表格腳注2</td>

<td>表格腳注3</td>

</tr>

</tfoot></table>在實際使用中，<table>、<tr>、<th>和<td>是構(gòu)建基本表格結(jié)構(gòu)的必需元素。而<thead>、<tbody>、<tfoot>和<caption>是可選的，可以根據(jù)實際需求決定是否使用。知識儲備

先定一個小目標(biāo)！掌握CSS控制表格樣式，能夠使用CSS設(shè)置表格的樣式2.CSS控制表格樣式知識儲備2.CSS控制表格樣式CSS提供了border、border-collapse、padding、width和height等屬性來控制表格的樣式，下面分別進(jìn)行講解。知識儲備2.CSS控制表格樣式（1）border屬性在HTML中，表格默認(rèn)是沒有邊框的。為了給表格添加邊框并使其看起來美觀，我們可以通過border屬性來設(shè)置表格邊框的寬度、樣式和顏色。下面演示如何使用border屬性。表格有雙線邊框，這是因為table、th、td元素都有獨立的邊框。知識儲備2.CSS控制表格樣式（2）border-collapse屬性border-collapse屬性用于設(shè)置表格的邊框是否被合并，其語法格式如下。collapse表示表格邊框會合并為單線邊框。separate為默認(rèn)值，表示表格邊框會分離成雙線邊框。border-collapse:collapse|separate;知識儲備2.CSS控制表格樣式下面演示如何使用border-collapse屬性。知識儲備2.CSS控制表格樣式（3）padding屬性在CSS中，可以使用padding屬性設(shè)置單元格的內(nèi)邊距，即單元格內(nèi)容和單元格邊框的距離，示例代碼如下。td{padding:50px;}知識儲備2.CSS控制表格樣式（4）width屬性和height屬性在CSS中，可以使用width屬性和height屬性定義單元格的寬度和高度，示例代碼如下。th,td{

width:50px;height:50px;}知識儲備

先定一個小目標(biāo)！掌握表格標(biāo)簽屬性的使用方法，能夠使用colspan和rowspan屬性來合并單元格3.表格標(biāo)簽屬性知識儲備3.表格標(biāo)簽屬性表格的默認(rèn)樣式較為簡單，HTML提供了一系列表格標(biāo)簽屬性來設(shè)置表格樣式。例如，border、align和bgcolor等屬性。然而，為了更好地將內(nèi)容與樣式分離，HTML5已經(jīng)棄用了許多表格標(biāo)簽屬性，并且推薦使用CSS控制表格樣式和布局。知識儲備3.表格標(biāo)簽屬性在保留的表格標(biāo)簽屬性中，較為常用的是<th>和<td>標(biāo)簽的colspan和rowspan屬性。這兩個屬性主要用于合并單元格。下面將分別對這兩個屬性進(jìn)行詳細(xì)講解。知識儲備3.表格標(biāo)簽屬性（1）colspan屬性colspan屬性用于設(shè)置單元格橫跨的列數(shù)。通過指定一個正整數(shù)，可以將一個單元格合并為跨越指定列數(shù)的單元格。例如，將一個單元格的colspan屬性設(shè)置為2，那么該單元格則會橫跨2列。（2）rowspan屬性rowspan屬性用于設(shè)置單元格豎跨的行數(shù)。通過指定一個正整數(shù)，可以將一個單元格合并為跨越指定行數(shù)的單元格。例如，將一個單元格的rowspan屬性設(shè)置為3，那么該單元格將會豎跨3行。知識儲備3.表格標(biāo)簽屬性下面演示如何使用colspan屬性。項目實現(xiàn)

先定一個小目標(biāo)！掌握圖書列表頁面的制作方法，能夠完成圖書列表頁面的開發(fā)項目實現(xiàn)安全教育活動調(diào)查問卷頁面項目3-2項目需求在網(wǎng)頁中，調(diào)查問卷是一種有效的數(shù)據(jù)收集工具，能夠快速、準(zhǔn)確地獲取受訪者的意見、態(tài)度和行為等信息。項目需求本項目旨在開發(fā)一個安全教育活動調(diào)查問卷頁面，其效果如下圖所示。知識儲備

先定一個小目標(biāo)！掌握表單標(biāo)簽的使用方法，能夠使用表單標(biāo)簽創(chuàng)建表單1.表單標(biāo)簽知識儲備1.表單標(biāo)簽表單主要用于收集用戶輸入的信息。在HTML中，可以使用表單標(biāo)簽創(chuàng)建表單。知識儲備1.表單標(biāo)簽常用的表單標(biāo)簽如下表所示。標(biāo)簽說明<form>用于創(chuàng)建表單，包含多種表單控件來接收用戶的輸入<input>用于定義不同類型的輸入域，包括文本輸入框、單選按鈕、復(fù)選框等<label>用于定義表單控件的標(biāo)題，并與輸入域建立關(guān)聯(lián)<textarea>用于定義多行文本輸入框<fieldset>用于定義一個相關(guān)的表單元素組，包含文本輸入框、復(fù)選框、下拉列表等<legend>用于定義<fieldset>標(biāo)簽的標(biāo)題知識儲備1.表單標(biāo)簽標(biāo)簽說明<select>用于定義下拉列表，用戶可以從中選擇一個或多個選項<optgroup>用于定義<select>的選項組，將選項進(jìn)行分組展示<datalist>用于定義輸入域的選項列表，用戶可以從中進(jìn)行選擇，類似于自動補全功能<option>用于定義<select>或<datalist>中的選項<button>用于定義一個按鈕<output>用于定義一個計算或用戶操作的結(jié)果<form>、<input>、<label>、<textarea>、<select>、<optgroup>、<option>標(biāo)簽的使用比較復(fù)雜，所以下面將對這些標(biāo)簽進(jìn)行詳細(xì)講解。知識儲備

先定一個小目標(biāo)！掌握<form>標(biāo)簽的使用方法，能夠使用<form>標(biāo)簽創(chuàng)建表單2.<form>標(biāo)簽知識儲備2.<form>標(biāo)簽在HTML中，<form>標(biāo)簽用于創(chuàng)建表單，可以包含多種表單元素來接收用戶的輸入。<form>標(biāo)簽中所有的內(nèi)容都會被提交給服務(wù)器。知識儲備2.<form>標(biāo)簽<form>標(biāo)簽的常用屬性如下表所示。屬性說明action用于指定接收并處理表單數(shù)據(jù)的服務(wù)器URL地址method用于設(shè)置表單數(shù)據(jù)的提交方式，常用的屬性值為get（默認(rèn)值）、post，分別表示GET方式和POST方式name用于設(shè)置表單的名稱使用GET方式提交的數(shù)據(jù)會顯示在瀏覽器的地址欄中，這會導(dǎo)致數(shù)據(jù)保密性較差，并且有數(shù)據(jù)量限制。相比之下，使用POST方式提交的數(shù)據(jù)具有更好的保密性，并且可以提交大量數(shù)據(jù)。知識儲備2.<form>標(biāo)簽屬性說明autocomplete用于指定表單是否有自動補全功能。所謂自動補全是指將表單標(biāo)簽輸入的內(nèi)容記錄下來，當(dāng)再次輸入時會將輸入的歷史記錄顯示在一個下拉列表里，以實現(xiàn)自動補全功能。屬性值為on、off，分別表示表單有自動補全功能、表單沒有自動補全功能novalidate用于指定在提交表單時不需要驗證表單。如果聲明novalidate屬性，可以關(guān)閉整個表單的驗證，這樣可以使<form>標(biāo)簽的所有表單控件不被驗證。其屬性值也為novalidate。由于屬性名和屬性值相同，可以通過只寫屬性名的方式來設(shè)置這個屬性知識儲備2.<form>標(biāo)簽下面通過代碼演示如何使用<form>標(biāo)簽，示例代碼如下。<formaction="#"method="post"name="search"autocomplete="on"novalidate></form>知識儲備

先定一個小目標(biāo)！掌握<input>標(biāo)簽的使用方法，能夠定義不同的表單控件3.<input>標(biāo)簽知識儲備3.<input>標(biāo)簽在HTML中，可以使用<input>標(biāo)簽創(chuàng)建文本輸入框、單選按鈕、復(fù)選框和提交按鈕等表單控件，從而收集用戶的輸入數(shù)據(jù)或提交數(shù)據(jù)。知識儲備3.<input>標(biāo)簽<input>標(biāo)簽的常用屬性如表所示。屬性說明type用于設(shè)置不同類型的表單控件form用于設(shè)置<input>標(biāo)簽所屬的表單，將其與表單關(guān)聯(lián)起來，屬性值為<form>標(biāo)簽的id屬性值name用于設(shè)置表單控件的名稱，用于在表單提交時標(biāo)識數(shù)據(jù)value用于設(shè)置表單控件的默認(rèn)值readonly用于設(shè)置表單控件內(nèi)容為只讀，即不能進(jìn)行編輯操作，屬性值為readonlysrc用于設(shè)置顯示為提交按鈕的圖像的URL（只針對type="image"的情況

）知識儲備3.<input>標(biāo)簽屬性說明disabled用于設(shè)置禁用表單控件，即不能交互，屬性值為disabledchecked用于設(shè)置單選按鈕或復(fù)選框中默認(rèn)被選中的選項，屬性值為checkedmaxlength用于設(shè)置表單控件允許輸入的最多字符數(shù)size用于設(shè)置表單控件在頁面中的顯示寬度autocomplete用于設(shè)置是否自動完成表單字段內(nèi)容，屬性值為on或offautofocus用于設(shè)置表單控件自動獲取焦點，屬性值為autofocuslist與<datalist>標(biāo)簽關(guān)聯(lián)，以提供輸入域的選項列表。<datalist>的

id

屬性值與對應(yīng)的<input>標(biāo)簽的

list

屬性值相同知識儲備3.<input>標(biāo)簽屬性說明min用于設(shè)置表單控件所允許的最小輸入值max用于設(shè)置表單控件所允許的最大輸入值step用于設(shè)置表單控件的合法數(shù)字間隔，即遞增或遞減步長pattern用于驗證輸入的內(nèi)容是否與定義的正則表達(dá)式匹配，適用于text、search、url、tel、email和password類型的<input>標(biāo)簽placeholder用于設(shè)置表單控件的提示信息required用于設(shè)置表單控件為必填項，屬性值為required知識儲備3.<input>標(biāo)簽若要創(chuàng)建不同類型的表單控件，可以使用type屬性指定表單控件的類型。type屬性的屬性值如下表所示。屬性值說明text用于定義單行文本輸入框password用于定義密碼輸入框radio用于定義單選按鈕checkbox用于定義復(fù)選框button用于定義普通按鈕submit用于定義提交按鈕知識儲備3.<input>標(biāo)簽屬性值說明reset用于定義重置按鈕，重置后，所有表單控件的值為默認(rèn)值image用于定義圖像作為提交按鈕hidden用于定義不顯示的控件，其值仍會提交到服務(wù)器file用于定義“選擇文件”按鈕和“未選擇任何文件”文本，供文件上傳email用于定義E-mail地址的輸入框url用于定義URL地址的輸入框range用于定義一定范圍內(nèi)數(shù)值的輸入框知識儲備3.<input>標(biāo)簽屬性值說明date用于選取日、月、年month用于選取月、年week用于選取周和年time用于選取時間（小時和分鐘）datetime-local用于選取時間、日、月、年（本地時間）number用于定義數(shù)值的輸入框知識儲備3.<input>標(biāo)簽在HTML中，當(dāng)<input>標(biāo)簽的type屬性值設(shè)置為email或url時，瀏覽器會在表單提交時自動驗證輸入的文本是否符合相應(yīng)的格式要求。如果輸入的文本不符合要求，瀏覽器會顯示錯誤提示，以幫助用戶糾正錯誤。自動驗證功能可以幫助用戶在填寫表單時盡早發(fā)現(xiàn)并糾正輸入錯誤，提高用戶體驗，并減少因格式錯誤而導(dǎo)致的表單提交問題。知識儲備

先定一個小目標(biāo)！掌握<label>標(biāo)簽的使用方法，能夠定義表單控件的標(biāo)簽文本4.<label>標(biāo)簽知識儲備4.<label>標(biāo)簽<label>標(biāo)簽可以與<input>、<textarea>、<select>等表單標(biāo)簽配合使用，用于定義表單控件的標(biāo)簽文本，即顯示在控件旁邊的文字描述。知識儲備4.<label>標(biāo)簽將<label>標(biāo)簽與表單控件關(guān)聯(lián)的方式有兩種。第一種方式是通過為<label>標(biāo)簽設(shè)置for屬性，并將其屬性值設(shè)置為關(guān)聯(lián)的表單控件的id屬性值，從而實現(xiàn)關(guān)聯(lián)。這種方式適用于將標(biāo)簽文字和表單控件放在不同位置的情況。第二種方式是在<label>標(biāo)簽內(nèi)部嵌套<input>標(biāo)簽，不需要設(shè)置for屬性和id屬性，因為它們的關(guān)聯(lián)已經(jīng)隱含存在。這種方式適用于將標(biāo)簽文字和表單控件放在同一位置的情況。通過將<label>標(biāo)簽與表單控件關(guān)聯(lián)，用戶單擊標(biāo)簽文本時頁面會自動聚焦到對應(yīng)的表單控件，方便用戶輸入數(shù)據(jù)。此外，關(guān)聯(lián)還有助于擴大可單擊區(qū)域，提升用戶體驗。知識儲備4.<label>標(biāo)簽<label>標(biāo)簽的常用屬性如下表所示。屬性說明for用于設(shè)置<label>標(biāo)簽與哪個表單標(biāo)簽綁定，屬性值為表單標(biāo)簽的id屬性值form用于設(shè)置<label>標(biāo)簽所屬的表單，屬性值為<form>標(biāo)簽的id屬性值知識儲備4.<label>標(biāo)簽下面演示如何使用<input>標(biāo)簽和<label>標(biāo)簽。知識儲備

先定一個小目標(biāo)！掌握<textarea>標(biāo)簽的使用方法，能夠定義多行文本輸入框5.<textarea>標(biāo)簽知識儲備5.<textarea>標(biāo)簽在HTML中，當(dāng)需要創(chuàng)建一個單行文本輸入框時，可以使用<input>標(biāo)簽，并將其type屬性值設(shè)置為text，這樣用戶就可以在單行文本輸入框中輸入少量文本。然而，當(dāng)需要輸入多行文本時，單行文本輸入框就不再適用。為了滿足這種需求，HTML提供了<textarea>標(biāo)簽。通過使用<textarea>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建一個用于輸入和顯示多行文本的輸入框。知識儲備5.<textarea>標(biāo)簽<textarea>標(biāo)簽的常用屬性如下表所示。屬性說明name用于設(shè)置表單控件的名稱form用于設(shè)置多行文本輸入框所屬的表單，屬性值為<form>標(biāo)簽的id屬性值cols用于設(shè)置多行文本輸入框每行可容納的字符數(shù)，是一個正整數(shù)。默認(rèn)情況下，顯示大約20個英文字符的寬度，一個中文字符大約占2個英文字符的寬度。由于不同的瀏覽器和操作系統(tǒng)在渲染多行文本輸入框時可能存在差異，實際的可視寬度可能會有所偏差rows用于設(shè)置多行文本輸入框顯示的行數(shù)<textarea>標(biāo)簽還包括readonly、disabled、maxlength、placeholder、required、autofocus屬性。知識儲備5.<textarea>標(biāo)簽下面如何使用<textarea>標(biāo)簽。知識儲備

先定一個小目標(biāo)！掌握<select>、<optgroup>、<option>標(biāo)簽的使用方法，能夠定義下拉菜單6.<select>、<optgroup>、<option>標(biāo)簽知識儲備6.<select>、<optgroup>、<option>標(biāo)簽在瀏覽網(wǎng)頁時，經(jīng)常會遇到下拉菜單，例如選擇用戶所在的城市、選擇文件格式等時。下拉菜單通常由一個觸發(fā)區(qū)域（通常是一個文本輸入框或按鈕）和一個下拉列表組成。當(dāng)用戶單擊觸發(fā)區(qū)域時，下拉列表會展開，顯示可供選擇的選項。用戶可以從列表中選擇一個或多個選項，然后下拉列表會關(guān)閉，并將所選的選項顯示在觸發(fā)區(qū)域中。知識儲備6.<select>、<optgroup>、<option>標(biāo)簽在HTML中，可以使用<select>、<option>、<optgroup>標(biāo)簽定義下拉菜單。下面分別對<select>、<option>、<optgroup>標(biāo)簽進(jìn)行講解。知識儲備6.<select>、<optgroup>、<option>標(biāo)簽（1）<select>標(biāo)簽<select>標(biāo)簽用于定義下拉菜單，其常用屬性如下表所示。屬性說明form用于設(shè)置下拉菜單所屬的表單，屬性值為<form>標(biāo)簽的id屬性值size用于設(shè)置下拉菜單的可見選項數(shù)，屬性值為正整數(shù)multiple用于設(shè)置使下拉菜單具有多項選擇的功能，按住Ctrl鍵的同時可以選擇多