《HTML5+CSS3網頁制作》課件-模塊六 HTML5表單的應用

模塊六HTML5表單的應用任務1表單與input元素網頁制作CSSHTML知識準備——表單與input元素實戰(zhàn)演練——制作“垃圾分類問卷調查”表單表單與input元素0201進階訓練——制作“快遞單錄入”表單03動手實踐——制作“學生信息登記表”表單04

1.掌握form元素、label元素、input元素及屬性

2.了解表單驗證表單與input元素學習目標：

1.培養(yǎng)責任意識與誠信，使其在互聯(lián)網時代有保護個人信息的責任感，認識到輸入驗證不僅是技術需求，也是對用戶負責的表現(xiàn)，避免虛假信息的傳播，維護網絡空間的健康秩序。

2.培養(yǎng)公民素養(yǎng)與法治觀念，引導其遵守網絡法規(guī)，不濫用技術手段，合法合規(guī)地處理數(shù)據(jù)，

3.培養(yǎng)創(chuàng)新精神，鼓勵學生創(chuàng)造性地解決問題，設計更加人性化、高效的信息交互界面，體現(xiàn)創(chuàng)新思維。表單與input元素思政目標：

21知識準備—認識表單1知識準備--表單是網頁的一個組成部分，其中包含有各種表單控件，如文本框、按鈕、復選框、滑塊或顏色選擇器等。用戶可以與這樣的表單進行交互，提供數(shù)據(jù)，然后這些數(shù)據(jù)可以被發(fā)送到服務器進行進一步處理（例如，返回搜索結果或計算結果）。任何一個表單都始于一個form元素，其內部放置了各種控件。大多數(shù)控件由input元素表示，該元素默認提供了一個文本輸入控件。為了給控件添加標簽，可以使用label元素；標簽文本和控件自身都被置于label元素內部。表單的每一部分被視為一個段落，通常使用p元素與其他部分相隔開。

21知識準備—認識表單1知識準備--案例6-1認識一個簡單的表單，用于收集用戶的用戶名。form元素用于包裹所有的表單控件和相關元素；p元素用于將表單的各個部分分隔開來，包裹用戶名的輸入字段；label元素用于為表單控件提供描述性標簽；input元素放在label元素的內部實現(xiàn)了input元素與label元素的關聯(lián)，運行時單擊label標簽也能完成選中input元素。

21知識準備—創(chuàng)建表單1知識準備--1.form元素form元素用于創(chuàng)建表單，代表了一個可以通過一系列與之關聯(lián)的表單元素進行操作的超鏈接，其中一些元素可以表示可編輯的值，這些值可以被提交給服務器進行處理。創(chuàng)建表單的基本語法格式為：<formaction="服務器端處理腳本的URL"method="提交方式">

各種表單控件</form>action屬性：指定了表單數(shù)據(jù)提交的目標URL，即服務器端處理腳本的位置。這個值可被button元素、類型為"submit"或"image"的input元素素上的formaction屬性覆蓋，使得不同的提交按鈕可以將表單數(shù)據(jù)提交到不同的URL。method屬性：指定了表單數(shù)據(jù)的提交方式，通常是GET或POST。GET方法將表單數(shù)據(jù)附加在URL后面，適合數(shù)據(jù)量小、安全性要求不高的場景。POST方法將數(shù)據(jù)放在HTTP請求體中，適合數(shù)據(jù)量大、安全性要求高的場景。

21知識準備—創(chuàng)建表單1知識準備--form元素除action和method屬性外，還有以下幾個常用屬性：（1）name屬性Name屬性代表了表單在其所屬的forms集合中的名稱。（2）autocomplete屬性autocomplete屬性是一個枚舉屬性，值為"on"時表明瀏覽器可以自動填充表單中的字段，基于用戶以前的輸入或偏好設置；值為"off"時指示瀏覽器不應自動填充表單中的字段，即禁用了自動完成功能。（3）enctype屬性enctype屬性是一個枚舉類型，定義在提交表單時如何編碼表單數(shù)據(jù)。（4）novalidate屬性novalidate屬性時一個布爾屬性，如果存在，則在提交表單時不觸發(fā)HTML5的內置驗證。

21知識準備—創(chuàng)建表單1知識準備--2.label元素label元素在用戶界面中代表一個標題或標簽，其作用是為表單控件提供描述性的文本標簽。Label元素可以與某個特定的表單控件相關聯(lián)，這個控件被稱為label元素的被標記控件。關聯(lián)可以通過使用for屬性來指定，或者通過將表單控件直接放置在label元素內部來實現(xiàn)，當用戶點擊label元素時，與之關聯(lián)的控件會立即獲得焦點，就像直接點擊控件本身一樣。如果使用了for屬性，其值必須是與label元素在同一樹結構中的某個可標記元素的ID。如果沒有指定for屬性，但是label元素有一個可標記元素作為后代，那么按樹順序排列的第一個這樣的后代就是label元素的被標記控件。

21知識準備—input元素及屬性1知識準備--input元素是HTML中用于接收用戶輸入的最基本和最常用的表單控件之一。它可以根據(jù)type屬性的不同取值，提供多種類型的輸入控件。下面是input元素的基本語法格式：<inputtype="類型"屬性="值"/>input元素除type屬性外，還有其他很多屬性，有些屬性僅在特定的type狀態(tài)下才有效。1.單行文本輸入框<inputtype="text"/>單行文本輸入框是input元素的默認類型，用于輸入單行文本,如用戶名、地址等。常用的屬性有name、value、placeholder、maxlength、readonly、disabled等。對于HTML5新增的input類型，如果瀏覽器不支持某種類型的話，也將顯示成單行文本輸入框。2.密碼輸入框<inputtype="password"/>密碼輸入框用于輸入密碼，輸入內容會以掩碼形式顯示。3.單選按鈕<inputtype="radio"/>單選按鈕用于用戶從多個選項中選擇一個，如選擇性別、是否完成等。它的name屬性可用于分組單選按鈕，所有具有相同name值的單選按鈕屬于同一組，用戶在一組中只能選擇一個選項；value屬性定義當單選按鈕被選中時提交給服務器的值；checked屬性則表示該單選按鈕默認被選中，需要注意的是一個分組中最多只能有一個單選按鈕設置了checked屬性。

