《HTML5+CSS3web前端開發項目化教程》

項目6表單頁面制作目錄Contents任務6.2制作后臺管理頁面02任務6.1制作登錄、注冊頁面01教學目標?掌握表單元素及相關屬性

熟悉表格相關標簽

理解屬性選擇器的用法1.知識目標能夠使用表單元素制作表單并使用CSS美化表單

能夠使用表格標簽制作表格并使用CSS美化表格

能夠使用屬性選擇器選擇元素2.技能目標?樹立網絡安全意識培養團隊合作精神

遵守代碼規范性要求，養成良好的代碼編寫習慣3.素養目標1任務6.1制作登錄、注冊頁面效果展示登錄、注冊頁面在網上隨處可見。本任務使用表單元素完成登錄、注冊表單的制作，并通過CSS控制表單元素的邊框、背景、內邊距等樣式，制作美觀的表單頁面。知識儲備input元素2其他表單元素3表單概述1屬性選擇器4目錄Contents知識儲備1.表單概述表單是網頁中的一個重要元素，主要用來收集訪問者的信息，并將信息發送給服務器端程序進行處理，從而實現訪問者與網站之間的信息交互。常見的表單有：登錄表單、注冊表單、網上調查表等。知識儲備1.表單概述以注冊頁面為例，分析表單的構成。提示信息表單域表單控件一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操作。相當于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。知識儲備1.表單概述<formaction="表單處理程序url地址"method="get|post"name="表單名稱">表單元素<!--此處為各種表單元素--></form><form></form>標簽用來創建表單。語法格式如下：其中，action、method和name為表單標簽<form>的常用屬性。2.創建表單action屬性

action：用于指定接收并處理表單數據的服務器程序的url地址。method屬性method：用于設置表單數據的提交方式，取值為get或post。

name屬性

name：用于指定表單的名稱，以區分一個頁面中的多個表單知識儲備學習表單的核心就是學習表單元素，HTML語言提供了一系列的表單元素，用于定義不同的表單功能，如密碼輸入框、文本域、下拉列表、復選框等。知識儲備表單元素有input元素、textarea元素、select元素、datalist元素等。Select元素input元素textarea元素datalist元素知識儲備2.input元素<input/>元素是表單中最常見的元素，網頁中常見的單行文本框、單選按鈕、復選框等都是通過它定義的。<inputtype="元素類型"/><input/>標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的元素類型。知識儲備2.input元素屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認文本值size正整數input控件在頁面中的顯示寬度readonlyreadonly該控件內容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項maxlength正整數控件允許輸入的最多字符數input元素及其屬性知識儲備2.input元素type=“text”表示文本框，常用來輸入簡短的信息，如用戶名、賬號、證件號碼等；type=“password”表示密碼框，用來輸入密碼，其內容將以圓點的形式顯示。例如：文本框和密碼框知識儲備2.input元素radio類型表示單選按鈕，用于單項選擇，如選擇性別、是否操作等。頁面中以圓框表示。單選按鈕checkbox類型表示復選框，常用于多項選擇，如選擇興趣、愛好等，復選框在頁面中以一個方框來表示。復選框知識儲備2.input元素name屬性用來區分單選按鈕或復選框是否處于一組，所以處于一組的單選按鈕或復選框name值必須相同。value屬性用來設置用戶選中該項目后，傳送到處理程序中的值，處于一組的單選按鈕或復選框value值必須不同。checked屬性表示該項默認被選中，一組單選按鈕中只能有一項被選中。一組復選框中可以有一項或多項被選中。單選按鈕和復選框知識儲備2.input元素type="button"表示普通按鈕；type="submit"表示提交按鈕，單擊完成表單數據的提交；type="reset"表示重置按鈕，用來清除已輸入的所有表單信息；type="image"表示圖像按鈕，用圖像替代了默認的按鈕，外觀上更加美觀。按鈕普通按鈕一般情況下要配合JavaScript

腳本來進行表單處理。例如，在button中添加onclick

屬性用來實現當鼠標按下按鈕時所進行的處理。圖像按鈕

