freeCodeCamp 課程精講為 HTML 表單添加提交按鈕Add a Submit Button to a Form【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在表單類網(wǎng)頁(yè)中最關(guān)鍵的一步就是讓用戶能真正把填寫(xiě)好的數(shù)據(jù)“發(fā)出去”。freeCodeCamp 的「Responsive Web Design」認(rèn)證路徑中basic-html-and-html5這一個(gè) block 里專門(mén)設(shè)計(jì)了一課Add a Submit Button to a Form為表單添加提交按鈕用最小可運(yùn)行的 CatPhotoApp 示例教你完成從“可輸入”到“可提交”的閉環(huán)。讀完本文你將完整掌握button typesubmit的語(yǔ)義與放置規(guī)則、action屬性與表單提交的關(guān)系以及自由代碼訓(xùn)練營(yíng)如何用自動(dòng)化測(cè)試逐條驗(yàn)證你的 HTML 結(jié)構(gòu)并能在自己的頁(yè)面中直接復(fù)用這套寫(xiě)法。該課程的源文件位于倉(cāng)庫(kù) bad87fee1348bd9aedd08830.md它同時(shí)也是 freeCodeCamp 課程倉(cāng)庫(kù)的“一等公民”——每一行描述、提示與測(cè)試代碼都真實(shí)驅(qū)動(dòng)著線上課程的判題邏輯。課程在 freeCodeCamp 課程體系中的位置在正式動(dòng)手前先弄清這節(jié)課在整條學(xué)習(xí)路徑里扮演什么角色。從 basic-html-and-html5.json 的challengeOrder可以看出這個(gè) block 按順序編排了大量 HTML 基礎(chǔ)挑戰(zhàn)其中與表單直接相關(guān)的三課緊密銜接順序標(biāo)題完成目標(biāo)前一課Create a Form Element用form包裹輸入框并指定action本課Add a Submit Button to a Form在 form 末尾加入提交按鈕讓表單真正可提交后一課Use HTML5 to Require a Field用required做必填校驗(yàn)把表單補(bǔ)完整也就是說(shuō)你已經(jīng)知道了“如何把輸入框裝進(jìn) form 并指定提交地址”本課解決的是“用戶點(diǎn)哪個(gè)按鈕把數(shù)據(jù)送出去”。而下一課則負(fù)責(zé)在數(shù)據(jù)發(fā)送前做客戶端校驗(yàn)。值得注意的是這個(gè) block 的blockLayout被標(biāo)記為legacy-challenge-list屬于需要逐題按順序完成的經(jīng)典 HTML/CSS 挑戰(zhàn)模塊。該挑戰(zhàn)文件頭部聲明了challengeType: 0對(duì)照 challenge-types.ts 中的常量定義0代表html類型——課程平臺(tái)會(huì)據(jù)此選擇classic視圖渲染挑戰(zhàn)并使用tests類型的提交邏輯即通過(guò)--hints--中的測(cè)試腳本判題而不是像項(xiàng)目類挑戰(zhàn)那樣提交網(wǎng)址。表單提交的核心機(jī)制action 定位去向submit 按鈕觸發(fā)動(dòng)作純 HTML 就足以構(gòu)造一個(gè)能向服務(wù)器真正提交數(shù)據(jù)的表單。挑戰(zhàn)描述開(kāi)門(mén)見(jiàn)山點(diǎn)出了兩條關(guān)鍵事實(shí)點(diǎn)擊提交按鈕會(huì)把表單里的數(shù)據(jù)發(fā)送到URL you specified with your formsactionattribute也就是form元素action屬性所指向的地址聲明一個(gè)提交按鈕的最小寫(xiě)法是button typesubmitthis button submits the form/button這里需要理解兩個(gè)彼此協(xié)作的部件form action...定義“數(shù)據(jù)發(fā)往哪里”。action缺失時(shí)瀏覽器默認(rèn)把數(shù)據(jù)提交回當(dāng)前頁(yè)面 URLtypesubmit的按鈕定義“用戶用什么動(dòng)作觸發(fā)發(fā)送”。當(dāng)用戶在表單內(nèi)點(diǎn)擊提交按鈕瀏覽器會(huì)把已命名的表單控件如帶name屬性的input整理成鍵值對(duì)并按照method默認(rèn)GET打包發(fā)往action指定的地址。在上一課 Create a Form Element 中CatPhotoApp 的表單已經(jīng)被寫(xiě)成了form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL /form也就是說(shuō)action已經(jīng)指向了免費(fèi)的測(cè)試接收端點(diǎn)https://www.freecatphotoapp.com/submit-cat-photo萬(wàn)事俱備只差一個(gè)能觸發(fā)提交的按鈕。任務(wù)要求與實(shí)現(xiàn)步驟挑戰(zhàn)指令--instructions--只有一句話卻包含三個(gè)必須同時(shí)滿足的約束Add a button as the last element of yourformelement with a type ofsubmit, andSubmitas its text. 在form元素的最后一個(gè)位置添加一個(gè)按鈕type為submit按鈕文本為Submit。逐字拆解這三個(gè)約束位置按鈕必須是form內(nèi)部的最后一個(gè)元素last element即放在input之后、/form之前類型通過(guò)屬性typesubmit聲明它是一個(gè)提交按鈕而不是普通按鈕typebutton或重置按鈕typereset文本按鈕可見(jiàn)文字為Submit區(qū)分大小寫(xiě)不敏感但內(nèi)容需與判題規(guī)則一致。本課給出的起點(diǎn)代碼--seed-contents--是一個(gè)結(jié)構(gòu)完整的 CatPhotoApp 頁(yè)面包含標(biāo)題、正文、無(wú)序列表、有序列表以及待改造的表單h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL /form /main你只需要在input與/form之間插入提交按鈕即可其余頁(yè)面內(nèi)容一律不要改動(dòng)。挑戰(zhàn)官方給出的完整參考解--solutions--部分如下h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL button typesubmitSubmit/button /form /main對(duì)比 seed 與 solution唯一差異正是那句經(jīng)典追加button typesubmitSubmit/button。動(dòng)手實(shí)踐時(shí)可以直接點(diǎn)擊課程界面右側(cè)的“Run the Tests”運(yùn)行判題也可以把它保存為本地 HTML 文件用瀏覽器打開(kāi)——點(diǎn)擊按鈕后瀏覽器會(huì)帶著catphotoURL之類的查詢串跳向action地址直觀驗(yàn)證“按鈕確實(shí)把表單數(shù)據(jù)提交了出去”。逐條解讀自動(dòng)判題四個(gè) hints 究竟在檢查什么這份挑戰(zhàn)最有“含金量”的部分是--hints--中四條 JavaScript 斷言。它們共同保證你的按鈕在結(jié)構(gòu)、屬性、文本、標(biāo)簽閉合四個(gè)維度上都嚴(yán)格合規(guī)。讀懂它們也就讀懂了這道題的全部驗(yàn)收標(biāo)準(zhǔn)。Hint 1form 內(nèi)部確實(shí)存在 buttonconst form document.querySelector(form); const children form.querySelectorAll(:scope ${button}); assert.isNotEmpty(children);取到頁(yè)面中唯一的form再用form.querySelectorAll(:scope button)在其內(nèi)部后代范圍查找所有button斷言結(jié)果非空。這條測(cè)試把按鈕錯(cuò)誤地放在 form 之外的情形直接攔下——按鈕必須嵌套在 form 內(nèi)否則它不會(huì)被識(shí)別為觸發(fā)該表單提交的控件。Hint 2type 屬性必須等于 submitassert.strictEqual(document.querySelector(button).getAttribute(type), submit);檢查頁(yè)面第一個(gè)button的type屬性嚴(yán)格等于字符串submit。注意 HTML 中按鈕若省略type默認(rèn)值其實(shí)是submit但本挑戰(zhàn)要求顯式寫(xiě)出typesubmit因?yàn)轱@式聲明是更規(guī)范、可讀性更好的做法也讓typebutton不觸發(fā)提交的普通按鈕這類寫(xiě)法被正確排除。Hint 3按鈕文本只能為 Submitconst text document.querySelector(button).textContent; assert.match(text,/^\s*submit\s*$/gi);讀取按鈕的textContent用正則/^\s*submit\s*$/gi匹配^與$限定全文、\s*容忍首尾空白、i忽略大小寫(xiě)。描述示例里this button submits the form這種文案只能當(dāng)作教學(xué)示意判題只接受純文本Submit。這條約束訓(xùn)練的是 HTML 中最常見(jiàn)的一類 bug——按鈕文案與實(shí)際意圖不符。Hint 4button 必須成對(duì)閉合assert.match(code,/\/button/g); assert.match(code,/button/g); assert.strictEqual(code.match(/\/button/g).length,code.match(/button/g).length);分別統(tǒng)計(jì)源碼里button與/button的出現(xiàn)次數(shù)要求兩者都存在且數(shù)量相等。這是經(jīng)典的“標(biāo)簽配對(duì)”校驗(yàn)把漏寫(xiě)閉合標(biāo)簽/button、或者多寫(xiě)了無(wú)主閉合標(biāo)簽的寫(xiě)法擋在門(mén)外強(qiáng)制形成編寫(xiě)自閉合良好 HTML 的習(xí)慣。四條 hint 分別從“位置嵌套、類型語(yǔ)義、文案內(nèi)容、標(biāo)簽閉合”四個(gè)維度鎖死了解法這也是課程倉(cāng)庫(kù)把判題與題目說(shuō)明同文件存放的設(shè)計(jì)初衷學(xué)習(xí)者在 bad87fee1348bd9aedd08830.md 這一個(gè)文件里就能同時(shí)讀到題目、示例、判題規(guī)則與標(biāo)準(zhǔn)答案。從文件結(jié)構(gòu)理解一份課程挑戰(zhàn)是如何被“編排”的如果你好奇這套開(kāi)源課程體系是如何把.md文本變成線上交互挑戰(zhàn)的本文件本身就是最好的標(biāo)本。它由 YAML frontmatter 與多個(gè)# --section--段落組成frontmatter記錄id全局唯一、title、challengeType: 0、dashedName、forumTopicId等元數(shù)據(jù)。其中challengeType在 challenge-schema.js 中被 Joi 校驗(yàn)為0~33的整數(shù)取值含義集中在 challenge-types.ts# --description--供學(xué)習(xí)者閱讀的知識(shí)講解與代碼示例# --instructions--本關(guān)的具體任務(wù)描述# --hints--逐條判題腳本每條附帶對(duì)用戶的自然語(yǔ)言說(shuō)明# --seed--/## --seed-contents--編輯器中的初始代碼# --solutions--官方參考實(shí)現(xiàn)用于學(xué)習(xí)者對(duì)照。而 block 內(nèi)各挑戰(zhàn)的先后順序并不由文件名字決定而是由 basic-html-and-html5.json 中challengeOrder數(shù)組顯式指定——這也是為什么本文件叫bad87fee1348bd9aedd08830.md以id命名而課程展示順序卻由 JSON 統(tǒng)一編排。延伸實(shí)戰(zhàn)讓這個(gè)表單真正完整把提交按鈕補(bǔ)上只是表單三件套的第一步。緊隨其后的 Use HTML5 to Require a Field 繼續(xù)教你用required屬性做必填約束其核心寫(xiě)法是給input加上布爾屬性requiredinput typetext required placeholdercat photo URL加上required后瀏覽器會(huì)在你提交空表單時(shí)攔截請(qǐng)求并彈出“請(qǐng)?zhí)顚?xiě)此字段”的提示——這正是 HTML5 原生表單校驗(yàn)constraint validation的威力無(wú)需任何 JavaScript提交前必填檢查由瀏覽器完成。它在 bad87fee1348bd9aedc08830.md 的 solution 中與action、placeholder、typesubmit并存組合成一段極簡(jiǎn)但功能完整的“必填提交”示例form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext required placeholdercat photo URL button typesubmitSubmit/button /form順著這條支線繼續(xù)你還會(huì)在這個(gè) block 中遇到name與value屬性決定提交的數(shù)據(jù)鍵值、radio/checkbox 分組等話題——它們都建立在“按鈕能把表單發(fā)出去”這個(gè)本課打下的地基之上。小結(jié)本課必須帶走的五個(gè)知識(shí)點(diǎn)表單數(shù)據(jù)的“發(fā)送目的地”由form action...決定“發(fā)送動(dòng)作”由typesubmit的按鈕觸發(fā)提交按鈕必須作為form內(nèi)部的元素存在本挑戰(zhàn)要求放在表單的最后一個(gè)位置規(guī)范寫(xiě)法是顯式聲明button typesubmitSubmit/button文本需與界面意圖一致判題系統(tǒng)通過(guò) DOM 斷言嵌套關(guān)系、type屬性、文本內(nèi)容與源碼正則標(biāo)簽配對(duì)雙軌驗(yàn)證答案四個(gè) hint 缺一不可表單體驗(yàn)的完整閉環(huán)還需要required等 HTML5 校驗(yàn)?zāi)芰ε浜纤鼈兘M成了 CatPhotoApp 這一系列挑戰(zhàn)循序漸進(jìn)的教學(xué)脈絡(luò)。當(dāng)你把button typesubmitSubmit/button寫(xiě)進(jìn) CatPhotoApp 的form里并通過(guò)全部四條測(cè)試時(shí)你就已經(jīng)掌握了原生 HTML 表單從“收集數(shù)據(jù)”到“提交數(shù)據(jù)”的完整鏈路——這門(mén)手藝在純靜態(tài)頁(yè)面、前后端分離表單乃至任何 Web 開(kāi)發(fā)工作中都是最基礎(chǔ)的起點(diǎn)。若想繼續(xù)深挖這份開(kāi)源課程的完整知識(shí)圖譜可以直接在倉(cāng)庫(kù)的 curriculum/challenges/english/blocks/basic-html-and-html5 目錄下按順序閱讀同 block 的其余挑戰(zhàn)文件或查看 structure/blocks 中的編排 JSON理解整套課程是如何組織與驅(qū)動(dòng)的?！久赓M(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 freeCodeCamp 課程精講：為 HTML 表單添加提交按鈕（Add a Submit Button to a Form）
freeCodeCamp 課程精講為 HTML 表單添加提交按鈕Add a Submit Button to a Form【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在表單類網(wǎng)頁(yè)中最關(guān)鍵的一步就是讓用戶能真正把填寫(xiě)好的數(shù)據(jù)“發(fā)出去”。freeCodeCamp 的「Responsive Web Design」認(rèn)證路徑中basic-html-and-html5這一個(gè) block 里專門(mén)設(shè)計(jì)了一課Add a Submit Button to a Form為表單添加提交按鈕用最小可運(yùn)行的 CatPhotoApp 示例教你完成從“可輸入”到“可提交”的閉環(huán)。讀完本文你將完整掌握button typesubmit的語(yǔ)義與放置規(guī)則、action屬性與表單提交的關(guān)系以及自由代碼訓(xùn)練營(yíng)如何用自動(dòng)化測(cè)試逐條驗(yàn)證你的 HTML 結(jié)構(gòu)并能在自己的頁(yè)面中直接復(fù)用這套寫(xiě)法。該課程的源文件位于倉(cāng)庫(kù) bad87fee1348bd9aedd08830.md它同時(shí)也是 freeCodeCamp 課程倉(cāng)庫(kù)的“一等公民”——每一行描述、提示與測(cè)試代碼都真實(shí)驅(qū)動(dòng)著線上課程的判題邏輯。課程在 freeCodeCamp 課程體系中的位置在正式動(dòng)手前先弄清這節(jié)課在整條學(xué)習(xí)路徑里扮演什么角色。從 basic-html-and-html5.json 的challengeOrder可以看出這個(gè) block 按順序編排了大量 HTML 基礎(chǔ)挑戰(zhàn)其中與表單直接相關(guān)的三課緊密銜接順序標(biāo)題完成目標(biāo)前一課Create a Form Element用form包裹輸入框并指定action本課Add a Submit Button to a Form在 form 末尾加入提交按鈕讓表單真正可提交后一課Use HTML5 to Require a Field用required做必填校驗(yàn)把表單補(bǔ)完整也就是說(shuō)你已經(jīng)知道了“如何把輸入框裝進(jìn) form 并指定提交地址”本課解決的是“用戶點(diǎn)哪個(gè)按鈕把數(shù)據(jù)送出去”。而下一課則負(fù)責(zé)在數(shù)據(jù)發(fā)送前做客戶端校驗(yàn)。值得注意的是這個(gè) block 的blockLayout被標(biāo)記為legacy-challenge-list屬于需要逐題按順序完成的經(jīng)典 HTML/CSS 挑戰(zhàn)模塊。該挑戰(zhàn)文件頭部聲明了challengeType: 0對(duì)照 challenge-types.ts 中的常量定義0代表html類型——課程平臺(tái)會(huì)據(jù)此選擇classic視圖渲染挑戰(zhàn)并使用tests類型的提交邏輯即通過(guò)--hints--中的測(cè)試腳本判題而不是像項(xiàng)目類挑戰(zhàn)那樣提交網(wǎng)址。表單提交的核心機(jī)制action 定位去向submit 按鈕觸發(fā)動(dòng)作純 HTML 就足以構(gòu)造一個(gè)能向服務(wù)器真正提交數(shù)據(jù)的表單。挑戰(zhàn)描述開(kāi)門(mén)見(jiàn)山點(diǎn)出了兩條關(guān)鍵事實(shí)點(diǎn)擊提交按鈕會(huì)把表單里的數(shù)據(jù)發(fā)送到URL you specified with your formsactionattribute也就是form元素action屬性所指向的地址聲明一個(gè)提交按鈕的最小寫(xiě)法是button typesubmitthis button submits the form/button這里需要理解兩個(gè)彼此協(xié)作的部件form action...定義“數(shù)據(jù)發(fā)往哪里”。action缺失時(shí)瀏覽器默認(rèn)把數(shù)據(jù)提交回當(dāng)前頁(yè)面 URLtypesubmit的按鈕定義“用戶用什么動(dòng)作觸發(fā)發(fā)送”。當(dāng)用戶在表單內(nèi)點(diǎn)擊提交按鈕瀏覽器會(huì)把已命名的表單控件如帶name屬性的input整理成鍵值對(duì)并按照method默認(rèn)GET打包發(fā)往action指定的地址。在上一課 Create a Form Element 中CatPhotoApp 的表單已經(jīng)被寫(xiě)成了form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL /form也就是說(shuō)action已經(jīng)指向了免費(fèi)的測(cè)試接收端點(diǎn)https://www.freecatphotoapp.com/submit-cat-photo萬(wàn)事俱備只差一個(gè)能觸發(fā)提交的按鈕。任務(wù)要求與實(shí)現(xiàn)步驟挑戰(zhàn)指令--instructions--只有一句話卻包含三個(gè)必須同時(shí)滿足的約束Add a button as the last element of yourformelement with a type ofsubmit, andSubmitas its text. 在form元素的最后一個(gè)位置添加一個(gè)按鈕type為submit按鈕文本為Submit。逐字拆解這三個(gè)約束位置按鈕必須是form內(nèi)部的最后一個(gè)元素last element即放在input之后、/form之前類型通過(guò)屬性typesubmit聲明它是一個(gè)提交按鈕而不是普通按鈕typebutton或重置按鈕typereset文本按鈕可見(jiàn)文字為Submit區(qū)分大小寫(xiě)不敏感但內(nèi)容需與判題規(guī)則一致。本課給出的起點(diǎn)代碼--seed-contents--是一個(gè)結(jié)構(gòu)完整的 CatPhotoApp 頁(yè)面包含標(biāo)題、正文、無(wú)序列表、有序列表以及待改造的表單h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL /form /main你只需要在input與/form之間插入提交按鈕即可其余頁(yè)面內(nèi)容一律不要改動(dòng)。挑戰(zhàn)官方給出的完整參考解--solutions--部分如下h2CatPhotoApp/h2 main pClick here to view more a href#cat photos/a./p a href#img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext placeholdercat photo URL button typesubmitSubmit/button /form /main對(duì)比 seed 與 solution唯一差異正是那句經(jīng)典追加button typesubmitSubmit/button。動(dòng)手實(shí)踐時(shí)可以直接點(diǎn)擊課程界面右側(cè)的“Run the Tests”運(yùn)行判題也可以把它保存為本地 HTML 文件用瀏覽器打開(kāi)——點(diǎn)擊按鈕后瀏覽器會(huì)帶著catphotoURL之類的查詢串跳向action地址直觀驗(yàn)證“按鈕確實(shí)把表單數(shù)據(jù)提交了出去”。逐條解讀自動(dòng)判題四個(gè) hints 究竟在檢查什么這份挑戰(zhàn)最有“含金量”的部分是--hints--中四條 JavaScript 斷言。它們共同保證你的按鈕在結(jié)構(gòu)、屬性、文本、標(biāo)簽閉合四個(gè)維度上都嚴(yán)格合規(guī)。讀懂它們也就讀懂了這道題的全部驗(yàn)收標(biāo)準(zhǔn)。Hint 1form 內(nèi)部確實(shí)存在 buttonconst form document.querySelector(form); const children form.querySelectorAll(:scope ${button}); assert.isNotEmpty(children);取到頁(yè)面中唯一的form再用form.querySelectorAll(:scope button)在其內(nèi)部后代范圍查找所有button斷言結(jié)果非空。這條測(cè)試把按鈕錯(cuò)誤地放在 form 之外的情形直接攔下——按鈕必須嵌套在 form 內(nèi)否則它不會(huì)被識(shí)別為觸發(fā)該表單提交的控件。Hint 2type 屬性必須等于 submitassert.strictEqual(document.querySelector(button).getAttribute(type), submit);檢查頁(yè)面第一個(gè)button的type屬性嚴(yán)格等于字符串submit。注意 HTML 中按鈕若省略type默認(rèn)值其實(shí)是submit但本挑戰(zhàn)要求顯式寫(xiě)出typesubmit因?yàn)轱@式聲明是更規(guī)范、可讀性更好的做法也讓typebutton不觸發(fā)提交的普通按鈕這類寫(xiě)法被正確排除。Hint 3按鈕文本只能為 Submitconst text document.querySelector(button).textContent; assert.match(text,/^\s*submit\s*$/gi);讀取按鈕的textContent用正則/^\s*submit\s*$/gi匹配^與$限定全文、\s*容忍首尾空白、i忽略大小寫(xiě)。描述示例里this button submits the form這種文案只能當(dāng)作教學(xué)示意判題只接受純文本Submit。這條約束訓(xùn)練的是 HTML 中最常見(jiàn)的一類 bug——按鈕文案與實(shí)際意圖不符。Hint 4button 必須成對(duì)閉合assert.match(code,/\/button/g); assert.match(code,/button/g); assert.strictEqual(code.match(/\/button/g).length,code.match(/button/g).length);分別統(tǒng)計(jì)源碼里button與/button的出現(xiàn)次數(shù)要求兩者都存在且數(shù)量相等。這是經(jīng)典的“標(biāo)簽配對(duì)”校驗(yàn)把漏寫(xiě)閉合標(biāo)簽/button、或者多寫(xiě)了無(wú)主閉合標(biāo)簽的寫(xiě)法擋在門(mén)外強(qiáng)制形成編寫(xiě)自閉合良好 HTML 的習(xí)慣。四條 hint 分別從“位置嵌套、類型語(yǔ)義、文案內(nèi)容、標(biāo)簽閉合”四個(gè)維度鎖死了解法這也是課程倉(cāng)庫(kù)把判題與題目說(shuō)明同文件存放的設(shè)計(jì)初衷學(xué)習(xí)者在 bad87fee1348bd9aedd08830.md 這一個(gè)文件里就能同時(shí)讀到題目、示例、判題規(guī)則與標(biāo)準(zhǔn)答案。從文件結(jié)構(gòu)理解一份課程挑戰(zhàn)是如何被“編排”的如果你好奇這套開(kāi)源課程體系是如何把.md文本變成線上交互挑戰(zhàn)的本文件本身就是最好的標(biāo)本。它由 YAML frontmatter 與多個(gè)# --section--段落組成frontmatter記錄id全局唯一、title、challengeType: 0、dashedName、forumTopicId等元數(shù)據(jù)。其中challengeType在 challenge-schema.js 中被 Joi 校驗(yàn)為0~33的整數(shù)取值含義集中在 challenge-types.ts# --description--供學(xué)習(xí)者閱讀的知識(shí)講解與代碼示例# --instructions--本關(guān)的具體任務(wù)描述# --hints--逐條判題腳本每條附帶對(duì)用戶的自然語(yǔ)言說(shuō)明# --seed--/## --seed-contents--編輯器中的初始代碼# --solutions--官方參考實(shí)現(xiàn)用于學(xué)習(xí)者對(duì)照。而 block 內(nèi)各挑戰(zhàn)的先后順序并不由文件名字決定而是由 basic-html-and-html5.json 中challengeOrder數(shù)組顯式指定——這也是為什么本文件叫bad87fee1348bd9aedd08830.md以id命名而課程展示順序卻由 JSON 統(tǒng)一編排。延伸實(shí)戰(zhàn)讓這個(gè)表單真正完整把提交按鈕補(bǔ)上只是表單三件套的第一步。緊隨其后的 Use HTML5 to Require a Field 繼續(xù)教你用required屬性做必填約束其核心寫(xiě)法是給input加上布爾屬性requiredinput typetext required placeholdercat photo URL加上required后瀏覽器會(huì)在你提交空表單時(shí)攔截請(qǐng)求并彈出“請(qǐng)?zhí)顚?xiě)此字段”的提示——這正是 HTML5 原生表單校驗(yàn)constraint validation的威力無(wú)需任何 JavaScript提交前必填檢查由瀏覽器完成。它在 bad87fee1348bd9aedc08830.md 的 solution 中與action、placeholder、typesubmit并存組合成一段極簡(jiǎn)但功能完整的“必填提交”示例form actionhttps://www.freecatphotoapp.com/submit-cat-photo input typetext required placeholdercat photo URL button typesubmitSubmit/button /form順著這條支線繼續(xù)你還會(huì)在這個(gè) block 中遇到name與value屬性決定提交的數(shù)據(jù)鍵值、radio/checkbox 分組等話題——它們都建立在“按鈕能把表單發(fā)出去”這個(gè)本課打下的地基之上。小結(jié)本課必須帶走的五個(gè)知識(shí)點(diǎn)表單數(shù)據(jù)的“發(fā)送目的地”由form action...決定“發(fā)送動(dòng)作”由typesubmit的按鈕觸發(fā)提交按鈕必須作為form內(nèi)部的元素存在本挑戰(zhàn)要求放在表單的最后一個(gè)位置規(guī)范寫(xiě)法是顯式聲明button typesubmitSubmit/button文本需與界面意圖一致判題系統(tǒng)通過(guò) DOM 斷言嵌套關(guān)系、type屬性、文本內(nèi)容與源碼正則標(biāo)簽配對(duì)雙軌驗(yàn)證答案四個(gè) hint 缺一不可表單體驗(yàn)的完整閉環(huán)還需要required等 HTML5 校驗(yàn)?zāi)芰ε浜纤鼈兘M成了 CatPhotoApp 這一系列挑戰(zhàn)循序漸進(jìn)的教學(xué)脈絡(luò)。當(dāng)你把button typesubmitSubmit/button寫(xiě)進(jìn) CatPhotoApp 的form里并通過(guò)全部四條測(cè)試時(shí)你就已經(jīng)掌握了原生 HTML 表單從“收集數(shù)據(jù)”到“提交數(shù)據(jù)”的完整鏈路——這門(mén)手藝在純靜態(tài)頁(yè)面、前后端分離表單乃至任何 Web 開(kāi)發(fā)工作中都是最基礎(chǔ)的起點(diǎn)。若想繼續(xù)深挖這份開(kāi)源課程的完整知識(shí)圖譜可以直接在倉(cāng)庫(kù)的 curriculum/challenges/english/blocks/basic-html-and-html5 目錄下按順序閱讀同 block 的其余挑戰(zhàn)文件或查看 structure/blocks 中的編排 JSON理解整套課程是如何組織與驅(qū)動(dòng)的?！久赓M(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考