21知識準備—input元素及屬性1知識準備--4.復選框<inputtype="checkbox"/>復選框允許用戶在一組選項中選擇一個或多個項目。與單選按鈕不同，單選按鈕在同一名稱下只允許選擇一個選項，而復選框允許用戶自由選擇任意數(shù)量的選項。復選框的name屬性應當相同，這樣服務器端可以容易地處理這些復選框作為一個集合。如果name屬性不同，那么每個復選框都會被視為獨立的輸入項。checked屬性是一個布爾屬性，表示復選框是否被選中，它沒有值，只有存在或不存在兩種狀態(tài)。如果想在JavaScript中取消選中一個復選框，應該使用element.checked=false。5.普通按鈕<inputtype="button"/>普通按鈕用于創(chuàng)建一個按鈕，該按鈕在網頁上可以被點擊，但不會自動提交表單。相反，它通常用于觸發(fā)JavaScript函數(shù)，從而執(zhí)行某些客戶端腳本動作，如彈出警告框、進行計算、顯示/隱藏元素等。6.提交按鈕<inputtype="submit"/>提交按鈕用于創(chuàng)建一個提交按鈕，當用戶點擊這個按鈕時，會觸發(fā)表單的提交過程。這是最常見的用于將表單數(shù)據(jù)發(fā)送到服務器的方式之一。提交按鈕通常位于表單的底部，作為用戶完成表單填寫后的操作選項。value屬性定義了按鈕上顯示的文本或圖標,默認情況下，按鈕上顯示的是"Submit"字樣。

21知識準備—input元素及屬性1知識準備--7.重置按鈕<inputtype="reset"/>重置按鈕用于創(chuàng)建一個重置按鈕，當用戶點擊這個按鈕時，表單中的所有字段將恢復到它們的初始狀態(tài)或默認值。這對于允許用戶清除所有已輸入的信息并從頭開始非常有用，尤其是在表單比較長或復雜的情況下。value屬性定義了按鈕上顯示的文本，默認情況下，按鈕上顯示的是"Reset"字樣。8.圖像形式的提交按鈕<inputtype="image"/>圖像形式的提交按鈕用于創(chuàng)建一個圖像形式的提交按鈕，當用戶點擊這個圖像時，表單會像點擊普通提交按鈕一樣被提交。圖像形式的提交按鈕還提供了額外的功能，即它可以捕獲用戶點擊圖像的確切坐標，這在需要根據(jù)圖像的不同區(qū)域觸發(fā)不同行為的場景中特別有用，如適合用于熱區(qū)地圖（hotspotmaps）或需要基于圖像不同區(qū)域進行響應的應用場景。9.隱藏域<inputtype="hidden"/>隱藏域用于在HTML表單中創(chuàng)建一個隱藏字段。這種類型的輸入元素不會在頁面上顯示任何可見的控件，但當表單被提交時，它會將一個名稱/值對發(fā)送到服務器。隱藏字段通常用于存儲將在服務器端處理或用于某種內部邏輯的值，但不需要用戶直接輸入或看到。非常適合存儲諸如用戶ID、會話ID、交易參考號等后臺處理所需的信息，但不應該用來存儲敏感信息，如密碼，因為這些信息可以通過查看頁面源代碼或網絡請求輕易獲取。

21知識準備—input元素及屬性1知識準備--10.文件域<inputtype="file"/>文件域用于讓用戶上傳文件的HTML輸入類型。允許用戶從他們的計算機中選擇一個或多個文件，并將其作為表單的一部分提交到服務器。multiple屬性允許用戶可以選擇多個文件上傳，否則，默認情況下只能選擇一個文件；accept屬性用于指定允許上傳的文件類型。例如，accept="image/*"表示只允許圖像文件被選擇；必需包含enctype="multipart/form-data"屬性才能正確地將文件數(shù)據(jù)編碼并發(fā)送到服務器。案例6-2演示text、password、radio、checkbox、button、submit、reset、image、hidden類型的input元素的用法，制作一個“學生基本信息收集”表單頁面，并使用CSS來美化表單界面。

21知識準備—input元素及屬性1知識準備--前面學習的10種類型的input元素是常見的表單輸入類型，是所有瀏覽器都支持的類型。接下來學習的在HTML5標準中新增的12種類型，稱之為HTML5新增表單輸入類型，已經被大多數(shù)瀏覽器所支持，這些新增類型提供了更好的輸入控制和驗證，對于瀏覽器不支持的輸入類型，將會在網頁中顯示為一個單行文本輸入框。11.Email地址的輸入域<inputtype="email"/>Email地址的輸入域是一種專門用于輸入E-mail地址的輸入框。案例6-3演示email類型input元素的用法，在form元素包含兩個類型分別為email和submit的input元素。

21知識準備—input元素及屬性1知識準備--當提交表單時，如果輸入內容不符合Email郵件地址格式，就會在輸入框旁邊提示相應的錯誤信息，如圖所示。在這里需要注意，根據(jù)默認提供的約束，用戶輸入a@b是合法的。這是因為email類型默認允許內部網電子郵件地址。要實現(xiàn)不同的驗證行為，可以使用pattern屬性，也可以自定義錯誤消息。如果將multiple屬性與email類型結合使用，就允許在同一輸入框中輸入用逗號分隔的，多個電子郵件地址。在案例6-3的基礎上新增multiple屬性，然后保存后運行，在email類型輸入框中輸入a@b,ab@126.com，最后單擊提交按鈕，由于form元素未使用method屬性，則默認使用get方式提交數(shù)據(jù)且數(shù)據(jù)會顯示到URL中，預覽效果如圖所示。

21知識準備—input元素及屬性1知識準備--12.搜索域<inputtype="search"/>search類型是一種專門用于輸入搜索關鍵詞的文本框，通常，search字段以圓角呈現(xiàn)，它們有時在用戶輸入內容后，其右側會附帶一個刪除圖標，單擊這個圖標按鈕可以快速清除內容。此外，在帶有動態(tài)鍵盤的設備上，鍵盤的回車鍵可能會顯示“搜索”，或顯示放大鏡圖標，如圖所示。另一個值得注意的功能是search字段的值可以自動保存并重新使用。