src表示圖像的路徑。知識儲備2.input元素當定義文件域時，頁面中將出現一個文本框和一個“瀏覽...”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺服務器。在設置電子郵件的附件、上傳頭像、發送文件時常常會用到這一元素。文件域知識儲備2.input元素隱藏域主要用來傳遞一些參數，而這些參數不需要在頁面中顯示，通常用于后臺的程序。當用戶提交表單時，隱藏域的內容會一起提交給處理程序。<inputtype="hidden"/>隱藏域知識儲備2.input元素email類型是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內容是否符合Email郵件地址格式；如果不符合，將提示相應的錯誤信息。不輸入不驗證。email類型url類型的input元素是一種用于輸入url地址的文本框。如果所輸入的內容是url地址格式的文本，則會提交數據到服務器，否則不允許提交，并有提示信息。不輸入不驗證。url類型知識儲備2.input元素用于提供輸入數值的文本框。在提交表單時，會自動檢查該輸入框中的內容是否為數字。如果輸入的內容不是數字或者數字不在限定范圍內，則會出現錯誤提示。其屬性有：

min：規定最小值

max：規定最大值

step：規定變化步長，默認值1

value:默認值 number類型用于提供一定范圍內數值的輸入范圍，在網頁中顯示為滑動條。常用屬性同number類型。range類型知識儲備2.input元素是指時間日期類型，HTML5中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期。Datepickers類型是一種專門用于輸入搜索關鍵詞的文本框，它能自動記錄一些字符。在用戶輸入內容后，其右側會附帶一個刪除圖標，單擊這個圖標按鈕可以快速清除內容。search類型知識儲備2.input元素用于提供設置顏色的文本框，用于實現一個RGB顏色輸入。其基本形式是#RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色。email類型用于提供輸入電話號碼的文本框，通常和pattern屬性配合使用。tel類型知識儲備2.input元素input元素還有其他的一些屬性，具體如下表所示：屬性屬性值描述readonlyreadonly該控件內容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）placeholder字符串文本框中顯示的輸入提示信息requiredrequired規定輸入框填寫的內容不能為空autofocusautofocus指定頁面加載后是否自動獲取焦點form

form元素的id設定字段隸屬于哪一個或多個表單listdatalist元素的id指定字段的候選數據值列表min、max和step數值規定輸入框所允許的最大值、最小值及間隔pattern字符串驗證輸入的內容是否與定義的正則表達式匹配知識儲備2.input元素該表單元素內容為只讀（不能編輯修改）。readonly屬性第一次加載頁面時禁用該元素（顯示為灰色）。disabled屬性當文本框處于未輸入狀態時，其中默認顯示的提示信息placeholder屬性input元素其他屬性知識儲備2.input元素input元素其他屬性用于規定輸入框填寫的內容不能為空，否則不允許用戶提交表單。required屬性用于指定頁面加載后自動獲取焦點，一個頁面只能有一個控件使用該屬性，一般應用于文本框。autofocus屬性知識儲備2.input元素input元素其他屬性HTML5中的form屬性，可以把表單內的子元素寫在頁面中的任一位置，只需為這個元素指定form屬性并設置屬性值為該表單的id即可。form屬性用于指定輸入框所綁定的datalist元素，其值是某個datalist元素的id。list屬性知識儲備2.input元素新增屬性用于驗證input類型輸入框中，用戶輸入的內容是否與所定義的正則表達式相匹配。pattern屬性input元素其他屬性知識儲備3.其他表單元素新增屬性瀏覽網頁時，經常會看到包含多個選項的下拉菜單，如選擇所在的城市、出生年月等。使用select元素可以定義下拉菜單。其基本語法如下：

1.select元素基本語法格式<selectsize=""multiple><optionvalue=""selected>選項1</option><optionvalue="">選項2</option>...</select>【屬性】size指定下拉菜單的可見選項數（取值為正整數），multiple表示可以多選，若不需要多選，可不設置該屬性。option元素表示菜單項，selected屬性表示當前項為默認選中項。知識儲備3.其他表單元素新增屬性基本語法格式<textareacols=“每行中的字符數”rows=“顯示的行數“value=“默認值”>