21知識準備—input元素及屬性1知識準備--13.電話號碼輸入類型<inputtype="tel"/>tel類型是一種專門用于提供輸入電話號碼的文本框，由于世界各地的電話號碼格式千差萬別，這種類型的字段不會對用戶輸入的值執(zhí)行任何限制。因此，需要對輸入的值進行約束時，tel類型通常會和pattern屬性配合使用。當通過帶有動態(tài)鍵盤的觸摸設備訪問時會顯示數(shù)字鍵盤，提高了用戶的體驗，如圖所示。

21知識準備—input元素及屬性1知識準備--14.URL地址輸入域<inputtype="url"/>url類型是一種專門用于輸入URL地址的文本框。案例6-4演示url類型input元素的用法，在form元素包含兩個類型分別為url和submit的input元素。當提交表單時，如果輸入內容沒有輸入?yún)f(xié)議或者URL格式不正確，就會在輸入框旁邊提示相應的錯誤信息，如下圖所示。根據(jù)默認提供的約束，用戶輸入a：b是合法的，但并不一定意味著它指的是實際存在的位置，要實現(xiàn)更嚴格的驗證行為，可以使用pattern屬性。當通過帶有動態(tài)鍵盤的觸摸設備訪問時會顯示全部或部分包含冒號、句點和正斜杠的默認鍵盤，提高了用戶的體驗。

21知識準備—input元素及屬性1知識準備--15.數(shù)值輸入域<inputtype="number"/>number類型是一種專門用于輸入浮點數(shù)的文本框，并且通常以微調器的形式提供按鈕來增加或減少框中的值。在帶有動態(tài)鍵盤的設備上，通常顯示數(shù)字鍵盤。在提交表單時，會自動檢查該輸入框中的內容是否為數(shù)字。如果輸入的內容不是數(shù)字或者數(shù)字不在限定范圍內，則會出現(xiàn)錯誤提示?？梢酝ㄟ^設置min和max屬性來限制允許的最小值和最大值。還可以使用該step屬性來設置數(shù)字間隔，也就是按下輸入框左側微調按鈕引起的增量或減量。默認情況下，number類型僅驗證數(shù)字是否為整數(shù)。要允許浮點數(shù)，請指定step的值為"any"。如果省略，則該step值默認為1，這意味著只有整數(shù)有效。案例6-5演示number類型input元素的用法，在form元素包含兩個類型分別為number和submit的input元素,將其值限制為1到10之間，其數(shù)字間隔為2，這樣的話就只有1，3，5，7，9是合法的數(shù)字，輸入最大值10也是無效的。

21知識準備—input元素及屬性1知識準備--在案例6-5的基礎上，新建案例6-6，將number類型的input元素的值限制為介于0和6之間，其數(shù)字間隔為any，表示允許有任意小數(shù)位且范圍在0和6之間的浮點數(shù)，這里要注意，按下輸入框左側微調按鈕引起的增量或減量為1。

21知識準備—input元素及屬性1知識準備--16.一定范圍內數(shù)字值的輸入域<inputtype="range"/>range類型是一種專門用于提供一定范圍內數(shù)值的輸入類型，在網頁中顯示為滑動條。它的常用屬性與number類型一樣,通過min屬性和max屬性，可以設置最小值和最大值，通過step屬性指定每次滑動的步幅。案例6-7演示range類型input元素的用法，在form元素包含兩個類型分別為range和submit的input元素,將其值限制為0到6之間，其步幅為1。

21知識準備—input元素及屬性1知識準備--17.顏色輸入類型<inputtype="color"/>color類型用于實現(xiàn)一個RGB格式顏色值的輸入。其基本形式是#RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色。單擊color類型輸入框，會彈出拾色器面板，方便用戶可視化選取一種顏色，單擊提交按鈕后，將會提交一個6位的十六進制顏色。案例6-8演示color類型input元素的用法，在form元素包含兩個類型分別為color和submit的input元素。

21知識準備—input元素及屬性1知識準備--單擊提交按鈕后，在瀏覽器地址欄中出現(xiàn)?color=%233d0a0a，這里？表示get方式提交表單傳遞的參數(shù)將放在？后面；color是參數(shù)名也是color類型的input元素的name屬性值；%23代表的是#符號，這是十六進制顏色代碼的標準前綴；而3d0a0a是一個具體的十六進制顏色值，代表了一種特定的暗紅色。預覽效果如圖所示。

21知識準備—input元素及屬性1知識準備--18.日期時間類輸入域HTML5新增了date類型用于輸入或選取年、月、日，精確到的最小日期單位是日；month類型用于輸入或選取年、月，精確到的最小日期單位是月；week類型用于輸入或選取年、周，精確到的最小日期單位是周；time類型用于輸入或選取時間，包括小時和分，但不包括秒，精確到的最小時間單位是分；datetime-local類型用于輸入或選取一個本地化的日期時間，它的結果值包括年、月、日、小時和分，但不包括秒，是最詳細的時間選擇類型。相對而言，這種類型的支持性也一般，并且不同瀏覽器在輸入方法上存在差異。通常會使用date類型和time類型聯(lián)合使用來代替它。這五種日期和時間選擇器都可以使用min和max屬性進行約束，并可以通過step屬性進行進一步的約束。用戶在使用這些輸入框時，既可以直接輸入內容，也可以單擊輸入框左側的按鈕進行選擇。

21知識準備—input元素及屬性1知識準備--案例6-9演示month類型input元素的用法，在form元素包含兩個類型分別為month和submit的input元素,將其值限制為2024-01到2024-08之間，其步幅為1。預覽效果如左圖所示。單擊提交按鈕后，在瀏覽器地址欄中出現(xiàn)了?month=2024-04。預覽效果如右圖所示。

實戰(zhàn)演練—制作“垃圾分類問卷調查”表單2本次任務主要是利用form元素、label元素、各種類型的input元素及屬性等知識點完成“垃圾分類問卷調查”表單的制作，從上到下依次是問卷標題、個人信息收集、選擇題和提交按鈕。個人信息收集部分收集參與者的姓名和郵箱，選擇器部分包含一個單選題和一個多選題。并要求能適應不同尺寸的瀏覽器寬度。預覽效果如圖所示。

實戰(zhàn)演練—制作“垃圾分類問卷調查”表單2“垃圾分類問卷調查”表單制作思路為用一個form元素作為表單容器，設置action和method屬性來指定表單提交的URL和方法。使用h1元素作為表單的標題，強調問卷的主題。為每個輸入字段使用label元素提高表單的可訪問性。個人信息收集使用text和email類型的input元素收集姓名和郵箱，使用placeholder屬性為輸入字段提供提示信息，利用required屬性確保重要字段的完整性。使用radio和checkbox類型的input元素來創(chuàng)建單選和多選題，并為每個選擇項提供清晰的標簽描述。使用submit類型的input元素，方便用戶提交問卷。通過流式布局實現(xiàn)網頁能適應不同尺寸的瀏覽器寬度?？梢苑殖扇絹硗瓿桑菏紫戎谱鳌袄诸悊柧碚{查”表單的HTML結構代碼；其次編寫基礎CSS代碼；最后設置每個部分的樣式。

實戰(zhàn)演練—制作“垃圾分類問卷調查”表單21.制作“垃圾分類問卷調查”表單的HTML結構代碼

實戰(zhàn)演練—制作“垃圾分類問卷調查”表單22.編寫基礎CSS代碼給body元素設置全局字體、淺灰色背景顏色、清除body元素的默認外邊距和內邊距，讓頁面內容緊密貼合瀏覽器窗口。給form元素限制容器的最大寬度為600px；設置表單的垂直外邊距為50像素，水平外邊距為auto，使表單在頁面中居中顯示；設置白色背景；設置表單的內邊距，使表單內容與表單邊緣保持一定的距離；同時通過添加圓角效果，輕微的陰影效果，適當?shù)膬冗吘鄟硖嵘曈X層次。

實戰(zhàn)演練—制作“垃圾分類問卷調查”表單23．設置每個部分的樣式給h1元素設置標題文本居中對齊，在標題底部留出20像素的外邊距，以便與其他內容分隔開。將label元素顯示為塊級元素，在每個標簽的頂部留出外邊距，以提供足夠的垂直間隔。給類型為text和email類型的input元素設置寬度、添加內邊距、上外邊距；設置邊框樣式和圓角。給類型為radio和checkbox的input元素，設置右外邊距，以便為后續(xù)的文字標簽留出空間。將按鈕顯示為塊級元素，占據(jù)其父容器的全部寬度；添加內邊距、上外邊距、設置背景顏色、設置文本顏色、移除按鈕的邊框；添加圓角，使按鈕看起來更平滑；設置光標為手型，提示用戶這是一個可點擊的元素。當鼠標懸停在button元素上時，改變按鈕的背景顏色為更深的綠色，提供視覺反饋，表明按鈕處于活動狀態(tài)。

進階訓練—制作“快遞單錄入”表單3本次任務主要是利用form元素、label元素、各種類型的input元素及屬性、HTML5的內置屬性來實現(xiàn)前端驗證等知識點完成“快遞單錄入”表單的制作，從上到下依次是表單標題、寄件人信息、收件人信息、物品信息、報價服務和提交按鈕。寄件人信息和收件人信息都包括姓名、電話和地址，物品信息包括物品描述和物品價值。并要求能適應不同尺寸的瀏覽器寬度。預覽效果如圖所示。

進階訓練—制作“快遞單錄入”表單3表單驗證表單驗證是在用戶提交表單之前確保數(shù)據(jù)的有效性和完整性的過程。驗證可以分為前端驗證和后端驗證兩大部分。前端驗證通常使用HTML5的內置屬性和JavaScript來實現(xiàn)。后端驗證則依賴于服務器端的編程語言，后端驗證是必需的，即使進行了前端驗證，因為前端驗證可以被繞過，后端驗證通常涉及到數(shù)據(jù)庫查詢、業(yè)務規(guī)則檢查等。這部分內容主要講解使用HTML5的內置屬性來實現(xiàn)前端驗證，HTML5有一個特別有用的新功能就是可以在不寫一行腳本代碼的情況下，即對用戶的輸入進行數(shù)據(jù)校驗，這都是通過表單元素的校驗屬性實現(xiàn)的，這些屬性可以定義一些規(guī)則，用于限定用戶的輸入，比如前面知識點部分使用min和max屬性設置數(shù)值字段的最小和最大值；使用step屬性設置數(shù)值字段的增量；使用HTML5新增的email、number、url、date、time等，自動進行類型驗證;使用minlength和maxlength屬性來限制長度等；還可以使用required屬性來確保字段必須填寫和使用pattern屬性結合使用正則表達式來限制輸入格式。如果表單中輸入的數(shù)據(jù)都符合這些限定規(guī)則，那么表示這個表單校驗通過，否則則認為校驗未通過。當一個元素校驗通過時，該元素將可以通過CSS偽類:valid進行特殊的樣式化；如果一個元素未校驗通過，該元素將可以通過CSS偽類:invalid進行特殊的樣式化。

進階訓練—制作“快遞單錄入”表單31.使用required屬性來確保字段必須填寫使用required屬性是最簡單的HTML5校驗功能，它使輸入成為必需的。當設置此屬性時，如果輸入為空，該表單將不會提交（并將顯示錯誤消息），輸入也將被視為無效。案例6-10演示使用required屬性來確保字段必須填寫，在form元素包含兩個類型分別為text和submit的input元素,給類型為text的input元素上添加required屬性，并設置在校驗失敗時，輸入框會有一個亮紅色的虛線邊框，在校驗通過時會有一個更微妙的黑色邊框樣式。