文本內容</textarea>多行文本輸入框，可以輸入多行文字。cols和rows為textarea元素的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數，rows用來定義多行文本輸入框顯示的行數，取值均為正整數。value為默認值。2.textarea元素知識儲備3.其他表單元素新增屬性datalist

元素用于定義輸入框的選項列表，列表通過datalist的option元素進行創建，如果用戶不希望從列表中選擇某項，也可以自行輸入其他內容。datalist元素通常與input元素配合使用。在使用datalist元素時，需要通過

id屬性為其指定唯一標識，然后為input元素指定list屬性，該屬性設置為datalist元素的id屬性值。3.datalist元素知識儲備4.屬性選擇器新增屬性屬性選擇器可以根據元素的屬性及屬性值來選擇元素。選擇具有att屬性，且屬性值以value結尾的E元素E[att$=value]選擇具有att屬性，且屬性值包含value的E元素E[att*=value]選擇具有att屬性，且屬性值等于value的E元素E[att=value]選擇具有att屬性，且屬性值以value開頭的E元素E[att^=value]選擇具有att屬性的E元素。E[att]注意：

E元素可以省略，如果省略則表示可以匹配滿足條件的任意元素。知識儲備4.屬性選擇器新增屬性p[id]：選擇具有id屬性的<p>元素，p1、p2、p3、p4被選取，文字顏色為綠色。p[id="demo1"]：選擇具有id屬性且屬性值為"demo1"的<p>元素，p1被選取，p1文字傾斜。p[id^="demo"]：選擇具有id屬性且屬性值以"demo"開頭的<p>元素，p1、p2被選取。p[id$="demo"]：選擇具有id屬性且屬性值以"demo"結尾的<p>元素，p3、p4被選取。[id*="demo"]：選擇具有id屬性且屬性值包含"demo"的元素，p1、p2、p3、p4、box被選取。知識儲備4.屬性選擇器新增屬性使用CSS可以輕松地控制表單元素的樣式，主要體現在控制表單元素的字體、邊框、背景和內邊距等。知識導圖任務分析<lable><p><button>（2）密碼框里的“眼睛”圖標如何實現？<a>（1）登錄、注冊頁面樣式一致，可以用外部樣式表統一設置。可以設置密碼框的背景圖像，再通過背景位置進行精確控制。或者對眼睛圖標進行絕對定位<form>提示信息表單元素<form><h1>任務實施任務實施2任務6.2制作后臺管理頁面效果展示知識儲備對于表格大家并不陌生，如課程表、列車時刻表等。表格一般用來存放數據，每個表格均有若干行，每行被分割為若干單元格，數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等1.表格標簽知識儲備1.表格標簽<thead>定義表格的頁眉。<tbody>定義表格的主體。<tfoot>定義表格的頁腳。知識儲備1.表格標簽<tr>定義表格的行。<td>定義表格中的單元格。<th><th>：定義表格的表頭，一般位于首行或首列，文字以粗體居中顯示。<table>定義表格。<caption>定義表格標題，放在<table>標簽內，在<tr>標簽前。HTML中，與表格有關的標簽如下：知識儲備1.表格標簽<thead>定義表格的頁眉。<tbody>定義表格的主體。<tfoot>定義表格的頁腳。為了使搜索引擎更好地理解網頁，可以將表格結構劃分為頁眉、主體和頁腳。一個表格只能定義一對<thead>、一對<tfoot>，但是可以定義多對<tbody>。使用表格的結構劃分標記后，搜索引擎可以更好地理解網頁內容，但表格的實際顯示效果并不會改變。知識儲備1.表格標簽一般是通過CSS更方便地控制表格樣式，讓表格看起來更加精致。常用設置如下：（1）使用width

和height

屬性設置表格及單元格的寬度和高度；（2）使用border屬性設置表格及單元格的邊框；（3）使用border-collapse

屬性設置表格邊框合并，即細線表格效果；（4）使用

padding屬性設置單元格內容與邊框之間的距離；（5）使用background

屬性設置表格及單元格的背景樣式。知識導圖任務分析任務6.2制作后臺管理頁面<header>、<container>、<foote