進階訓練—制作“快遞單錄入”表單32.使用pattern屬性結合使用正則表達式來限制輸入格式使用pattern屬性結合使用正則表達式來限制輸入格式是理想的表單校驗器。正則表達式相當復雜，是本模塊任務2拓展學習指導中的內容，在這里只是個簡單的正則表達式的應用。在案例6-10的基礎上，新建案例6-11，給類型為text的input元素增加一個pattern屬性，屬性值為"足球|籃球"，表示接受兩個值中的一個：字符串"足球"或者字符串"籃球"。

進階訓練—制作“快遞單錄入”表單3“快遞單錄入”表單制作思路為用一個form元素作為表單容器，設置action和method屬性來指定表單提交的URL和方法。使用h1元素作為表單的標題，強調表單的主題。寄件人信息、收件人信息、物品信息、報價服務使用h2元素，為每個輸入字段使用label元素提高表單的可訪問性。寄件人信息和收件人信息收集使用text和tel類型的input元素收集姓名、地址和電話，利用required屬性確保重要字段的完整性，電話利用pattern屬性來限定輸入必須是11位數(shù)字，這符合中國手機號碼的標準格式，確保輸入的有效性。使用text和number類型的input元素來創(chuàng)建物品描述和物品價值，物品價值限制為非負數(shù)，且可以接受小數(shù)點后兩位。保價服務使用單選按鈕組實現(xiàn)。使用submit類型的input元素，方便用戶提交快遞單。通過流式布局實現(xiàn)網頁能適應不同尺寸的瀏覽器寬度?？梢苑殖扇絹硗瓿桑菏紫戎谱鳌翱爝f單錄入”表單的HTML結構代碼；其次編寫基礎CSS代碼；最后設置每個部分的樣式。

進階訓練—制作“快遞單錄入”表單31.

制作“快遞單錄入”表單的HTML結構代碼

進階訓練—制作“快遞單錄入”表單32.編寫基礎CSS代碼給body元素設置全局字體、淺灰色背景顏色、清除body元素的默認外邊距和內邊距，讓頁面內容緊密貼合瀏覽器窗口。給form元素限制容器的最大寬度為600px；設置表單的垂直外邊距為50像素，水平外邊距為auto，使表單在頁面中居中顯示；設置白色背景；設置表單的內邊距，使表單內容與表單邊緣保持一定的距離；同時通過添加圓角效果，輕微的陰影效果，適當?shù)膬冗吘鄟硖嵘曈X層次。

進階訓練—制作“快遞單錄入”表單33．設置每個部分的樣式給h1元素設置標題文本居中對齊，在標題底部留出20像素的外邊距，以便與其他內容分隔開。將label元素顯示為塊級元素，在每個標簽的頂部留出外邊距，以提供足夠的垂直間隔。給類型為text、tel和number類型的input元素設置寬度、添加內邊距、上外邊距；設置邊框樣式和圓角。給類型為radio的input元素，設置右外邊距，以便為后續(xù)的文字標簽留出空間。通過CSS偽類:invalid給無效的input元素（即未通過HTML5前端驗證的輸入框），設置邊框顏色為紅色，以視覺上提醒用戶輸入錯誤或遺漏。將按鈕顯示為塊級元素，占據(jù)其父容器的全部寬度；添加內邊距、上外邊距、設置背景顏色、設置文本顏色、移除按鈕的邊框；添加圓角，使按鈕看起來更平滑；設置光標為手型，提示用戶這是一個可點擊的元素。當鼠標懸停在button元素上時，改變按鈕的背景顏色為更深的綠色，提供視覺反饋，表明按鈕處于活動狀態(tài)。

4動手實踐—制作“學生信息登記表”表單4設計并制作如圖所示的“學生信息登記表”表單。頁面使用form元素、label元素、各種類型的input元素及屬性、HTML5的內置屬性來實現(xiàn)前端驗證、header元素、footer元素、main元素等知識點制作“學生信息登記表”表單，要求姓名不能為空，2至6個字符；身高限定到100至230厘米的浮點型數(shù)值；電話限定為11位的手機號。小結知識準備——表單與input元素實戰(zhàn)演練——制作“垃圾分類問卷調查”表單進階訓練——制作“快遞單錄入”表單動手實踐——制作“學生信息登記表”表單模塊六HTML5表單的應用任務2其他表單元素網頁制作CSSHTML知識準備——其他表單元素實戰(zhàn)演練——制作“會員注冊”表單其他表單元素0201進階訓練——制作“商品訂購”表單03動手實踐——制作“圖書館圖書預約”表單04

1.掌握其他表單元素

2.了解正則表達式其他表單元素學習目標：

1.培養(yǎng)責任意識與誠信，使其在互聯(lián)網時代有保護個人信息的責任感，認識到輸入驗證不僅是技術需求，也是對用戶負責的表現(xiàn)，避免虛假信息的傳播，維護網絡空間的健康秩序。

2.培養(yǎng)公民素養(yǎng)與法治觀念，引導其遵守網絡法規(guī)，不濫用技術手段，合法合規(guī)地處理數(shù)據(jù)，

3.培養(yǎng)創(chuàng)新精神，鼓勵學生創(chuàng)造性地解決問題，設計更加人性化、高效的信息交互界面，體現(xiàn)創(chuàng)新思維。其他表單元素思政目標：

21知識準備—textarea元素1知識準備--textarea元素用于創(chuàng)建一個可以讓用戶輸入多行文本的框。這個框可以被用來收集用戶的評論、留言或者其他任何需要多行文本輸入的信息。textarea元素之間的文本會被瀏覽器顯示為控件內的默認文本，當用戶開始在其中輸入時，這些默認文本會被替換。textarea元素常用的屬性有autocomplete、name、value、placeholder、maxlength、minlength、form、cols、rows、required、readonly,disabled等。其中cols屬性用來設定文本框每行可顯示的字符數(shù)量。如果cols的值是有效并且大于零的非負整數(shù)，文本框就會以此值作為每行的字符寬度。如果cols屬性的值不符合這些條件（比如，它不是一個數(shù)字或者是一個負數(shù)），那么每行的字符寬度將默認為20個字符。rows屬性用于設置文本框應該顯示的行數(shù)。如果rows的值是有效的且大于零的非負整數(shù)，那么文本框將以這個值作為它的行數(shù)。如果rows屬性的值無效（例如，不是數(shù)字或者是一個負數(shù)），則文本框的默認行數(shù)會被設定為2行。textarea元素本身并不直接支持width和height屬性來設置其尺寸。然而，這兩個屬性常常通過CSS來間接控制textarea的寬度和高度

21知識準備—select元素、option元素和optgroup元素1知識準備--select元素、option元素和optgroup元素是用于創(chuàng)建下拉列表的組成部分。1.select元素select元素用于定義一個下拉列表的容器，用戶可以從其中選擇一個或多個選項。基本語法如下：<selectname="name"><option>選項1</option><option>選項2</option><option>選項3</option>…</select>其中name屬性是必需的，用于在表單提交時標識這個select元素，常用的屬性還有multiple和size。multiple屬性被添加到select元素中時，用戶可以選擇多個選項。size屬性定義了在沒有滾動的情況下可見的選項數(shù)目。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.option元素option元素用于定義select下拉列表中的每個可選項。基本語法如下：<optionvalue="value">選項文本</option>其中value屬性是發(fā)送給服務器的值，而“選項文本”是在下拉列表中顯示給用戶的文本。常用的屬性還有selected，selected屬性被添加到option元素中時，表示當前項時默認選擇項。3.optgroup元素optgroup元素表示一組具有公共標簽的option元素，也就是用于對select下拉列表中的option元素進行分組，通常用于邏輯上相關的選項。它可以包含一個label屬性，用于定義組的標題。基本語法如下：<optgrouplabel="組標題"><optionvalue="value1">選項1</option><optionvalue="value2">選項2</option>…</optgroup>

21知識準備—select元素、option元素和optgroup元素1知識準備--案例6-12演示select元素、option元素和optgroup元素的用法，創(chuàng)建兩個下拉列表，第一個使用optgroup元素對可選項進行了分組，是一個單選下拉列表；第二個時多選下拉列表，使用size屬性設置了三個同時可見的可選項，同時指定一項可選項為默認選擇項。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.1.3datalist元素datalist元素用于定義一個選項列表，這個列表可以被input元素使用，以提供自動完成或提示建議。當input元素的list屬性引用了一個datalist元素的id時，用戶在輸入框中開始輸入時，瀏覽器會顯示datalist中定義的option元素作為建議列表。datalist元素本身不會在頁面上顯示，它的作用主要是為輸入控件提供數(shù)據(jù)源。案例6-13演示datalist元素的用法，一個輸入框，用于用戶輸入城市名，使用datalist元素提供自動完成功能。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.1.4output元素output元素表示由應用程序執(zhí)行的計算結果，或是用戶動作所產生的結果。這個元素主要用于顯示動態(tài)生成的內容，如表單中兩個數(shù)值輸入字段的計算結果，或者是游戲中玩家得分的實時更新。通過與JavaScript結合使用，output元素可以即時反映用戶輸入或操作的變化，從而提供更互動和響應式的用戶體驗output元素的for屬性包含一個或多個id，指向那些其值用于計算結果的輸入元素。當這些輸入元素的值改變時，output元素的內容應該相應更新。

21知識準備—select元素、option元素和optgroup元素1知識準備--案例6-14演示output元素的用法，兩個number類型的input元素、一個button元素和一個output元素，output元素通過for屬性與兩個input元素關聯(lián)，button元素的onclick屬性值為一個函數(shù)。在JavaScript腳本中編制這個函數(shù)，實現(xiàn)當用戶點擊“計算求和”按鈕時，計算兩個輸入框的值之和，并將結果輸出到output元素中。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.1.5progress元素progress元素表示某項任務的完成進度。它提供了一種直觀的方式，讓用戶了解一個操作或任務的完成狀態(tài)，比如文件上傳、數(shù)據(jù)下載或后臺處理進程的進度。progress元素有兩個關鍵屬性：value和max。value屬性表示當前已完成的工作量。max屬性表示完成整個任務所需的總工作量。當value屬性的值小于max屬性的值時，進度條顯示為部分填充，表示任務尚未完成。當value等于max時，進度條顯示為完全填充，表示任務已完成。有時，可能無法確切知道完成任務還需要多少工作量，例如在網絡請求等待響應時。在這種情況下，可以省略value屬性，使進度條處于不確定狀態(tài)，表示任務正在進行中，但不知道具體完成多少。大多數(shù)現(xiàn)代瀏覽器會顯示一個動態(tài)的動畫，通常是一個不斷移動的條紋或光標，來回滑動或閃爍，表示任務在后臺運行但具體進度未知。為了增加可訪問性，推薦在progress元素內部包含一段文字，描述當前的進度狀態(tài)，這樣使用屏幕閱讀器的用戶也能理解進度信息。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.1.6meter元素meter元素表示一個數(shù)值在一個已知范圍內的標量測量，它可以用于顯示諸如磁盤使用率、查詢結果的相關度、環(huán)境溫度或濕度等指標。meter元素通常用來提供一個直觀的視覺反饋，顯示一個數(shù)值相對于某個范圍的位置。屬性描述value表示當前測量的值。這是必須指定的屬性，否則meter元素將不會顯示有效內容min定義了測量范圍的最小值，默認為0max定義了測量范圍的最大值，默認為1low標記了范圍內的“低”值。如果測量值低于這個值，meter元素將顯示為“低”high標記了范圍內的“高”值。如果測量值高于這個值，meter元素將顯示為“高”optimum表示最佳或理想的測量值。如果測量值與optimum值相同，meter元素將突出顯示這一點

21知識準備—select元素、option元素和optgroup元素1知識準備--案例6-15演示meter元素的用法，用四個meter元素顯示了服務器的CPU的低、最佳、適中和高的使用情況對比。meter元素的min和max分別設為0和100，因為CPU使用率的范圍是從0%到100%。low和high值設為20和80，這意味著低于20%和高于80%的使用率被視為不理想，而optimum值設為50%，表示這是理想的CPU使用率。

21知識準備—select元素、option元素和optgroup元素1知識準備--2.1.7fieldset元素和legend元素fieldset元素代表了一組表單控件（或其他內容），這些控件可以帶有可選的標題。標題由fieldset元素的首個legend子元素給出，如果有的話。除了標題之外的其余子元素構成了該組的內容。1.fieldset元素fieldset元素用于將表單中的控件和標簽分組。它在視覺上創(chuàng)建了一個圍繞這些控件的邊框，幫助用戶識別哪些控件屬于同一組，從而提高表單的可讀性和可用性。2.legend元素legend元素用于為fieldset元素提供一個標題或標簽，描述該組控件的目的。legend元素應該直接位于fieldset的開頭，作為其第一個子元素，這樣屏幕閱讀器可以首先讀出這一描述，幫助視力障礙用戶理解接下來的控件組是關于什么的。

21知識準備—select元素、option元素和optgroup元素1知識準備--案例6-16演示fieldset元素和legend元素的用法，用兩個fieldset元素用于將聯(lián)系信息和郵寄地址分別分組，而legend元素則提供了每組的標題。

實戰(zhàn)演練—制作“會員注冊”表單2本次任務主要是利用form元素、label元素、各種類型的input元素及屬性、fieldset元素、legend元素、output元素、textarea元素、select元素、HTML5的內置屬性來實現(xiàn)前端驗證等知識點完成完成“會員注冊”表單的制作，從上到下依次是表單標題、基本信息、聯(lián)系方式、興趣愛好和注冊按鈕。基本信息包括用戶名、電子郵箱、密碼和確認密碼和一個顯示兩次密碼是否一樣的output元素，聯(lián)系方式包括電話和地址，興趣愛好包括一個下拉列表。并要求能適應不同尺寸的瀏覽器寬度。預覽效果如圖所示。

實戰(zhàn)演練—制作“會員注冊”表單2“會員注冊”表單制作思路為用一個form元素作為表單容器，設置action和method屬性來指定表單提交的URL和方法。使用h1元素作為表單的標題，強調表單的主題?；拘畔ⅰ⒙?lián)系方式、興趣愛好部分用fieldset元素進行分組，legend元素定義分組的標題。基本信息部分使用text、email和password類型的input元素收集用戶名、電子郵箱、密碼和確認密碼，且利用required屬性確保重要字段的完整性，利用pattern屬性來限定密碼至少8個字符，監(jiān)聽確認密碼的input事件，比較兩次的密碼是否一樣，把比較結果顯示在output元素中。聯(lián)系方式部分使用tel類型的input元素收集電話信息，textarea元素收集地址信息，電話信息使用required和pattern屬性對電話進行驗證。興趣愛好部分使用select元素和option元素提供多個選項可供選擇。使用submit類型的button元素，方便注冊。通過流式布局實現(xiàn)網頁能適應不同尺寸的瀏覽器寬度?？梢苑殖扇絹硗瓿桑菏紫戎谱鳌翱爝f單錄入”表單的HTML結構代碼；其次復用模塊六任務1中制作“快遞單錄入”表單中的CSS代碼，并新增CSS代碼；最后實現(xiàn)密碼比對的交互功能。

實戰(zhàn)演練—制作“會員注冊”表單2

1.制作“會員注冊”表單的HTML結構代碼

實戰(zhàn)演練—制作“會員注冊”表單22.復用并新增CSS代碼復用制作“快遞單錄入”表單中的CSS代碼，只需對選擇器名稱進行簡單修改即可。給fieldset元素設置邊框、下外邊距、和內邊距，legend元素設置字體加粗和左右兩側的內邊距。3.實現(xiàn)密碼比對的交互功能通過getElementById方法獲取頁面上的確認密碼輸入框，并給獲取的輸入框添加一個事件監(jiān)聽器，事件類型是'input'，意味著每當輸入框中的內容發(fā)生變化時，就會觸發(fā)后面的匿名函數(shù)。在匿名函數(shù)內，使用getElementById方法獲取頁面上的密碼輸入框和顯示比對結果的output元素，然后比較“密碼”和“確認密碼”的值是否完全相同，如果相同，則更新output元素的文本內容為“密碼匹配”，并將文本顏色設為綠色，表示成功；如果不相同，則更新<output>元素的文本內容為“密碼不匹配”，并將文本顏色設為紅色，表示有錯誤。

進階訓練—制作“商品訂購”表單3本次任務主要是利用form元素、label元素、各種類型的input元素及屬性、fieldset元素、legend元素、output元素、textarea元素、select元素、radio元素、HTML5的內置屬性來實現(xiàn)前端驗證和正則表達式等知識點完成完成“商品訂購”表單的制作，從上到下依次是表單標題、訂購者信息、商品信息、配送信息、支付方式和提交訂單按鈕。訂購者信息包括姓名、電子郵箱和聯(lián)系電話。商品信息包括商品名稱、數(shù)量和單價，配送信息包括配送地址和配送方式。支付方式是一個單選按鈕組。并要求能適應不同尺寸的瀏覽器寬度。預覽效果如圖所示。

進階訓練—制作“商品訂購”表單3正則表達式正則表達式（RegularExpression，常簡寫為regex或regexp）是計算機科學中的一個概念，它使用單個字符串來描述和匹配符合某個句法規(guī)則的字符串序列。正則表達式通過普通字符和元字符的組合，形成一種文本模式，用于檢索、替換符合某種模式的文本，或從文本中提取符合條件的子串。這種模式匹配技術廣泛應用于字符串操作中，如驗證表單、替換文本、提取字符串等。?1.普通字符普通字符指的是那些沒有特殊含義、代表其自身的字符。當這些字符出現(xiàn)在正則表達式中時，它們會按照字面意義去匹配文本中的相同字符。例如，如果想在文本中查找所有的單詞“hello”，可以直接使用正則表達式hello，這將匹配所有出現(xiàn)的完整單詞“hello”。2.元字符元字符是具有特殊含義的字符，用于構建復雜的文本匹配模式。這些元字符大致可以分為以下幾類：（1）重復量詞重復量詞是允許指定某個模式應該出現(xiàn)的次數(shù)，這極大地增強了正則表達式的靈活性和表達力。重復量詞通常用于控制模式的重復次數(shù)，從而使正則表達式能夠匹配更復雜的字符串模式。

進階訓練—制作“商品訂購”表單3（1）重復量詞重復量詞是允許指定某個模式應該出現(xiàn)的次數(shù)，這極大地增強了正則表達式的靈活性和表達力。重復量詞通常用于控制模式的重復次數(shù)，從而使正則表達式能夠匹配更復雜的字符串模式。

符號描述例子*匹配前面的表達式零次或多次，等價于{0,}a*b匹配b或ab或aaab等+匹配前面的表達式一次或多次，等價于{1,}a+b匹配ab或aab，但不匹配b?匹配前面的表達式零次或一次，等價于{0,1}a?b匹配b或ab{n}匹配前面的表達式恰好n次a{3}匹配aaa{n,}匹配前面的表達式至少n次a{2,}匹配aa或aaa等{n,m}匹配前面的表達式至少n次，至多m次a{2,4}匹配aa、aaa或aaaa

進階訓練—制作“商品訂購”表單3（2）非貪婪量詞除{n}外的重復量詞默認都是貪婪的，它們會盡可能多地匹配字符?？梢允褂梅秦澙罚ɑ驊卸瑁┝吭~，只需在量詞后加上問號?。非貪婪量詞會盡可能少地匹配字符，只要滿足匹配條件即可。例如，對于字符串“oooo”，“o+?”將匹配單個“o”，而“o+”將匹配所有“o”。非貪婪量詞主要用于需要精確控制匹配長度的情況，特別是在處理嵌套結構或需要最小化匹配的場景中。例如，在解析HTML或XML文檔時，使用非貪婪量詞可以幫助正確地匹配標簽內的內容，避免因貪婪匹配而導致的錯誤。假設有以下HTML字符串：<divid="container"><p>Paragraphone.</p><p>Paragraphtwo.</p><!--Somecomment--><p>Paragraphthree.</p></div>想要匹配每個<p>標簽及其內部的文本，但不希望匹配到整個<div>標簽。如果使用貪婪量詞，如<p>.*<\/p>，正則表達式可能會錯誤地匹配從第一個<p>標簽到最后一個</p>標簽之間的所有內容，包括注釋和其他<p>標簽。這是因為貪婪量詞會盡可能多地匹配字符，直到遇到最后一個</p>。

進階訓練—制作“商品訂購”表單3（3）位置錨點位置錨點比較特殊，是專門用于匹配文本的起始、結束或者特定位置的元字符。這些錨點不匹配任何字符，而是確定匹配發(fā)生的上下文位置。使用位置錨點可以讓正則表達式更加精確，避免不必要的匹配。

符號描述例子^匹配字符串的開始^Hello匹配所有以"Hello"開始的字符串$匹配字符串的結束World$匹配所有以"World"結束的字符串\b匹配單詞的邊界，即單詞字符（字母、數(shù)字、下劃線）與非單詞字符之間的位置er\b匹配“never”中的“er”，但不能匹配“verb”中的“er”\B匹配非單詞邊界，即兩個單詞字符或兩個非單詞字符之間的位置er\B匹配“verb”中的“er”，但不能匹配“never”中的“er”

進階訓練—制作“商品訂購”表單3（4）字符類正則表達式中的字符類匹配特定集合中的字符。有許多預定義的字符類，也可以定義自己的字符集。

符號描述例子[xyz]匹配字符集中的任意一個字符[abc]匹配a、b或c[^xyz]匹配不在字符集中的任意一個字符[^abc]匹配除a、b和c之外的任何字符[a-z]匹配指定范圍內的任意字符[a-z]匹配“a”到“z”范圍內的任意小寫字母字符[^a-z]匹配任何不在指定范圍內的任意字符[^a-z]匹配任何不在“a”到“z”范圍內的任意字符.匹配除換行符之外的任何字符，等價于[^\n\r]

\d匹配一個數(shù)字字符，等價于[0-9]

\D匹配一個非數(shù)字字符，等價于[^0-9]

\s匹配任何空白字符，包括空格、制表符、換頁符等等，等價于[\f\n\r\t\v]

\S匹配任何非空白字符，等價于[^\f\n\r\t\v]

\w匹配包括下劃線的任何單詞字符，等價于[A-Za-z0-9_]

\W匹配任何非單詞字符，等價于[^A-Za-z0-9_]

進階訓練—制作“商品訂購”表單3（5）轉義字符正則表達式中的轉義字符可用于插入保留字符，特殊字符和Unicode字符。所有轉義字符以\為起始。

符號描述例子\將下一個字符標記為一個特殊字符、或一個原義字符（有“^$()*+?.[\{|”共計12個）、或一個向后引用、或一個八進制轉義符n匹配字符n，\n匹配一個換行符；序列\(zhòng)\匹配\；而\(則匹配(。\000八進制轉義的形式為\000。數(shù)字值必須小于255(\377)\251匹配?\xFF十六進制轉義的形式為\xFF\xA9匹配?\uFFFFUnicode轉義的形式為\uFFFF\u00A9匹配?\cZ以\cZ格式轉義的Unicode控制字符。范圍從\cA(SOH,字符碼1)至\cZ(SUB,字符碼26)

\t匹配一個制表符,等價于\x09和\cI

\n匹配一個換行符,等價于\x0a和\cJ

\v匹配一個垂直制表符。等價于\x0b和\cK

\f匹配一個換頁符,等價于\x0c和\cL

\r匹配一個回車符,等價于\x0d和\cM

進階訓練—制作“商品訂購”表單3（6）前后查找前后查找允許主表達式前或之后的組，而不將其包含在結果中。負向查找指定一個表達式之前或之后無法匹配的組。

符號描述例子(?=pattern)匹配主表達式后面的組而不將其包含在結果中Windows(?=95|98|NT|2000)匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”(?!pattern)指定主表達式后無法匹配的組（如果匹配，則結果將被丟棄）Windows(?!95|98|NT|2000)匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”(?<=pattern)指定主表達式后無法匹配的組（如果匹配，則結